vue中如何利用element实现一个区间选择组件
今天小编给大家分享一下vue中如何利用element实现一个区间选择组件的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下吧。
专业成都网站建设公司,做排名好的好网站,排在同行前面,为您带来客户和效益!创新互联为您提供成都网站建设,五站合一网站设计制作,服务好的网站设计公司,成都网站制作、网站建设、外贸网站建设负责任的成都网站制作公司!
主要思路
单个表单校验:必填项校验、正整数校验、区间校验
关联校验:右侧阈值不得小于左侧阈值
根据上面的思路,单个表单的校验属于公共校验方法,关联校验需要分别校验(因为对比对象不同,且提示语不同),由此在自定义校验中有了如下定义:
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' }, ], },
公共校验方法:正整数校验、区间校验
validateCom(rule, value, callback) { const one = Number(value); if (Number.isInteger(one)) { if (one < MIN_NUMBER) { return callback(new Error(`输入值必须大于${MIN_NUMBER}`)); } else if (one > MAX_NUMBER) { return callback(new Error(`输入值必须小于${MAX_NUMBER}`)); } return callback(); } return callback(new Error('输入值必须为正整数')); },
注意:input输出的始终是字符串类型,需要转换成数字后进行比对
关联校验:
validateMin(rule, value, callback) { const one = Number(value); const max = Number(this.form.max); if (!max || one < max) { return callback(); } return callback(new Error('输入值不得大于最大阈值')); }, validateMax(rule, value, callback) { const one = Number(value); const min = Number(this.form.min); if (!min || one > min) { return callback(); } return callback(new Error('输入值不得小于最小阈值')); },
大概,你会想,这不就完了吗!so easy!现在真正的坑才开始
填坑(重点)
根据上面的写法,组件的基本功能实现了,但是有一个坑!如下:
很显然,左侧值是小于右侧值的,但是校验提示仍然报错。究其原因,还是关联校验的问题。既然是关联交验,改变其中一个时应该会重新校验两个。很简单,在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(); },
总结input表单输出值为String类型,即使设置了type=number
关联交验时需要验证其关联项,且不能重复校验
全部代码:
~
以上就是“vue中如何利用element实现一个区间选择组件”这篇文章的所有内容,感谢各位的阅读!相信大家阅读完这篇文章都有很大的收获,小编每天都会为大家更新不同的知识,如果还想学习更多的知识,请关注创新互联行业资讯频道。
本文名称:vue中如何利用element实现一个区间选择组件
标题URL:http://pwwzsj.com/article/jgeiii.html