详解基于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 相关文章推荐
js parentElement和offsetParent之间的区别
Mar 23 Javascript
jquery Mobile入门—外部链接切换示例代码
Jan 08 Javascript
Jquery图片滚动与幻灯片的实例代码
Apr 08 Javascript
jquery事件的ready()方法使用详解
Nov 11 Javascript
js实现模拟银行卡账号输入显示效果
Nov 18 Javascript
javascript基础知识
Jun 07 Javascript
vue中七牛插件使用的实例代码
Jul 28 Javascript
Angular2实现的秒表及改良版示例
May 10 Javascript
JS实现可用滑块滑动的缓动图代码
Sep 01 Javascript
p5.js实现故宫橘猫赏秋图动画
Oct 23 Javascript
Vue最新防抖方案(必看篇)
Oct 30 Javascript
vue vant Area组件使用详解
Dec 09 Javascript
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实现rc4加密算法代码
2012/04/25 PHP
PHP 自定义错误处理函数的使用详解
2013/05/10 PHP
使用PHP破解防盗链图片的一个简单方法
2014/06/07 PHP
thinkPHP实现签到功能的方法
2017/03/15 PHP
Docker搭建自己的PHP开发环境
2018/02/24 PHP
javascript Event对象详解及使用示例
2013/11/22 Javascript
为jQuery添加Webkit的触摸的方法分享
2014/02/02 Javascript
影响jQuery使用的14个方面
2014/09/01 Javascript
理解javascript模块化
2016/03/28 Javascript
jQuery on()方法绑定动态元素的点击事件实例代码浅析
2016/06/16 Javascript
JQuery DIV 动态隐藏和显示的方法
2016/06/23 Javascript
jQuery设置单选按钮radio选中/不可用的实例代码
2016/06/24 Javascript
jQuery实现优雅的弹窗效果(6)
2017/02/08 Javascript
Windows下使用Nodejs运行js的方法
2017/09/02 NodeJs
深入理解JavaScript 中的匿名函数((function() {})();)与变量的作用域
2018/08/28 Javascript
原生js实现each方法实例代码详解
2019/05/27 Javascript
jQuery表单选择器用法详解
2019/08/22 jQuery
element的el-table中记录滚动条位置的示例代码
2019/11/06 Javascript
JS实现可视化音频效果的实例代码
2020/01/16 Javascript
微信小程序仿淘宝热搜词在搜索框中轮播功能
2020/01/21 Javascript
在博客园博文中添加自定义右键菜单的方法详解
2020/02/05 Javascript
[03:37]2014DOTA2国际邀请赛 主赛事第一日胜者组TOPPLAY
2014/07/19 DOTA
跟老齐学Python之折腾一下目录
2014/10/24 Python
Python批量发送post请求的实现代码
2018/05/05 Python
numpy 对矩阵中Nan的处理:采用平均值的方法
2018/10/30 Python
python语言线程标准库threading.local解读总结
2019/11/10 Python
Python通过两个dataframe用for循环求笛卡尔积
2020/04/29 Python
CSS的background属性及CSS3的背景图片设置总结
2016/06/13 HTML / CSS
美国最大的家庭鞋类零售商之一:Shoe Carnival
2017/10/06 全球购物
W Hamond官网:始于1979年的钻石专家
2020/07/20 全球购物
荷兰最大的鞋子、服装和运动折扣店:Bristol
2021/01/07 全球购物
敏捷开发的主要原则都有哪些
2015/04/26 面试题
医学专业应届生的自我评价
2014/02/28 职场文书
2014年学习厉行节约反对浪费思想汇报
2014/09/10 职场文书
2015年普法依法治理工作总结
2015/05/26 职场文书
多台电脑共享文件怎么设置?多台电脑共享文件操作教程
2022/04/08 数码科技