vue两个输入框联动校验(最大值-最小值)
vue
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
项目地址:https://gitcode.com/gh_mirrors/vu/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事件,然后如果符合最大值大于最小值,那么之前最小值的报错校验再次校验,为符合条件,即报红提示消失
GitHub 加速计划 / vu / vue
83
16
下载
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
最近提交(Master分支:4 个月前 )
9e887079
[skip ci] 3 个月前
73486cb5
* chore: fix link broken
Signed-off-by: snoppy <michaleli@foxmail.com>
* Update packages/template-compiler/README.md [skip ci]
---------
Signed-off-by: snoppy <michaleli@foxmail.com>
Co-authored-by: Eduardo San Martin Morote <posva@users.noreply.github.com> 6 个月前
更多推荐
已为社区贡献2条内容
所有评论(0)