promise.all 进行多个表单同时校验

106 阅读1分钟
<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>
<el-button type="primary" @click="submitForm()">检验表单</el-button>
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" }]
      }
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();
        });
      });
    }