el-radio-button切换引起的校验问题

1.问题:切换按钮时,两个校验都需要进行
此时用到了对象添加属性https://cn.vuejs.org/v2/api/#vm-set里面的

Vue.set( target, propertyName/index, value )
Vue.delete( target, propertyName/index, value )

2.参数

{Object | Array} target
{string | number} propertyName/index
{any} value

返回值:设置的值。
3.用法
向响应式对象中添加一个属性,并确保这个新属性同样是响应式的,且触发视图更新。它必须用于向响应式对象上添加新属性,因为 Vue 无法探测普通的新增属性 (比如 this.myObject.newProperty = ‘hi’)
注意对象不能是 Vue 实例,或者 Vue 实例的根数据对象。
4.解读
由于 vue 无法对对象下的属性深度监听,并触发视图的变化。会导致对象已改变,但是视图界面上并没有更新的情况。
vue 在vm实例上提供了 $set方法,用于监听属性变化并更新视图。
5.使用

vm.$set(目标对象, 属性名/索引, 新值)
或this.$set(目标对象, 属性名/索引, 新值)
vm为vue实例,this指向vm

6.示例
有时候使用this.$set也不起作用,是因为target目标不正确。
比如:

let dataList = [{
	isShow:false,
	subList:[{
		id: 1
	}]
}];
this.$set(this.dataList, index, this.dataList[index]);

项目原型

 data() {
    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);
    };
  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"
          }
        ]
      }
      }

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>
 agreeChange() {
        this.$refs["form"].clearValidate();
        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 == "单阈值统计") {
            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.$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" }
            ]);

      }
    },

参考1
参考2

修改未点击直接校验

   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" }
            // ]);

      }
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
对于 el-radio 组件的校验,你可以使用以下方法之一: 1. 使用表单校验:你可以将 el-radio 组件放在一个表单中,然后使用表单校验工具来验证用户选择的值。你可以通过给 el-radio-group 设置 rules 属性来定义校验规则,然后在提交表单时调用表单的 validate 方法来触发校验。 ``` <template> <el-form ref="form" :model="formData" :rules="formRules"> <el-form-item prop="radioValue" label="Radio"> <el-radio-group v-model="formData.radioValue"> <el-radio label="option1">Option 1</el-radio> <el-radio label="option2">Option 2</el-radio> </el-radio-group> </el-form-item> <el-button type="primary" @click="submitForm">Submit</el-button> </el-form> </template> <script> export default { data() { return { formData: { radioValue: '' }, formRules: { radioValue: [ { required: true, message: 'Please select an option', trigger: 'change' } ] } }; }, methods: { submitForm() { this.$refs.form.validate((valid) => { if (valid) { // 校验通过,执行提交操作 } else { // 校验不通过,给出错误提示 } }); } } }; </script> ``` 2. 使用自定义校验方法:如果你需要更复杂的校验逻辑,你可以使用自定义的校验方法来验证 el-radio 的选择。在自定义校验方法中,你可以根据需要判断 el-radio-group 的值是否满足校验条件,并返回相应的校验结果。 ``` <template> <el-radio-group v-model="radioValue" @change="validateRadio"> <el-radio label="option1">Option 1</el-radio> <el-radio label="option2">Option 2</el-radio> </el-radio-group> </template> <script> export default { data() { return { radioValue: '' }; }, methods: { validateRadio() { // 自定义校验方法 if (this.radioValue === '') { // 校验不通过,给出错误提示 } else { // 校验通过 } } } }; </script> ``` 以上是两种常见的 el-radio 校验方法,你可以根据实际需求选择适合你的方式。希望能帮到你!如果还有其他问题,请继续提问。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值