需求:
这里以项目的需求为例,基本的需求如下:
- 分为左右值,包含左右值,正整数
- 左侧必须大于等于1,右侧无限大,右侧值必须不小于左侧
- 左侧填写数据,右侧标为必填;右侧填写数据,左侧标为必填
- 失焦校验成果:
代码如下:(页面)
<el-col :span="8" v-if="item.qttccType === 1"> <el-col :span="14"> <el-form-item :label="item.qttccName" :prop="'list.'+ index + '.startNum'" :rules="item.qttccName === '交易金额' "> <el-input v-model.number="item.qttcStartNum" style="width: 100%;" @change="handleMinChange(index)"></el-input> </el-form-item> </el-col> <el-col :span="10"> <el-form-item label="~" label-width="10px" :prop="'list.'+ index + '.qttcEndNum'" :rules="item.qttccName === '交易金额' "> <el-input v-model.number="item.qttcEndNum" style="width: 60%;" @change="handleMaxChange(index)"></el-input> </el-form-item> </el-col> </el-col>
主要思路:
- 单个表单校验:左侧填写数据,右侧标为必填;右侧填写数据,左侧标为必填、正整数校验、区间校验
- 关联校验:右侧阈值不得小于左侧阈值
根据上面的思路,单个表单的校验属于公共校验方法,关联校验需要分别校验(因为对比对象不同,且提示语不同),由此在自定义校验中有了如下定义:
公共校验方法:正整数校验、区间校验
validateCom(rule, value, callback) { const MIN_NUMBER = 1 const one = Number(value) if (Number.isInteger(one)) { if (one < MIN_NUMBER) { return callback(new Error('输入值必须大于0')) } else if (one.length > 50) { callback(new Error('最大长度为50位')) } return callback() } return callback(new Error('请输入数字值')) }
关联校验:
startMoneyRule(index) { const validateMin = (rule, value, callback) => { const one = Number(value) const max = Number(this.form.list[index].qttcEndNum) if (!max || one < max) { return callback() } return callback(new Error('输入值不得大于最大阈值')) } const R = [] R.push({ required: false, message: '请填写交易金额最小值', trigger: 'blur' }, { validator: this.validateCom, trigger: 'blur' }, { validator: validateMin, trigger: 'blur' }) return R }, endMoneyRule(index) { const validateMax = (rule, value, callback) => { const one = Number(value) const min = Number(this.form.list[index].qttcStartNum) if (!min || one > min) { return callback() } return callback(new Error('输入值不得小于最小阈值')) } const R = [] R.push({ required: false, message: '请填写交易金额最大值', trigger: 'blur' }, { validator: this.validateCom, trigger: 'blur' }, { validator: validateMax, trigger: 'blur' }) return R }
填坑(重点)
很显然,左侧值是小于右侧值的,但是校验提示仍然报错。究其原因,还是关联校验的问题。既然是关联交验,改变其中一个时应该会重新校验两个。很简单,在input改变时,重新校验表单不就OK了吗
handleMinChange(index) { this.$refs.form.validateField('list.' + index + '.qttcEndNum') }, handleMaxChange(index) { this.$refs.form.validateField('list.' + index + '.qttcStartNum') }
大功告成,忘说了。我的表单是动态从后台获取的,所以校验rules是动态加的!!!
华山资源网 Design By www.eoogi.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
华山资源网 Design By www.eoogi.com
暂无评论...
RTX 5090要首发 性能要翻倍!三星展示GDDR7显存
三星在GTC上展示了专为下一代游戏GPU设计的GDDR7内存。
首次推出的GDDR7内存模块密度为16GB,每个模块容量为2GB。其速度预设为32 Gbps(PAM3),但也可以降至28 Gbps,以提高产量和初始阶段的整体性能和成本效益。
据三星表示,GDDR7内存的能效将提高20%,同时工作电压仅为1.1V,低于标准的1.2V。通过采用更新的封装材料和优化的电路设计,使得在高速运行时的发热量降低,GDDR7的热阻比GDDR6降低了70%。
更新日志
2024年09月21日
2024年09月21日
- [ABC]安娜-胆麦发烧女声[6N纯银镀膜][2016[低速原抓WAV+CUE]
- 任天堂今晚举行直面会!第三方及独立游戏展示
- 《哆啦A梦的铜锣烧店物语》发售!开罗公式+哆啦A梦
- 任天堂公布《塞尔达传说》系列时间线:野炊与王泪独立在外
- 五条人.2012-一些风景2CD【刀马旦】【WAV+CUE】
- 陈奕迅.2013-Easons.Life演唱会2CD(2024环球红馆40复刻系列)【环球】【WAV+CUE】
- 许美静.1995-遗憾(新马版)【上华】【WAV+CUE】
- 《叶倩文 歌声情缘》[WAV+CUE][410MB]
- 《张国荣 首首动听经典不容错过 追忆的风 2CD》[WAV+CUE][870MB]
- 《腾格尔 容中尔甲 亚东 高原三星 男人篇 3CD》[WAV/分轨][1GB]
- 命运圣契公测实测可用兑换码大全 命运圣契最新兑换码分享
- 黑神话悟空上品疾蝠精魄获取方法一览|上品疾蝠精魄收集攻略
- 《七龙珠电光炸裂!ZERO》GT角色预告片曝光,15位新角色登场
- [ABC]安娜-胆麦发烧女声[6N纯银镀膜][2016[低速原抓WAV+CUE]
- NewViennaOctetViennaWindSoloists-TheDeccaRecordings(2024)18CD[24-48][FLAC]-7