前言
- 在项目的开发中必然会遇到表单验证,如果你的项目在一个界面有很多表单的时候做表单验证一个表单写一个,代码重复看上去就显得很臃肿,下面我们就用
Promise.all()
方法来解决这个问题
Promise.all()方法
Promise.all()
方法提供了并行执行异步操作的能力,并且在所有异步操作执行完后才执行回调。可以将多个 Promise
实例,包装成一个新的 Promise
实例
实现多表单验证
- 首先我们得写一个验证方法,然后在把需要验证的表单循环放入
Promise.all
里面通过 then
回调函数,然后在里面写上需要执行的操作
const formName = [form1, form2, form3, form4]
const validates = (item) => {
return new Promise((resolve, reject) => {
if (!this.$refs[item]) {
resolve()
return false
}
this.$refs[item].validate((valid) => {
if (valid) {
resolve()
} else {
reject()
}
})
})
}
Promise.all(formName.map((item) => validates(item)))
.then((=>{
console.log('验证成功');
}))
.catch((=>{
console.log('验证失败');
}))
- 表单校验重置也是一样的操作,只需要把
validates
方法换成重置方法resetFields
就好了