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