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个表单。

<el-row :gutter="40">
      <el-col :span="12">
        <el-form :model="formData" :rules="rules" ref="formData" class="sp-form">
          <span>表单1</span>
          <el-form-item label="测试输入框1" prop="input1">
            <el-input v-model="formData.input1"></el-input>
          </el-form-item>
        </el-form>
      </el-col>
      <el-col :span="12">
        <el-form :model="formData2" :rules="rules" ref="formData2" class="sp-form">
          <span>表单2</span>
          <el-form-item label="测试输入框2" prop="input2">
            <el-input v-model="formData2.input2"></el-input>
          </el-form-item>
        </el-form>
      </el-col>
      <el-col :span="12">
        <el-form :model="formData3" :rules="rules" ref="formData3" class="sp-form">
          <span>表单3</span>
          <el-form-item label="测试输入框3" prop="input3">
            <el-input v-model="formData3.input3"></el-input>
          </el-form-item>
        </el-form>
      </el-col>
      <el-col :span="12">
        <el-form :model="formData4" :rules="rules" ref="formData4" class="sp-form">
          <span>表单4</span>
          <el-form-item label="测试输入框4" prop="input4">
            <el-input v-model="formData4.input4"></el-input>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>

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

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

<el-button type="primary" @click="submitForm()">检验表单</el-button>

附上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();
        });
      });
    }