vue + element ui 同时提交多个表单的表单验证

使用场景

在写项目的过程中，遇到了需要同时提交多个表单并且需要同时验证通过了才可以提交数据，调用接口，所以这个时候，平时提交的一个表达的方法就不是很合适，那处理这种情况应该怎么弄呢？

使用方法

刚开始没有什么思路，最后在网上搜索到了一些例子，都说同时验证多个表单，使用Promise all方法

百看不如一试！上代码：

先定义一个用来检测表单是否通过验证的公共方法

checkForm(formName) {
  return new Promise((resolve, reject) => {
    this.$refs[formName].validate(valid => {
      if (valid) {
        resolve()
      } else reject()
    })
  })
},

formName绑定的表单的ref的值

然后在提交表单的点击事件里面使用Promise all()方法来检测页面中所有的表单是否都有通过验证，通过验证就可以继续写上逻辑代码，不成功就抛出未通过校验的错误

submit(){
  let list = [] //这个数组就是一个用来存放所有表单验证结果的集合
  list.push(
    this.checkForm('form'),//绑定的表单1
    this.checkForm('form1') //绑定的表单2
  )
  Promise.all(list)
    .then(() => {
      console.log('表单校验通过')
      //逻辑操作代码
    })
    .catch(() => {
      console.log('表单校验未通过')
    })
},