form 表单验证是异步问题记录(推荐)
更新时间：2023年01月13日 15:23:04 作者：CryptoCode lv-4
这篇文章主要介绍了form 表单验证是异步问题记录,通过实例代码介绍了Promise.all 和 Promise.allSettled 区别，需要的朋友可以参考下
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 表单验证异步内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
Vue数组中出现__ob__:Observer无法取值问题的解决方法
__ob__: Observer这个属性其实是Vue监控变量产生的,下面这篇文章主要给大家介绍了关于Vue数组中出现__ob__: Observer无法取值问题的解决方法,文中通过示例代码介绍的非常详细,需要的朋友可以参考下2022-03-03
今天小编就为大家分享一篇解决vue组件中click事件失效的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-11-11
这篇文章主要介绍了解决vue路由name同名,路由重复的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-08-08
浅谈vue中关于checkbox数据绑定v-model指令的个人理解
这篇文章主要介绍了浅谈vue中关于checkbox数据绑定v-model指令的个人理解,v-model用于表单的数据绑定很常见，下面就来详细的介绍一下2018-11-11
这篇文章主要介绍了Vue中的事件处理详情，文章通过给按钮绑定一个 click 事件展开详细内容介绍，需要的小伙伴可以参考一下2022-05-05
这篇文章主要介绍了Vue自定义指令的实现，Vue支持自定义指令，开发者可以根据自己的需求，创建自己的指令来扩展Vue的功能，需要详细了解可以参考下文2023-05-05
让我们来回顾下Vue的介绍,可以发现Vue 最显著的一个功能是响应系统。那么它的实现原理有又是如何呢?下面小编和大家来一起学习一下2019-05-05
这篇文章主要为大家详细介绍了vue实现单选和多选功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-08-08
这篇文章主要介绍了vue-cli 构建骨架屏的方法示例,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-11-11
vue+video.js视频播放、视频切换、视频断点分段上传功能
本次需求是做一个视频列表，点击视频列表播放对应视频；同时要求实现断点分段上传大文件（视频）的功能,今天通过本文给大家讲解下vue+video.js视频播放、视频切换、视频断点分段上传功能，感兴趣的朋友一起看看吧2022-12-12
最新评论