详解基于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 构建客户/服务分离的链接模型中Table中的排序分析
Jan 22 Javascript
javascript基础第一章 JavaScript与用户端
Jul 22 Javascript
jquery 学习之二 属性相关
Nov 23 Javascript
深入探究使JavaScript动画流畅的一些方法
Jun 30 Javascript
javascript中数组方法汇总
Jul 07 Javascript
javascript中字体浮动效果的简单实例演示
Nov 18 Javascript
JS组件Bootstrap Table使用方法详解
Feb 02 Javascript
Mvc提交表单的四种方法全程详解
Aug 10 Javascript
Angular懒加载机制刷新后无法回退的快速解决方法
Aug 30 Javascript
使用JQuery中的trim()方法去掉前后空格
Sep 16 Javascript
使用vue-router切换页面时,获取上一页url以及当前页面url的方法
May 06 Javascript
Javascript实现单选框效果
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
星际争霸 Starcraft 编年史
2020/03/14 星际争霸
ecshop 订单确认中显示省市地址信息的方法
2010/03/15 PHP
PHP实现多进程并行操作的详解(可做守护进程)
2013/06/18 PHP
解析php开发中的中文编码问题
2013/08/08 PHP
PHP获取文件的MD5值并判断是否被修改的例子
2014/06/19 PHP
PHP内核探索:哈希表碰撞攻击原理
2015/07/31 PHP
PHP简单实现无限级分类的方法
2016/05/13 PHP
Laravel学习教程之model validation的使用示例
2017/10/23 PHP
Thinkphp框架+Layui实现图片/文件上传功能分析
2020/02/07 PHP
利用js获取服务器时间的两个简单方法
2010/01/08 Javascript
js操作checkbox遇到的问题解决
2013/06/29 Javascript
Extjs4中Form的使用之本地hiddenfield
2013/11/26 Javascript
javascript计时器编写过程与实现方法
2016/02/29 Javascript
bootstrap侧边栏圆点导航
2017/01/11 Javascript
详解前端路由实现与react-router使用姿势
2017/08/07 Javascript
JS实现模糊查询带下拉匹配效果
2018/06/21 Javascript
vue如何获取自定义元素属性参数值的方法
2019/05/14 Javascript
vue使用video.js进行视频播放功能
2019/07/18 Javascript
微信小程序实现收货地址左滑删除
2020/11/18 Javascript
javascript canvas封装动态时钟
2020/09/30 Javascript
六个窍门助你提高Python运行效率
2015/06/09 Python
PYTHON压平嵌套列表的简单实现
2016/06/08 Python
python 用 xlwings 库 生成图表的操作方法
2019/12/22 Python
python @propert装饰器使用方法原理解析
2019/12/25 Python
Python第三方包PrettyTable安装及用法解析
2020/07/08 Python
用python对excel查重
2020/12/07 Python
python线程优先级队列知识点总结
2021/02/28 Python
css3绘制天猫logo实现代码
2012/11/06 HTML / CSS
Swisse官方海外旗舰店:澳大利亚销量领先,自然健康品牌
2017/12/15 全球购物
伯利陶器:Burleigh Pottery
2018/01/03 全球购物
办公室内勤岗位职责范本
2013/12/09 职场文书
禁毒宣传活动总结
2014/08/26 职场文书
《日月潭》教学反思
2016/02/20 职场文书
Vue图片裁剪组件实例代码
2021/07/02 Vue.js
使用Spring处理x-www-form-urlencoded方式
2021/11/02 Java/Android
win11无线投屏在哪设置? win11无线投屏功能的使用方法
2022/04/08 数码科技