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')
})
}
// 等待两个验证结束之后再进行提交
Promise.all([validateA(), validateB()]).then(() => {
console.log(data.validA, data.validB, 'valid')
})
}
从截图可以发现是先执行了 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, '右边验证')
})
})
}
// 等待两个验证结束之后再进行提交
Promise.all([validateA(), validateB()]).then((res) => {
console.log(data.validA, data.validB, 'valid', res)
})
}
Promise.all 和 Promise.allSettled 区别
Promise.allSettled([validateA(), validateB()]).then((res) => {
console.log(data.validA, data.validB, 'valid', res)
})
Promise.all有一个成功，后面就断掉了Promise.allSettled也是有一个成功，后面也断掉了- 不一样的就是两这种返回值：
all返回单个值，allSettled返回对象
到此这篇关于form 表单验证是异步问题记录的文章就介绍到这了,更多相关form 表单验证异步内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网！
