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

最新推荐文章于 2026-03-01 00:02:00 发布

原创最新推荐文章于 2026-03-01 00:02:00 发布 · 7.7k 阅读

30 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#vue.js #elementui #正则表达式

本文介绍如何在前端表单中实现最大值与最小值的输入校验，包括1-100整数限制，最小值不超过最大值，以及当最小值错误时动态更新最大值以消除报错。使用Vue.js的el-input和自定义验证规则实现。

如下图，

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事件，然后如果符合最大值大于最小值，那么之前最小值的报错校验再次校验，为符合条件，即报红提示消失