526互联

vue 表单校验el-form-item加上v-if不触发校验

发布时间 2023-04-29 11:58:22作者: chccee

1 问题：在使用element是使用自定义表单校验，当表单校验el-form-item加上v-if不触发校验的问题

 

下图是自定义的表单校验

 当切换为v-if为true的条件时，表单校验无法触发

 解决方法：在el-form-item的v-if上加一个key值，令key=prop的值就解决了

 

 

自定义校验代码：

 var validateDiscount = (rule, value, callback) => {
      if (!value) {
        return callback(new Error('请输入优惠金额'));
      }
      setTimeout(() => {
        if (value && !(/^\d+(.\d{1,2})?$/.test(value))) {
          callback(new Error('最多保留两位小数'));
          } else {
            if (Number(value) > Number(this.calculateData.total_amount)) {
              callback(new Error('优惠大于总金额'));
            }
            else if (Number(this.rulesDataDetails.max_amount) ? Number(value) > Number(this.rulesDataDetails.max_amount) : false) {
              callback(new Error('优惠超出限制范围'));
            }
            else {
              callback();
            }
        }
      }, 300);