Element同时验证多个表单

这是完成的效果：同时验证多个表单。点击检验表单按钮可以对上方四个表单进行检验。

Element的Form 组件提供了表单验证的功能，通过 rules 属性传入约定的验证规则，并将 Form-Item 的 prop 属性设置为需校验的字段名即可对其进行验证。然后通过提交按钮的再次检测就可以完成对整个表单的检测，如下图所示。

this.$refs[formName].validate((valid) => {
          if (valid) {
            alert('submit!');
          } else {
            console.log('error submit!!');
            return false;
          }
        });

但是如果需要同时验证多个表单，我们并不能这样做来直接检测。

this.$refs[formName,formName1,formName2].validate((valid)=>{
    ……
})

那首先，布置4个表单。

      
        
          表单1
          
            
          
        
      
      
        
          表单2
          
            
          
        
      
      
        
          表单3
          
            
          
        
      
      
        
          表单4
          
            
          
        
      
    

4个表单给予必要的样式，能更清晰的体现。然后赋予各自的绑定数据，检验规则。

然后放置按钮，写检验所有表单事件。

检验表单

附上data结构。

formData: {
        input1: ""
      },
      formData2: {
        input2: ""
      },
      formData3: {
        input3: ""
      },
      formData4: {
        input4: ""
      },
      rules: {
        input1: [
          { required: true, message: "请随意输入内容，长度大于0", trigger: "blur" }
        ],
        input2: [
          { required: true, message: "请随意输入内容，长度大于1", trigger: "blur" }
        ],
        input3: [
          { required: true, message: "请随意输入内容，长度大于2", trigger: "blur" }
        ],
        input4: [{ required: true, message: "请随意输入内容，长度大于3", trigger: "blur" }]
      }

使用Promise.all查看检验结果。

submitForm() {
      let list = [];
      list.push(
        this.checkForm("formData"),
        this.checkForm("formData2"),
        this.checkForm("formData3"),
        this.checkForm("formData4")
      );
      Promise.all(list)
        .then(() => {
          console.log("通过检测");
        })
        .catch(() => {
          console.log("未通过");
        });
    },
    checkForm(formName) {
      return new Promise((resolve, reject) => {
        this.$refs[formName].validate(valid => {
          if (valid) {
            resolve();
          } else reject();
        });
      });
    }