复杂类型 el-form 表单的校验

背景描述

• 表单结构

• form 表单结构
  • 活动名称 - 必填，prop=“name”
  • 活动类型 - 必填，prop=“actType”
  • 活动人数 - 必填，prop=“actUserAccount”
  • 签到记录 - 必填，prop=“actList”

• 对表单做必填校验

rulesOld: {
  name: [{ required: true, message: "请填写名称", trigger: "blur" }], // 简单类型的校验
  actType: [
    {
      required: true,
      validator: (rule, value, callback) => {
        if (value) {
          if (value == 1 && !this.form.actType1_input) {
            callback(new Error("请填写活动地点"));
          } else if (value == 2 && !this.form.actType2_input) {
            callback(new Error("请填写备注"));
          } else {
            callback();
          }
        } else {
          callback(new Error("请选择活动类型"));
        }
      },
      trigger: "change",
    },
  ],
  actAccount: [
    {
      required: true,
      validator: (rule, value, callback) => {
        if (this.form.actAccount_1 && this.form.actAccount_2) {
          callback();
        } else if (this.form.actAccount_1) {
          callback(new Error("请填写当天签到人数"));
        } else if (this.form.actAccount_2) {
          callback(new Error("请填写当天应到人数"));
        } else {
          callback(new Error("请填写活动人数"));
        }
      },
      trigger: "blur",
    },
  ],
  actList: [
    {
      required: true,
      validator: (rule, value, callback) => {
        if (value && value.length) {
          let trueArr = value.filter((item) => {
            return item.name && item.id;
          });
          if (
            trueArr &&
            trueArr.length &&
            trueArr.length == value.length
          ) {
            callback();
          } else {
            callback(new Error("请将活动列表填写完整"));
          }
        } else {
          callback(new Error("请添加活动列表"));
        }
      },
      trigger: "change",
    },
  ],
},

• 执行以上校验方法后，页面展示如下

• 实际不应该被标红的输入框
  • 其他，备注
  • 签到人数
  • 参与者姓名

优化表单的校验

• 对比效果
  

• 活动类型，form-iem 内部嵌套 form-item，用新的 prop 属性去校验

• 活动人数，同上

• 签到记录，form-item 内部是遍历的数组，数组内部嵌套 form-item，prop 属性动态绑定到遍历数组的每一项 item

完整的对比代码

<div class="validateForm">
  <!-- 旧的form表单 -->
  <el-form ref="formOld" :model="form" label-width="120px" :rules="rulesOld">
    <el-form-item label="活动名称：" prop="name">
      <el-input v-model="form.name"></el-input>
    </el-form-item>
    <el-form-item label="活动类型：" prop="actType" class="actType">
      <el-radio-group v-model="form.actType">
        <el-radio :label="1">
          户外活动/室内活动，活动地点：
          <el-input v-model="form.actType1_input"></el-input>
        </el-radio>
        <el-radio :label="2">
          其他，备注：
          <el-input v-model="form.actType2_input"></el-input>
        </el-radio>
      </el-radio-group>
    </el-form-item>
    <el-form-item label="活动人数：" prop="actAccount" class="actAccount">
      当天应到
      <el-input v-model="form.actAccount_1"></el-input>
      人，签到
      <el-input v-model="form.actAccount_2" @input="getFormList"></el-input>
      人
    </el-form-item>
    <el-form-item label="签到记录：" prop="actList" class="actList">
      <div class="listBox" v-if="form.actList.length">
        <div
          class="sinList"
          v-for="(item, index) in form.actList"
          :key="index"
        >
          参加者姓名：
          <el-input v-model="item.name"></el-input>
          参加者ID：
          <el-input v-model="item.id"></el-input>
        </div>
      </div>
    </el-form-item>
  </el-form>
  <div class="grayLine"></div>
  <!-- 新的form表单 -->
  <el-form ref="formNew" :model="form" label-width="120px" :rules="rulesNew">
    <el-form-item label="活动名称：" prop="name">
      <el-input v-model="form.name"></el-input>
    </el-form-item>
    <el-form-item label="活动类型：" prop="actType" class="actType">
      <el-radio-group v-model="form.actType">
        <el-radio :label="1">
          户外活动/室内活动，活动地点：
          <el-form-item prop="actType1_input" class="inLineFOrm">
            <el-input v-model="form.actType1_input"></el-input>
          </el-form-item>
        </el-radio>
        <el-radio :label="2">
          其他，备注：
          <el-form-item prop="actType2_input" class="inLineFOrm">
            <el-input v-model="form.actType2_input"></el-input>
          </el-form-item>
        </el-radio>
      </el-radio-group>
    </el-form-item>
    <el-form-item label="活动人数：" prop="actAccount" class="actAccount">
      当天应到
      <el-form-item prop="actAccount_1" class="inLineFOrm">
        <el-input v-model="form.actAccount_1"></el-input>
      </el-form-item>
      人，签到
      <el-form-item prop="actAccount_2" class="inLineFOrm">
        <el-input v-model="form.actAccount_2" @input="getFormList"></el-input>
      </el-form-item>
      人
    </el-form-item>
    <el-form-item label="签到记录：" prop="actList" class="actList">
      <div class="listBox" v-if="form.actList.length">
        <div
          class="sinList"
          v-for="(item, index) in form.actList"
          :key="index"
        >
          参加者姓名：
          <el-form-item
            :prop="`actList[${index}]`"
            :rules="rulesList.name"
            class="inLineFOrm"
          >
            <el-input v-model="item.name"></el-input>
          </el-form-item>
          参加者ID：
          <el-form-item
            :prop="`actList[${index}]`"
            :rules="rulesList.id"
            class="inLineFOrm"
          >
            <el-input v-model="item.id"></el-input>
          </el-form-item>
        </div>
      </div>
    </el-form-item>
  </el-form>
  <el-button type="primary" @click="onSubmit">校验</el-button>
