vue表单动态校验表单和同时验证多个表单

封装表单验证函数

validateForm(formName){
      return new Promise((resolve,reject)=>{
        this.$refs[formName].validate(valid=>{
          if(valid){
            resolve()
          }else{
            reject(new Error('错误！'))
          }
        })
      })
 }

同时验证多个表单

/** 提交按钮 */
    submitForm() {
      Promise.all([this.validateForm['form1'],this.validateForm['form2']]).then(()=>{
        //验证成功
      }).catch(()=>{
        //验证失败
      })
    }

完整代码

<template>
  <div>
    <el-form
      :model="dynamicValidateForm"
      ref="dynamicValidateForm"
      label-width="100px"
      class="demo-dynamic"
    >
      <el-form-item
        prop="email"
        label="邮箱"
        :rules="[
          { required: true, message: '请输入邮箱地址', trigger: 'blur' },
          {
            type: 'email',
            message: '请输入正确的邮箱地址',
            trigger: ['blur', 'change'],
          },
        ]"
      >
        <el-input v-model="dynamicValidateForm.email"></el-input>
      </el-form-item>
      <el-form-item
        v-for="(domain, index) in dynamicValidateForm.domains"
        :label="'域名' + index"
        :key="domain.key"
        :prop="'domains.' + index + '.value'"
        :rules="{
          required: true,
          message: '域名不能为空',
          trigger: 'blur',
        }"
      >
        <el-input v-model="domain.value"></el-input
        ><el-button @click.prevent="removeDomain(domain)">删除</el-button>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm('dynamicValidateForm')"
          >提交</el-button
        >
        <el-button @click="addDomain">新增域名</el-button>
        <el-button @click="resetForm('dynamicValidateForm')">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
  <script>
export default {
  data() {
    return {
      dynamicValidateForm: {
        domains: [
          {
            value: "",
          },
        ],
        email: "",
      },
    };
  },
  methods: {
    submitForm(formName) {
        Promise.all([this.validateForm[formName],this.validateForm['form2']]).then(()=>{
        //验证成功
        alert("submit!");
      }).catch(()=>{
        //验证失败
        console.log("error submit!!");
          return false;
      })
    },
    //封装表单验证函数
    validateForm(formName){
      return new Promise((resolve,reject)=>{
        this.$refs[formName].validate(valid=>{
          if(valid){
            resolve()
          }else{
            reject(new Error('错误！'))
          }
        })
      })
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    removeDomain(item) {
      var index = this.dynamicValidateForm.domains.indexOf(item);
      if (index !== -1) {
        this.dynamicValidateForm.domains.splice(index, 1);
      }
    },
    addDomain() {
      this.dynamicValidateForm.domains.push({
        value: "",
        key: Date.now(),
      });
    },
  },
};
</script>