表单校验之根据不同的选项校验不同的表单项

方法1：参考
方法2：当点击切换按钮时引发一个change事件

<el-form-item label="阈值分类" prop="kind">
          <el-radio-group v-model="form.kind" @change="agreeChange">
            <el-radio label="单阈值统计"></el-radio>
            <el-radio label="多阈值统计"></el-radio>
          </el-radio-group>
</el-form-item>

接下来当切换按钮的时候采用动态给校验对象添加属性，此时不同的el-button即校验不同的rules

   if (this.form.kind == "单阈值统计") {
          delete this.rules.limit;
          delete this.rules.limits;
          delete this.rules.step;  
      } else {
           this.rules.limit={ validator: checkLimit, trigger: "blur" }
          this.rules.limits={ validator: checkLimits, trigger: "blur" }
          this.rules.step={ validator: checkStep, trigger: "blur" }
      }

完整代码

rules: {
        region: [{ required: true, message: "请选择项目", trigger: "change" }],
        type: [
          {
            type: "array",
            required: true,
            message: "请选择版本号",
            trigger: "change"
          }
        ],
        name: [{ required: true, validator: checkName, trigger: "blur" }],
        singgle: [
          {
            type: "array",
            required: true,
            message: "请选择至少一个属性",
            trigger: "change"
          }
        ]
      }
    };
  },
 var checkName = (rule, value, callback) => {
      if (!value) {
        return callback(new Error("阈值不能为空"));
      }
      setTimeout(() => {
        if (!value.match(/^[0-9]+([.]{1}[0-9]+){0,1}$/)) {
          callback(new Error("请输入数字值"));
        } else {
          callback();
        }
      }, 1000);
    };
  agreeChange() {
        this.$refs["form"].clearValidate();
       // this.$refs["form"].resetFields();
        var checkLimit = (rule, value, callback) => {
            if (!value) {
                return callback(new Error("阈值区间不能为空"));
            }
            setTimeout(() => {
                if (!value.match(/^[0-9]+([.]{1}[0-9]+){0,1}$/)) {
                callback(new Error("请输入数字值"));
                } else {
                callback();
                }
            }, 1000);
            };
        var checkLimits = (rule, value, callback) => {
            if (!value) {
                return callback(new Error("阈值区间不能为空"));
            }
            setTimeout(() => {
                if (!value.match(/^[0-9]+([.]{1}[0-9]+){0,1}$/)) {
                    callback(new Error("请输入数字值"));
                } else if(value<=this.form.limit){
                    callback(new Error("请输入有效值"));
                } else{
                  callback();
                }
            }, 1000);
        };
        var checkStep = (rule, value, callback) => {
            if (!value) {
                return callback(new Error("步长不能为空"));
            }
            setTimeout(() => {
                if (!value.match(/^[0-9]+([.]{1}[0-9]+){0,1}$/)) {
                callback(new Error("请输入数字值"));
                } else if(value>this.form.limits-this.form.limit){
                    callback(new Error("请输入有效值"));
                } else {
                callback();
                }
            }, 1000);
        };

      
      if (this.form.kind == "单阈值统计") {
          delete this.rules.limit;
          delete this.rules.limits;
          delete this.rules.step;
            // this.$delete(this.rules, "limit", [
            // { validator: checkLimit, trigger: "blur" }
            // ]);
            // this.$delete(this.rules, "limits", [
            // { validator: checkLimits, trigger: "blur" }
            // ]);
            // this.$delete(this.rules, "step", [
            // { validator: checkStep, trigger: "blur" }
            // ]);
         
      } else {
           this.rules.limit={ validator: checkLimit, trigger: "blur" }
          this.rules.limits={ validator: checkLimits, trigger: "blur" }
          this.rules.step={ validator: checkStep, trigger: "blur" }

          //未点击就出来校验
            // this.$set(this.rules, "limit", [
            // { validator: checkLimit, trigger: "blur" }
            // ]);
            // this.$set(this.rules, "limits", [
            // { validator: checkLimits, trigger: "blur" }
            // ]);
            // this.$set(this.rules, "step", [
            // { validator: checkStep, trigger: "blur" }
            // ]);

      }
    },