Vue学习笔记之ElementUI的区间设置 |
您所在的位置：网站首页 › vuejs版本命名 › Vue学习笔记之ElementUI的区间设置 |
|
~
重置
export default {
name: "Index",
data() {
return {
// 表单
form: {
min: "",
max: "",
},
// 校验规则
rules: {
min: [
{ required: true, message: "必填项，请维护", trigger: "blur" },
{ validator: this.validateCom, trigger: "blur" },
{ validator: this.validateMin, trigger: "blur" },
],
max: [
{ required: true, message: "必填项，请维护", trigger: "blur" },
{ validator: this.validateCom, trigger: "blur" },
{ validator: this.validateMax, trigger: "blur" },
],
},
minNum: 0, //最小值
maxNum: 100, //最大值
};
},
methods: {
// 提交时校验
getFormData() {
const ret = {};
this.$refs.form.validate((valid) => {
ret.valid = valid;
ret.form = this.form;
});
return ret;
},
// 重置表单
resetForm() {
this.$refs.form.resetFields();
},
// 基础判断：1、输入值符合 0 min) {
return callback();
}
return callback(new Error("输入值不得小于最小值"));
},
},
};
根据上面的写法，组件的基本功能实现了，但是有一个坑！如下： 很显然，左侧值是小于右侧值的，但是校验提示仍然报错。究其原因，还是关联校验的问题。既然是关联交验，改变其中一个时应该会重新校验两个。 很简单，在input改变时，重新校验表单不就OK了吗。 handleChange() { this.$refs.form.validate(); }真实表现正如我们所料，但是当我们打开console的时候，会看到Uncaught (in promise) false，这又是什么鬼，身为优秀的前端工程师，你定不会允许自己的代码里报错，即使不影响正常流程。 经查证：Promise报错，Uncaught的意思是代表有reject状态没有被catch。究其原因，改变一个值时，校验整个表单时，改变的那个input会执行两次校验，导致异常。 最后做如下修改： handleMinChange() { this.$refs.form.validateField('max'); }, handleMaxChange() { this.$refs.form.validateField('min'); }, // 并对外暴露操作方法 getFormData() { const ret = {}; this.$refs.form.validate((valid) => { ret.valid = valid; ret.form = this.form; }); return ret; }, resetForm() { this.$refs.form.resetFields(); },总结： 1. input表单输出值为String类型，即使设置了type=number 2. 关联交验时需要验证其关联项，且不能重复校验 |
今日新闻 |
推荐新闻 |
| CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |