vue两个输入框联动校验(最大值-最小值)
如下图,1.满足最大值和最小值的输入要求【1-100的整数】2.满足最小值不能大于等于最大值3.当最小值有报红校验,改正最大值使得最大值大于最小值,最小值的报红校验消失html代码最大值:<el-input v-model="restoreForm.maxrate" placeholder="请输入" style="margin-left:5px;width:140px" @blur="ch
·
如下图,
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事件,然后如果符合最大值大于最小值,那么之前最小值的报错校验再次校验,为符合条件,即报红提示消失
更多推荐
已为社区贡献5条内容
所有评论(0)