介绍基本的需求如下:
<李> & lt; el-col :跨度=?“,v=癷tem.qttccType ===, 1“祝辞,
,& lt; el-col :跨度=?4“比;
& lt;才能el-form-item : label=癷tem.qttccName",:道具=? # 39;列表强生# 39;+,index +, & # 39; .startNum& # 39;“,:规则=癷tem.qttccName ===, & # 39;交易金额& # 39;,?,startMoneyRule (tIndex),:,[]“比;
,,& lt; el-input v-model.number=癷tem.qttcStartNum",, @change=癶andleMinChange(索引)“祝辞& lt;/el-input>
& lt;才能/el-form-item>
,& lt;/el-col>
,& lt; el-col :跨度=?0“比;
& lt;才能el-form-item 标签=皛”,label-width=?0 px",:道具=? # 39;强生# 39;列表+,index +, & # 39; .qttcEndNum& # 39;“,:规则=癷tem.qttccName ===, & # 39;交易金额& # 39;,?,endMoneyRule (tIndex),:,[]“比;
,,& lt; el-input v-model.number=癷tem.qttcEndNum",, @change=癶andleMaxChange(索引)“祝辞& lt;/el-input>
& lt;才能/el-form-item>
,& lt;/el-col>
& lt;/el-col> <李> validateCom(规则,,,,回调),{
,,const MIN_NUMBER =1
,,const one =,数量(值)
,,if (Number.isInteger(一)),{
,,,if (one & lt;, MIN_NUMBER), {
,,,,return 回调(new 错误(& # 39;输入值必须大于0 & # 39;))
,,,},else if (one.length 祝辞,50),{
,,,,回调(new 错误(& # 39;最大长度为50位& # 39;))
,,,}
,,,return 回调()
,,}
,,return 回调(new 错误(& # 39;请输入数字值& # 39;))
以前,,} startMoneyRule(索引),{
,,const validateMin =,(规则,价值,,回调),=祝辞,{
,,,const one =,数量(值)
,,,const max =,数量(this.form.list[指数].qttcEndNum)
,,,if (! max | |, one & lt;, max), {
,,,,return 回调()
,,,}
,,,return 回调(new 错误(& # 39;输入值不得大于最大阈值& # 39;))
,,}
,,const R =, []
,,R.push({,要求:假的,,信息:,& # 39;请填写交易金额最小值& # 39;,,触发:,& # 39;模糊# 39;,},
,,,{,验证器:this.validateCom,,触发:,& # 39;模糊# 39;,},
,,,{,验证器:validateMin,,触发:,& # 39;模糊# 39;,})
,,return R
,,},
endMoneyRule才能(索引),{
,,const validateMax =,(规则,价值,,回调),=祝辞,{
,,,const one =,数量(值)
,,,const min =,数量(this.form.list[指数].qttcStartNum)
,,,if (! min | |, one 祝辞,min), {
,,,,return 回调()
,,,}
,,,return 回调(new 错误(& # 39;输入值不得小于最小阈值& # 39;))
,,}
,,const R =, []
,,R.push({,要求:假的,,信息:,& # 39;请填写交易金额最大值& # 39;,,触发:,& # 39;模糊# 39;,},
,,,{,验证器:this.validateCom,,触发:,& # 39;模糊# 39;,},
,,,{,验证器:validateMax,,触发:,& # 39;模糊# 39;,})
,,return R
,,} handleMinChange(索引),{
这。才能refs.form.validateField美元(& # 39;# 39;公司列表,+,index +, & # 39; .qttcEndNum& # 39;)
,,},
handleMaxChange才能(索引),{
null
null
本篇文章给大家分享的是有关利用元素怎么实现一个区间选择组件,小编觉得挺实用的,因此分享给大家学习,希望大家阅读完这篇文章后可以有所收获,话不多说,跟着小编一起来看看吧。
基本的需求如下:
分为左右值,包含左右值,正整数
<李>左侧必须大于等于1,右侧无限大,右侧值必须不小于左侧
<李>左侧填写数据,右侧标为必填;右侧填写数据,左侧标为必填
<李>失焦校验成果:
代码如下:页(面)
主要思路:
单个表单校验:左侧填写数据,右侧标为必填;右侧填写数据,左侧标为必填,正整数校验,区间校验
<李>关联校验:右侧阈值不得小于左侧阈值
根据上面的思路,单个表单的校验属于公共校验方法,关联校验需要分别校验(因为对比对象不同,且提示语不同),由此在自定义校验中有了如下定义:
公共校验方法:正整数校验,区间校验
关联校验:
填坑(重点)
很显然,左侧值是小于右侧值的,但是校验提示仍然报错。究其原因,还是关联校验的问题,既然是关联交验,改变其中一个时应该会重新校验两个。很简单,在输入改变时,重新校验表单不就好了吗
