您现在的位置是：网站首页> 编程资料编程资料

vue两个输入框联动校验方式(最大值-最小值)_vue.js_

2023-05-24 330人已围观

简介 vue两个输入框联动校验方式(最大值-最小值)_vue.js_

vue两个输入框联动校验

如下图，

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

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

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

html代码

最大值：

最小值：

代码不全，仅作参考

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