多个输入框联动校验:最大值和最小值同时trigger的问题

今天产品提了一个问题,在后台设置薪资范围时,最大值和最小值是分开校验的,中间并没有联系,这就导致了一个很不人性化的体验:

假如用户输入完最大值导致报错转头去修改最小值使其符合要求时,因为最大值未改变所以无法触发其校验导致明明输入符合要求报错信息缺始终存在,只有再次点击最大值输入框使其聚焦触发校验才能正常,体验很差.
为了使两个输入框能够相互触发校验,对代码作出以下调整:
首先在html部分添加绑定input事件触发checkNumber函数并传递参数

<div class="dib vm addjob-num__input">
                          <FormItem prop="min_salary" class="dib vm">
                            <Input style="width:140px;" class="ivu-salary salary-input"  v-model="form.min_salary" @input="checkNumber('min')">
                              <span slot="prepend">最低</span>
                              <span slot="append">K</span>
                            </Input>
                          </FormItem>
                        </div>
                        <span class="vm mlr10 ">至</span>
                        <div class="dib vm addjob-num__input">
                          <FormItem prop="max_salary" class="dib vm">
                            <Input style="width:140px;" class="ivu-salary salary-input" v-model="form.max_salary" @input="checkNumber('max')">
                              <span slot="prepend">最高</span>
                              <span slot="append">K</span>
                            </Input>
<!--                            <span v-if="isSalaryError" class="red" style="position: absolute;">不得低于最低薪资</span>-->
                          </FormItem>
                        </div>

data部分的验证规则保持不变:

       const validateMinSalary = (rule, value, callback) => {
            value = parseInt(value)
            if(value != 0 && !vm.globalVariable.reg.isNum.test(value)){
                this.isSalaryError = false;
                callback(new Error('请输入数字'));
            }else if (value != 0 && value > 1000) {
                this.isSalaryError = false;
                callback(new Error('月薪范围不能大于1000'));
			}else if (value != 0 && value > parseInt(this.form.max_salary) ) {
                // this.isSalaryError = true;
				        callback(new Error('不得高于最高薪资'));
			}  else {
                this.isSalaryError = false;
				callback();
			}
        }
        const validateMaxSalary = (rule, value, callback) => {
            value = parseInt(value)
			if(value != 0 && !vm.globalVariable.reg.isNum.test(value)){
                this.isSalaryError = false;
                callback(new Error('请输入数字'));
            }else if (value != 0 && value > 1000) {
                this.isSalaryError = false;
				callback(new Error('月薪范围不能大于1000'));
			}else if(value != 0 && value < parseInt(this.form.min_salary)){
				callback(new Error('不得低于最低薪资'));
                this.isSalaryError = false;
            } else {
                this.isSalaryError = false;
				callback();
			}
        }

rules部分也不需要改动:

rules: {
                min_salary :[{ required: true, validator: validateMinSalary, trigger: 'blur'}] ,
                max_salary:[{ required: true, validator: validateMaxSalary, trigger: 'blur'}]
            },

在methods部分添加input绑定的方法:

checkNumber (type){
        if (type === 'min') {
          this.$refs.formInline.validateField('max_salary');
        } else {
          this.$refs.formInline.validateField('min_salary');
        }
      }

formInline为表单绑定的ref

<Form ref="formInline" :model="form" :rules="rules">

如此就完成了双向绑定的校验,效果如下: