form?表單驗證是異步問題記錄(推薦)
更新時間：2023年01月13日 15:23:04 作者：CryptoCode?lv-4
這篇文章主要介紹了form?表單驗證是異步問題記錄,通過實例代碼介紹了Promise.all 和 Promise.allSettled 區(qū)別，需要的朋友可以參考下
form 表單驗證是異步的
const submit = () => {
// 驗證器A
const validateA = () => {
quotationSettingFormRefA.value.validate((valid: boolean) => {
if (valid) {
data.validA = true
} else {
data.validA = false
}
console.log(data.validA, 'validateA')
})
}
// 驗證器B
const validateB = () => {
quotationSettingFormRefB.value.validate((valid: boolean) => {
if (valid) {
data.validB = true
} else {
data.validB = false
}
console.log(data.validB, 'validateB')
})
}
// 等待兩個驗證結(jié)束之后再進行提交
Promise.all([validateA(), validateB()]).then(() => {
console.log(data.validA, data.validB, 'valid')
})
}
從截圖可以發(fā)現(xiàn)是先執(zhí)行了 then 里面的代碼，然后再是驗證器，說明form驗證器是異步的，所以這種情況會影響提交，接著換另外一種方式
const submit = () => {
const validateA = () => {
return new Promise((resolve) => {
quotationSettingFormRefA.value.validate((valid: boolean) => {
if (valid) {
data.validA = true
} else {
data.validA = false
}
resolve(valid)
console.log(data.validA, '左邊驗證')
})
})
}
// 右邊驗證
const validateB = () => {
new Promise((resolve) => {
quotationSettingFormRefB.value.validate((valid: boolean) => {
if (valid) {
data.validB = true
} else {
data.validB = false
}
resolve(valid)
console.log(data.validB, '右邊驗證')
})
})
}
// 等待兩個驗證結(jié)束之后再進行提交
Promise.all([validateA(), validateB()]).then((res) => {
console.log(data.validA, data.validB, 'valid', res)
})
}
Promise.all 和 Promise.allSettled 區(qū)別
Promise.allSettled([validateA(), validateB()]).then((res) => {
console.log(data.validA, data.validB, 'valid', res)
})
Promise.all有一個成功，后面就斷掉了Promise.allSettled也是有一個成功，后面也斷掉了- 不一樣的就是兩這種返回值：
all返回單個值，allSettled返回對象
到此這篇關(guān)于form 表單驗證是異步問題記錄的文章就介紹到這了,更多相關(guān)form 表單驗證異步內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
vue實現(xiàn)多個tab標(biāo)簽頁的切換與關(guān)閉詳細代碼
這篇文章主要給大家介紹了關(guān)于vue實現(xiàn)多個tab標(biāo)簽頁的切換與關(guān)閉的相關(guān)資料,使用vue.js實現(xiàn)tab切換很簡單,文中通過代碼示例介紹的非常詳細,需要的朋友可以參考下2023-10-10
vue3+el-select實現(xiàn)觸底加載更多功能(ts版)
這篇文章主要給大家介紹了基于vue3和el-select實現(xiàn)觸底加載更多功能，文中有詳細的代碼示例，感興趣的同學(xué)可以借鑒參考下2023-07-07
這篇文章主要為大家詳細介紹了Vue自定義可以選擇日期區(qū)間段的日歷插件，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-03-03
這篇文章主要介紹了Vue axios攔截器如何單獨配置token及vue axios攔截器的使用,需要的朋友可以參考下2019-12-12
這篇文章主要介紹了vue項目打包后怎樣優(yōu)雅的解決跨域,文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05
vue實現(xiàn)表格動態(tài)嵌入折線圖的繪制代碼
這篇文章給大家介紹了vue實現(xiàn)表格動態(tài)嵌入折線圖的繪制方法,文中有詳細完整的代碼示例攻大家參考,對大家的學(xué)習(xí)或工作有一定的參考價值,需要的朋友可以參考下2023-10-10
本篇文章主要介紹了詳解基于vue-cli配置移動端自適應(yīng)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-01-01
頁面內(nèi)錨點定位及跳轉(zhuǎn)方法總結(jié)（推薦）
這篇文章主要介紹了頁面內(nèi)錨點定位及跳轉(zhuǎn)方法總結(jié)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
本篇文章主要介紹了基于 Vue 的樹形選擇組件的示例代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-08-08
Vue中v-form標(biāo)簽里的:rules作用及定義方法
文章介紹了在Vue項目中使用ElementUI或ElementPlus組件庫時,如何通過`el-form`標(biāo)簽的`:rules`屬性進行表單驗證,`:rules`屬性用于定義表單項的驗證規(guī)則,包括必填項、格式校驗、長度限制等,文章還展示了如何定義基本驗證規(guī)則和自定義驗證函數(shù),感興趣的朋友一起看看吧2025-03-03