vue两个输入框联动校验（最大值-最小值）

如下图，

 1.满足最大值和最小值的输入要求【1-100的整数】

2.满足最小值不能大于等于最大值

3.当最小值有报红校验，改正最大值使得最大值大于最小值，最小值的报红校验消失

html代码

 
最大值：<el-input v-model="restoreForm.maxrate" placeholder="请输入" style="margin-left:5px;width:140px" @blur="checknum('max')"></el-input>
                
最小值：<el-input v-model="restoreForm.restorerate" placeholder="请输入" style="margin-left:5px;width:140px" @blur="checknum('min')"></el-input>

代码不全，仅作参考

data中的validate校验

//最小值
    const checkrestorerate = (rule, value, callback) => {
      const { maxrate, restorerate } = this.restoreForm;

      // let reg = /^([1-9]|[1-9]\d|1\d{2}|100)$/;
      let reg = /^([1-9][0-9]{0,1}|100)$/;
      if (!reg.test(restorerate)) {
        return callback(new Error("请输入1-100内整数"));
      } else {
        if (
          Number(maxrate) &&
          Number(restorerate) &&
          Number(restorerate) >= Number(maxrate)
        ) {
          return callback(new Error("最小值需小于最大值"));
        } else {
          return callback();
        }
      }
    };
    //最大值
    const checkmaxrate = (rule, value, callback) => {
      const { maxrate, restorerate } = this.restoreForm;
      let reg = /^([1-9][0-9]{0,1}|100)$/;
      if (!reg.test(maxrate)) {
        return callback(new Error("请输入1-100内整数"));
      } else {
        if (
          Number(maxrate) &&
          Number(restorerate) &&
          Number(restorerate) >= Number(maxrate)
        ) {
          return callback(new Error("最小值需小于最大值"));
        } else {
          return callback();
        }
      }
    };

 checknum(type) {
      if (type === "max") {
        if (this.restoreForm.maxrate > this.restoreForm.restorerate) {
          this.$refs.restoreForm.validateField("restorerate");
        }
      } else {
        if (this.restoreForm.maxrate > this.restoreForm.restorerate) {
          this.$refs.restoreForm.validateField("maxrate");
        }
       
      }
    },

这个方法首先判断是哪个输入框的blur事件，然后如果符合最大值大于最小值，那么之前最小值的报错校验再次校验，为符合条件，即报红提示消失