在公司的系统中，产品经理经常会要求为某个字段设置区间阈值，或者在设计时将其作为过滤条件。但是因为元素中没有拟合组件(滑块组件不支持两端设置)，所以我自己做了一个。

成就

最终显示效果如下：

需求

以项目的需求为例。基本要求如下：

它分为左值和右值，包括左值和右值。正整数左侧必须大于等于1，右侧不大于100，000，右侧的值必须不小于左侧的默认值：左侧20，右侧100，000。需要失焦验证页面，与表单验证结构相同：

El-form ref=' form ' : model=' form ' : rules=' rules ' El-form-item prop=' min ' El-input v-model=' form . min '/El-form-item ~ El-form-item prop=' max ' El-input v-model=' form . max '/El-form-item/El-form

单式校验：必输项校验、正整数校验、区间校验及关联校验：右阈值不应小于左阈值。根据上述思路，单个表单的验证属于公共验证方式，关联验证需要单独验证(因为比较对象不同，提示也不同)，所以在自定义验证中定义如下：

rule : { min : [{ required d : true，message: '必需，请维护'，' trigger:' blur'}，{validator:this . validate com，trigger3360' blur'}，{ validator : this。validatemin，trigger: 'blur'}，]，max :[{ required d 3360 true，message: '必需项，请维护'，trigger3360' blur'}，{validator:this。validatecom，trigger:' blur'}，{validator:this。validatemax，trigger3360' blur'}，]，}，公共验证方法：正整数验证和区间验证

validateCom(规则、值、回调){ const one=Number(值)；If(数字。is integer(one)){ if(one MIN _ NUMBER){ return callback(新错误(`输入值必须大于$ { MIN _ NUMBER } `))；} else if(一个MAX _ NUMBER){返回回调(新错误(`输入值必须小于$ { MAX _ NUMBER } `))；}返回回调()；}返回回调(新错误(‘输入值必须是正整数’)；}，注意：输入的输出总是字符串类型，需要转换成数字，然后进行比较

关联检查：

validateMin(规则、值、回调){ const one=Number(值)；const max=Number(this . form . max)；if(！max | | one max){ return callback()；}返回回调(新错误(“输入值不得大于最大阈值”))；}，validateMax(规则、值、回调){ const one=Number(值)；常数最小值=数字；if(！min ||一min){ return callback()；}返回回调(新错误(“输入值不得小于最小阈值”))；}，大概，你会想，这还没完呢！太容易了！现在真正的坑开始了

填坑(要点)

根据上面的写法，组件的基本功能都实现了，但是有一个漏洞！如下所示：

显然，左值小于右值，但验证提示仍然报告错误。原因还是相关性验证的问题。因为它是关联的提交，所以当一个被更改时，两个应该被重新验证。很简单，当输入发生变化时，是不是可以重新检查表单

handleChange() { this。$ refs . form . validate()；}真实表现如我们所料，但当我们打开控制台时，会看到unclear (in promise) false。这到底是什么？作为一名优秀的前端工程师，你不会允许你的代码报告错误，即使它不影响正常的流程。

验证后，Promise报告了一个错误，不清楚表示它处于拒绝状态，尚未取消匹配。原因是当一个值被更改，整个表单被验证时，更改的输入将被验证两次，导致异常。

最后，进行以下修改：

handleMinChange() { this .参考文献。形式。验证字段(' max ')；}，handleMaxChange() { this .参考文献。形式。验证字段(' min ')；},//并对外暴露操作方法getFormData(){ const ret={ }；这个$refs.form.validate((有效)={ ret.valid=validret。形式=这个。形式；});返回ret}，resetForm() { this .参考文献。形式。resetfields()；},总结投入表单输出值为线类型，即使设置了类型=数字关联交验时需要验证其关联项，且不能重复校验

全部代码：

模板El-form ref=' form ' : model=' form ' : rules=' rules ' El-form-item prop=' MIN ' El-input v-model=' form。MIN ' @ change=' handleMinChange '/El-form-item ~ El-form-item prop=' max ' El-input v-model=' form。max ' @ change=' handleMaxChange '/El-form-item/El-form/模板脚本常量MIN _ NUMBER=1；常量MAX _ NUMBER=100000导出默认值{ data(){ return { form : { min : ' 20 '，max: '100000' }，rule 3360 { min : [{ required : true，message: '必填项，请维护，trigger: 'blur' }，{ validator : this。validate com，trigger: 'blur' }，{ validator : this。验证min，trigger: 'blur' }，]，max: [ { required: true，message: '必填项，请维护，trigger: 'blur' }，{ validator : this。validate com，trigger: 'blur' }，{ validator : this。validate max，trigger: 'blur' }，]，}，}；}，方法： { getFormData(){ const ret={ }；这个$refs.form.validate((有效)={ ret.valid=validret。形式=这个。形式；});返回ret}，resetForm() { this .参考文献。形式。resetfields()；}，handleMinChange() { this .参考文献。形式。验证字段(' max ')；}，handleMaxChange() { this .参考文献。形式。验证字段(' min ')；}，validateCom(规则，值，回调){常量一=数字(值);if(NUMBER。是整数(一)){如果(一个MIN _ NUMBER)}返回回调（新错误('输入值必须大于0'));} else if(一个MAX _ NUMBER){ 0返回回调（新错误('输入值必须小于100000'));}返回回调();}返回回调（新错误('输入值必须为正整数'));}，validateMin(规则、值、回调){常量一=数字(值);常量最大值=数字(这个。形式。max)；if(！max | | one max){ return callback()；}返回回调（新错误('输入值不得大于最大阈值'));}，validateMax(规则、值、回调){常量一=数字(值);常数最小值=数字；if(！最小||一min){ return callback()；}返回回调（新错误('输入值不得小于最小阈值'));}, },};/script以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。