</div>

form: {
  name: "", // 活动名称
  actAccount_1: "", // 应到人数
  actAccount_2: "", // 签到人数
  actType: null, // 活动类型
  actType1_input: "", // 活动地点
  actType2_input: "", // 备注
  actList: [], // 签到列表记录
},
// 旧的校验方法
rulesOld: {
  name: [{ required: true, message: "请填写名称", trigger: "blur" }], // 简单类型的校验
  actType: [
    {
      required: true,
      validator: (rule, value, callback) => {
        if (value) {
          if (value == 1 && !this.form.actType1_input) {
            callback(new Error("请填写活动地点"));
          } else if (value == 2 && !this.form.actType2_input) {
            callback(new Error("请填写备注"));
          } else {
            callback();
          }
        } else {
          callback(new Error("请选择活动类型"));
        }
      },
      trigger: "change",
    },
  ],
  actAccount: [
    {
      required: true,
      validator: (rule, value, callback) => {
        if (this.form.actAccount_1 && this.form.actAccount_2) {
          callback();
        } else if (this.form.actAccount_1) {
          callback(new Error("请填写当天签到人数"));
        } else if (this.form.actAccount_2) {
          callback(new Error("请填写当天应到人数"));
        } else {
          callback(new Error("请填写活动人数"));
        }
      },
      trigger: "blur",
    },
  ],
  actList: [
    {
      required: true,
      validator: (rule, value, callback) => {
        if (value && value.length) {
          let trueArr = value.filter((item) => {
            return item.name && item.id;
          });
          if (
            trueArr &&
            trueArr.length &&
            trueArr.length == value.length
          ) {
            callback();
          } else {
            callback(new Error("请将活动列表填写完整"));
          }
        } else {
          callback(new Error("请添加活动列表"));
        }
      },
      trigger: "change",
    },
  ],
},
// 新的校验方法
rulesNew: {
  name: [{ required: true, message: "请填写名称", trigger: "blur" }], // 简单类型的校验
  actType: [
    {
      required: true,
      validator: (rule, value, callback) => {
        if (value) {
          callback();
        } else {
          callback(new Error("请选择活动类型"));
        }
      },
      trigger: "change",
    },
  ],
  actType1_input: [
    {
      required: true,
      validator: (rule, value, callback) => {
        if (this.form.actType == 1) {
          if (value) {
            callback();
          } else {
            callback(new Error("请填写活动地点"));
          }
        } else {
          // 类型选择的是，其他，直接通过校验
          callback();
        }
      },
      trigger: "change",
    },
  ],
  actType2_input: [
    {
      required: true,
      validator: (rule, value, callback) => {
        if (this.form.actType == 2) {
          if (value) {
            callback();
          } else {
            callback(new Error("请填写备注"));
          }
        } else {
          // 类型选择的是，户外活动/室内活动，直接通过校验
          callback();
        }
      },
      trigger: "change",
    },
  ],
  actAccount: [
    {
      required: true,
      validator: (rule, value, callback) => {
        // 不做校验，直接通过
        callback();
      },
      trigger: "blur",
    },
  ],
  actAccount_1: [
    {
      required: true,
      validator: (rule, value, callback) => {
        if (value) {
          callback();
        } else {
          callback(new Error("请填写当天应到人数"));
        }
      },
      trigger: "blur",
    },
  ],
  actAccount_2: [
    {
      required: true,
      validator: (rule, value, callback) => {
        if (value) {
          callback();
        } else {
          callback(new Error("请填写当天签到人数"));
        }
      },
      trigger: "blur",
    },
  ],
  actList: [
    {
      required: true,
      validator: (rule, value, callback) => {
        if (value && value.length) {
          callback();
        } else {
          callback(new Error("请添加活动列表"));
        }
      },
      trigger: "change",
    },
  ],
},
rulesList: {
  name: [
    {
      required: true,
      validator: (rule, item, callback) => {
        if (item.name) {
          callback();
        } else {
          callback(new Error("请填写参加者姓名"));
        }
      },
      trigger: "blur",
    },
  ],
  id: [
    {
      required: true,
      validator: (rule, item, callback) => {
        if (item.id) {
          callback();
        } else {
          callback(new Error("请填写参加者ID"));
        }
      },
      trigger: "blur",
    },
  ],
},

onSubmit() {
  this.$refs.formOld.validate((valid) => {
    if (valid) {
      console.log("通过校验了");
    } else {
      console.log("没有通过校验");
      return false;
    }
  });
  this.$refs.formNew.validate((valid) => {
    if (valid) {
      console.log("通过校验了");
    } else {
      console.log("没有通过校验");
      return false;
    }
  });
},
getFormList() {
  if (this.form.actAccount_2) {
    this.form.actList = [];
    for (var i = 0; i < this.form.actAccount_2; i++) {
      this.form.actList.push({
        name: "",
        id: "",
      });
    }
  }
},