vue使用Promise.all进行多表单验证

前言

• 在项目的开发中必然会遇到表单验证，如果你的项目在一个界面有很多表单的时候做表单验证一个表单写一个，代码重复看上去就显得很臃肿，下面我们就用 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
Promise.all(formName.map((item) => validates(item)))
.then((=>{
  console.log('验证成功');
}))
.catch((=>{
  console.log('验证失败');
}))

• 表单校验重置也是一样的操作，只需要把validates方法换成重置方法resetFields就好了