elementUI 两个输入框联动校验 第一个输入框值不能大于第二个输入框值 第二个输入框值不能小于第一个输入框值

elementUI 两个输入框联动校验
第一个输入框值不能大于第二个输入框值
第二个输入框值不能小于第一个输入框值
<el-form-item prop="start" label-width="70px">
    <el-input
      clearable
      type="text"
      v-model="thisForm.start"
      @clear="$refs.thisForm.validateField('start')"
      @input="changeValue('start')"
      placeholder="请输入"/>
 </el-form-item>
<el-form-item prop="end" label-width="0px">
   <el-input
      clearable
      type="text"
      v-model="thisForm.end"
      @clear="$refs.thisForm.validateField('end')"
      @input="changeValue('end')"
      placeholder="请输入"/>
 </el-form-item>
  rules: {
    start: [{ required: true, validator: this.validateRange('start', 'end', true), trigger: 'blur' }],
    end: [{ required: true, validator: this.validateRange('end', 'start', false), trigger: 'blur' }]
  },
 validateRange(params, compare, flag) {
      const lowLimit = '下限值'
      const upLimit = '上限值'
      return (rule, value, callback) => {
        if (!value || value === '0') {
          return callback(new Error(`请输入大于的0小数`))
        } else if (value) {
          const paramsValue = +this.thisForm[params]
          const compareValue = +this.thisForm[compare]
          if (flag) {
            if (paramsValue > compareValue) {
              this.$refs.thisForm.clearValidate(compare)
              return callback(new Error(`${lowLimit}不能大于${upLimit}`))
            } else {
              this.$refs.thisForm.clearValidate(compare)
              if (!Number(this.thisForm[compare])) this.$refs.thisForm.validateField(compare)
            }
            callback()
          } else {
            if (paramsValue < compareValue) {
              return callback(new Error(`${upLimit}不能小于${lowLimit}`))
            } else {
              this.$refs.thisForm.clearValidate(compare)
              if (!Number(this.thisForm[compare])) this.$refs.thisForm.validateField(compare)
            }
            callback()
          }
          callback()
        } else {
          callback()
        }
      }
    },
  • 5
    点赞
  • 21
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值