使用element的from组件同时对多个表单进行校验

表单，例子如下，假设有使用多个表单的情况，每个表单对应不同的model数据，以及不唯一的ref（用来做表单验证）

<el-form :inline="true" :model="billingInfo" :rules="rules" ref="billingInfo" label-position="left" label-width="140px">
   <el-form-item label="账号" prop="account">
       <el-input placeholder="请输入账号" v-model="billingInfo.account"></el-input>
   </el-form-item>
   <el-form-item label-width='95px' label="收件地址" prop="consigneeAddress">
       <el-input placeholder="请输入收件地址" v-model="billingInfo.consigneeAddress"></el-input>
   </el-form-item>
   <el-form-item label="收件人" prop="addressee">
       <el-input placeholder="请输入收件人" v-model="billingInfo.addressee"></el-input>
   </el-form-item>
</el-form>

checkForm函数用来构建promise实例，当每一个表单都通过validate函数验证痛过之后，将成功信息抛出

   checkForm(formName) {
      return new Promise((resolve) => {
        this.$refs[formName].validate((valid,object) => {
          if(valid){
            resolve();
          }else{
            let errorArr = [];
            for (let key in object) {
              object[key].forEach((item) => {
                errorArr.push(item.message);
              });
              this.errsArray.push.apply(this.errsArray,errorArr);
            }
          }
        });
      });
    },

通过promise.all方法的特性来检索所有表单验证是否都通过

promise.all()该方法用于将多个Promise实例，包装成一个新的Promise实例。

var fn = promise.all([p1,p2,p3])

（1）只有p1、p2、p3的状态都变成fulfilled，p的状态才会变成fulfilled，此时p1、p2、p3的返回值组成一个数组，传递给fn的回调函数。
（2）只要p1、p2、p3之中有一个被rejected，p的状态就变成rejected，此时第一个被reject的实例的返回值，会传递给fn的回调函数。

    var p1 = new Promise((resolve, reject) => {
        resolve('p1成功了')
    });

    var p2 = new Promise((resolve, reject) => {
        resolve('p2成功')
    });

    var p3 = Promise.reject('p3失败');
    var p4 = Promise.resolve('p4成功');

    

    Promise.all([p1,p2,p3]).then(result=>{
        console.log(result);
    }).catch((err)=>{
        console.log(err);     //输出p3失败
    });

    Promise.all([p1,p2,p4]).then(result=>{
        console.log(result);    //输出数组 ['p1成功了', 'p2成功', 'p4成功']
    }).catch((err)=>{
        console.log(err);
    })

 提交按钮事件函数，将所有表单promise实例数组传递给Promise.all()方法，如果所有promise结果都为成功状态，则表明所有校验都已通过

其中scrollIntoView方法作用可以将滚动条定位到验证失败表单的位置，结合element表单中本身校验失败会有一个标红提示，其本事样式是通过is-error类名控制的，即可定位到精确位置，如果一个页面表单信息量很大的情况下，该方法还是非常实用的。

 submitBtn(){
    this.errsArray=[]
    let list = [];
     list.push(
        this.checkForm("basicsInfo"),   //checkForm函数传入每一个表单的ref值，用来区别不同表单的校验结果
        this.checkForm("billingInfo"),
        this.checkForm("bankInfoObj"),
     );
     this.$nextTick(() => {
          let isError = document.getElementsByClassName("is-error");
          if (isError.length != 0) {
            isError[0].scrollIntoView({
                // 滚动到指定节点
                // 值有start,center,end，nearest，当前显示在视图区域中间
                block: "center",
                // 值有auto、instant,smooth，缓动动画（当前是慢速的）
                behavior: "smooth",
            });
              return;  
          }
      })
      Promise.all(list).then(() => {
          //提交表单请求相关逻辑代码      
      })
      .catch(() => {
        return
      });
  }