详解基于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 获得服务器控件值的方法小结
May 11 Javascript
浏览器常用高宽的jquery插件
Feb 24 Javascript
js中判断数字\字母\中文的正则表达式 (实例)
Jun 29 Javascript
js中的replace方法使用介绍
Oct 28 Javascript
Javascript基础知识(一)核心基础语法与事件模型
Sep 29 Javascript
JS中的THIS和WINDOW.EVENT.SRCELEMENT详解
May 25 Javascript
js实现跨域访问的三种方法
Dec 09 Javascript
jQuery原理系列-常用Dom操作详解
Jun 07 Javascript
JavaScript函数绑定用法实例分析
Nov 14 Javascript
vue组件的写法汇总
Apr 12 Javascript
vue响应式系统之observe、watcher、dep的源码解析
Apr 09 Javascript
小程序实现锚点滑动效果
Sep 23 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
杏林同学录(九)
2006/10/09 PHP
深入理解PHP原理之异常机制
2010/08/21 PHP
Erlang的运算符(比较运算符,数值运算符,移位运算符,逻辑运算符)
2012/07/23 PHP
php中的静态变量的基本用法
2014/03/20 PHP
php截取中文字符串函数实例
2015/02/23 PHP
js动态创建、删除表格示例代码
2013/08/07 Javascript
3分钟写出来的Jquery版checkbox全选反选功能
2013/10/23 Javascript
jQuery中dom元素上绑定的事件详解
2015/04/24 Javascript
jQuery实现点击弹出背景变暗遮罩效果实例代码
2016/06/24 Javascript
使用jquery如何获取时间
2016/10/13 Javascript
Jquery Easyui菜单组件Menu使用详解(15)
2016/12/18 Javascript
jquery.cookie.js的介绍与使用方法
2017/02/09 Javascript
ES6中module模块化开发实例浅析
2017/04/06 Javascript
Bootstrap 模态框多次显示后台提交多次BUG的解决方法
2017/12/26 Javascript
vue中使用cropperjs的方法
2018/03/01 Javascript
详解关于微信setData回调函数中的坑
2019/02/18 Javascript
Angular7中创建组件/自定义指令/管道的方法实例详解
2019/04/02 Javascript
[54:30]Liquid vs Newbee 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/16 DOTA
Python 冒泡,选择,插入排序使用实例
2015/02/05 Python
Python列表推导式与生成器表达式用法示例
2018/02/08 Python
python提取具有某种特定字符串的行数据方法
2018/12/11 Python
带你认识Django
2019/01/15 Python
详解python编译器和解释器的区别
2019/06/24 Python
Python散点图与折线图绘制过程解析
2019/11/30 Python
深入分析python 排序
2020/08/24 Python
Python pysnmp使用方法及代码实例
2020/08/24 Python
python关于倒排列的知识点总结
2020/10/13 Python
Pandas中两个dataframe的交集和差集的示例代码
2020/12/13 Python
精彩自我鉴定
2014/01/16 职场文书
先进班级集体事迹材料
2014/01/30 职场文书
教师反腐倡廉演讲稿
2014/09/03 职场文书
2015年毕业生实习评语
2015/03/25 职场文书
2015年三年级班主任工作总结
2015/05/21 职场文书
离婚答辩状范文
2015/05/22 职场文书
Spring Data JPA框架自定义Repository接口
2022/04/28 Java/Android