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é)束之后再進(jìn)行提交
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é)束之后再進(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有一個成功，后面就斷掉了Promise.allSettled也是有一個成功，后面也斷掉了- 不一樣的就是兩這種返回值：
all返回單個值，allSettled返回對象
到此這篇關(guān)于form 表單驗證是異步問題記錄的文章就介紹到這了,更多相關(guān)form 表單驗證異步內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
Vue數(shù)組中出現(xiàn)__ob__:Observer無法取值問題的解決方法
__ob__: Observer這個屬性其實是Vue監(jiān)控變量產(chǎn)生的,下面這篇文章主要給大家介紹了關(guān)于Vue數(shù)組中出現(xiàn)__ob__:?Observer無法取值問題的解決方法,文中通過示例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-03-03
今天小編就為大家分享一篇解決vue組件中click事件失效的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-11-11
這篇文章主要介紹了解決vue路由name同名,路由重復(fù)的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-08-08
淺談vue中關(guān)于checkbox數(shù)據(jù)綁定v-model指令的個人理解
這篇文章主要介紹了淺談vue中關(guān)于checkbox數(shù)據(jù)綁定v-model指令的個人理解,v-model用于表單的數(shù)據(jù)綁定很常見，下面就來詳細(xì)的介紹一下2018-11-11
這篇文章主要介紹了Vue中的事件處理詳情，文章通過給按鈕綁定一個?click?事件展開詳細(xì)內(nèi)容介紹，需要的小伙伴可以參考一下2022-05-05
這篇文章主要介紹了Vue自定義指令的實現(xiàn)，Vue支持自定義指令，開發(fā)者可以根據(jù)自己的需求，創(chuàng)建自己的指令來擴(kuò)展Vue的功能，需要詳細(xì)了解可以參考下文2023-05-05
讓我們來回顧下Vue的介紹,可以發(fā)現(xiàn)Vue 最顯著的一個功能是響應(yīng)系統(tǒng)。那么它的實現(xiàn)原理有又是如何呢?下面小編和大家來一起學(xué)習(xí)一下2019-05-05
這篇文章主要為大家詳細(xì)介紹了vue實現(xiàn)單選和多選功能，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-08-08
這篇文章主要介紹了vue-cli 構(gòu)建骨架屏的方法示例,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-11-11
vue+video.js視頻播放、視頻切換、視頻斷點分段上傳功能
本次需求是做一個視頻列表，點擊視頻列表播放對應(yīng)視頻；同時要求實現(xiàn)斷點分段上傳大文件（視頻）的功能,今天通過本文給大家講解下vue+video.js視頻播放、視頻切換、視頻斷點分段上傳功能，感興趣的朋友一起看看吧2022-12-12