Element UI—form表单，动态添加校验

项目业务场景要求：如果活动区域是空的，活动名称是非必填；如果活动区域是有值的，活动名称则是必填的。

---

html部分

<el-form
  :model="ruleForm"
  :rules="rules"
  ref="refForm"
  label-width="100px"
  class="demo-ruleForm"
>
  <el-form-item label="活动区域" prop="region">
     <el-select
        v-model="ruleForm.region"
        placeholder="请选择活动区域"
        @change="handleRegionChange"
      >
        <el-option label="北京" value="beijing">el-option>
        <el-option label="上海" value="shanghai">el-option>
      el-select>
  el-form-item>
  <el-form-item label="活动名称" prop="activityName">
     <el-input v-model="ruleForm.activityName">el-input>
  el-form-item>
  <el-form-item>
     <el-button type="primary" @click="submitForm('refForm')">保存el-button>
     <el-button @click="resetForm('refForm')">重置校验el-button>
  el-form-item>
el-form>

js部分

	data: function () {
        return {
            ruleForm: {
                region: "",
                activityName: "",
            },
            rules: {},
        };
    },
    methods: {
        submitForm(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    this.$message({
                        message: "提交成功",
                        type: "success",
                    });
                } else {
                    console.log("error submit!!");
                    return false;
                }
            });
        },
        resetForm(formName) {
            this.removeRules();
            this.$refs[formName].resetFields();
        },

        addRules() {
            // 定义规则
            const newRules = [
                { required: true, trigger: "change", message: "活动名称必填" },
            ];
            // 给rules对象添加规则
            this.rules = { ...this.rules, activityName: newRules };
        },
        removeRules() {
            // 清除指定校验规则
            this.$refs.refForm.clearValidate(["activityName"]);
            // 必须有这行
            this.rules = { ...this.rules, activityName: [] };
        },

        handleRegionChange(value) {
            //console.log(value);
            if (this.ruleForm.region) {
                this.addRules();
            } else {
                this.removeRules();
            }
        },
    },

效果1

活动区域是空，没有校验活动名字。

效果2

活动区域有值，校验活动名字。