详解基于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宝典学习笔记(下)
Jan 10 Javascript
js结合正则实现国内手机号段校验
Jun 19 Javascript
jquery操作angularjs对象
Jun 26 Javascript
原生JS中slice()方法和splice()区别
Mar 06 Javascript
js+html获取系统当前时间
Nov 10 Javascript
使用NestJS开发Node.js应用的方法
Dec 03 Javascript
详解如何使用webpack打包多页jquery项目
Feb 01 jQuery
详解Vue源码中一些util函数
Apr 24 Javascript
layui 关闭open弹出框 刷新table表格页面的方法
Sep 16 Javascript
vue实现自定义多选按钮
Jul 16 Javascript
深入了解Vue.js 混入(mixins)
Jul 23 Javascript
关于Node.js中频繁修改代码重启服务器的问题
Oct 15 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分页显示制作详细讲解
2006/10/09 PHP
截获网站title标签之家内容的例子
2006/10/09 PHP
PHP实现的登录页面信息提示功能示例
2017/07/24 PHP
禁止JQuery中的load方法装载IE缓存中文件的方法
2009/09/11 Javascript
Nodejs学习笔记之NET模块
2015/01/13 NodeJs
js获取内联样式的方法
2015/01/27 Javascript
jQuery仿天猫实现超炫的加入购物车
2015/05/04 Javascript
javascript中JSON对象与JSON字符串相互转换实例
2015/07/11 Javascript
javascript实现手机震动API代码
2015/08/05 Javascript
jQuery简单实现两级下拉菜单效果代码
2015/09/15 Javascript
详解原生js实现offset方法
2017/06/15 Javascript
详解使用React全家桶搭建一个后台管理系统
2017/11/04 Javascript
微信小程序实现图片上传功能实例(前端+PHP后端)
2018/01/10 Javascript
node.js到底要不要加分号浅析
2018/07/11 Javascript
JS实现字符串翻转的方法分析
2018/08/31 Javascript
JavaScript实现无限级递归树的示例代码
2019/03/29 Javascript
Vue 使用计时器实现跑马灯效果的实例代码
2019/07/11 Javascript
原生js生成图片验证码
2020/10/11 Javascript
对python 多个分隔符split 的实例详解
2018/12/20 Python
Python可迭代对象操作示例
2019/05/07 Python
python ChainMap 合并字典的实现步骤
2019/06/11 Python
python openvc 裁剪、剪切图片 提取图片的行和列
2019/09/19 Python
15个Pythonic的代码示例(值得收藏)
2020/10/29 Python
Python 爬虫批量爬取网页图片保存到本地的实现代码
2020/12/24 Python
css3编写浏览器背景渐变背景色的方法
2018/03/05 HTML / CSS
英国领先的杂志订阅网站:Magazine.co.uk
2018/01/25 全球购物
美国最大和最受信任的二手轮胎商店:Bestusedtires.com
2020/06/02 全球购物
mysql_pconnect()和mysql_connect()有什么区别
2012/05/25 面试题
求职信内容考虑哪几点
2013/10/05 职场文书
思想政治自我鉴定
2013/10/06 职场文书
公司拓展活动方案
2014/02/13 职场文书
设计专业毕业生求职信
2014/06/25 职场文书
什么是执行力?9个故事告诉您:成功绝非偶然!
2019/07/05 职场文书
英镑符号 £
2022/02/17 杂记
MySQL的存储过程和相关函数
2022/04/26 MySQL
table不让td文字溢出操作方法
2022/12/24 HTML / CSS