详解基于element的区间选择组件校验(交易金额)


Posted in Javascript onJanuary 07, 2021

需求:

这里以项目的需求为例,基本的需求如下:

  1. 分为左右值,包含左右值,正整数
  2. 左侧必须大于等于1,右侧无限大,右侧值必须不小于左侧
  3. 左侧填写数据,右侧标为必填;右侧填写数据,左侧标为必填
  4. 失焦校验成果:

详解基于element的区间选择组件校验(交易金额)

代码如下:(页面)

<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 === '交易金额' ? startMoneyRule(tIndex) : []">
   <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 === '交易金额' ? endMoneyRule(tIndex) : []">
   <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是动态加的!!!

到此这篇关于详解基于element的区间选择组件校验(交易金额)的文章就介绍到这了,更多相关element 区间选择组件校验内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
jquery配合css简单实现返回顶部效果
Sep 30 Javascript
JS中attr和prop属性的区别以及优先选择示例介绍
Jun 30 Javascript
JavaScript实现的石头剪刀布游戏源码分享
Aug 22 Javascript
vue动态组件实现选项卡切换效果
Mar 08 Javascript
AngularJS动态菜单操作指令
Apr 25 Javascript
JS获取数组中出现次数最多及第二多元素的方法
Oct 27 Javascript
localstorage实现带过期时间的缓存功能
Jun 28 Javascript
vue遍历对象中的数组取值示例
Nov 07 Javascript
JavaScript观察者模式原理与用法实例详解
Mar 10 Javascript
vue在线动态切换主题色方案
Mar 26 Javascript
Vue2.0 $set()的正确使用详解
Jul 28 Javascript
vue中利用three.js实现全景图的完整示例
Dec 07 Vue.js
el-table表头根据内容自适应完美解决表头错位和固定列错位
Jan 07 #Javascript
vue3中轻松实现switch功能组件的全过程
Jan 07 #Vue.js
vue+elementui通用弹窗的实现(新增+编辑)
Jan 07 #Vue.js
微信小程序onShareTimeline()实现分享朋友圈
Jan 07 #Javascript
JavaScript实现滑块验证解锁
Jan 07 #Javascript
js删除指定位置超链接中含有百度与360的标题
Jan 06 #Javascript
基于element-ui封装表单金额输入框的方法示例
Jan 06 #Javascript
You might like
PHP date函数常用时间处理方法
2015/05/11 PHP
Laravel 5.4向IoC容器中添加自定义类的方法示例
2017/08/15 PHP
laravel框架中控制器的创建和使用方法分析
2019/11/23 PHP
JS解决url传值出现中文乱码的另类办法
2013/04/08 Javascript
jquery获取tr并更改tr内容示例代码
2014/02/13 Javascript
JS使用正则表达式实现关键字替换加粗功能示例
2016/08/03 Javascript
JavaScript编写一个简易购物车功能
2016/09/17 Javascript
BootStrap中Table分页插件使用详解
2016/10/09 Javascript
JavaScript简单验证表单空值及邮箱格式的方法
2017/01/20 Javascript
Javascript仿京东放大镜的效果
2017/03/01 Javascript
JS实现两周内自动登录功能
2017/03/23 Javascript
ComboBox(下拉列表框)通过url加载调用远程数据的方法
2017/08/06 Javascript
js判断输入框不能为空格或null值的实现方法
2018/03/02 Javascript
在 Vue 应用中使用 Netlify 表单功能的方法详解
2019/06/03 Javascript
python制作爬虫并将抓取结果保存到excel中
2016/04/06 Python
Python操作RabbitMQ服务器实现消息队列的路由功能
2016/06/29 Python
python制作抖音代码舞
2019/04/07 Python
Python3+Appium实现多台移动设备操作的方法
2019/07/05 Python
PyCharm中配置PySide2的图文教程
2020/06/18 Python
Python分析最近大火的网剧《隐秘的角落》
2020/07/02 Python
5 分钟读懂Python 中的 Hook 钩子函数
2020/12/09 Python
利用Python函数实现一个万历表完整示例
2021/01/23 Python
多视角3D可旋转的HTML5 Logo动画
2016/03/02 HTML / CSS
Myprotein蛋白粉美国官网:欧洲畅销运动营养品牌
2016/11/15 全球购物
如何将无状态会话Bean发布为WEB服务,只有无状态会话Bean可以发布为WEB服务?
2015/12/03 面试题
房地产还款计划书
2014/01/10 职场文书
演讲比赛获奖感言
2014/02/02 职场文书
2014两会学习心得:榜样精神伴我行
2014/03/17 职场文书
婚前财产公证书
2014/04/10 职场文书
关于梦想的演讲稿
2014/05/05 职场文书
活动总结格式
2014/08/30 职场文书
大学生村官个人对照检查材料(群众路线)
2014/09/26 职场文书
员工2014年度工作总结
2014/12/09 职场文书
2016党风廉政建设心得体会范文
2016/01/25 职场文书
《亲亲我的妈妈》观后感(3篇)
2019/09/26 职场文书
Python中的turtle画箭头,矩形,五角星
2022/03/16 Python