详解基于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 相关文章推荐
JavaScript 常见对象类创建代码与优缺点分析
Dec 07 Javascript
用JS实现一个TreeMenu效果分享
Aug 28 Javascript
基于js disabled=&quot;false&quot;不起作用的解决办法
Jun 26 Javascript
浅析JavaScript中的delete运算符
Nov 30 Javascript
IE6 hack for js 集锦
Sep 23 Javascript
javascript jquery对form元素的常见操作详解
Jun 12 Javascript
很棒的vue弹窗组件
May 24 Javascript
JavaScript多态与封装实例分析
Jul 27 Javascript
jQuery分组选择器简单用法示例
Apr 04 jQuery
js设置默认时间跨度过程详解
Jul 17 Javascript
在LayUI图片上传中,解决由跨域问题引起的请求接口错误的方法
Sep 24 Javascript
layui数据表格 table.render 报错的解决方法
Sep 29 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
php5.2时间相差8小时
2007/01/15 PHP
一些常用的php简单命令代码集锦
2007/09/24 PHP
jQuery判断密码强度实现思路及代码
2013/04/24 Javascript
jQuery中extend函数详解
2015/02/13 Javascript
jquery实现经典的淡入淡出选项卡效果代码
2015/09/22 Javascript
探究Javascript模板引擎mustache.js使用方法
2016/01/26 Javascript
vue实现动态数据绑定
2017/04/28 Javascript
详解Vue 全局变量,局部变量
2019/04/17 Javascript
layui 表单标签的校验方法
2019/09/04 Javascript
[00:34]DOTA2上海特级锦标赛 Spirit战队宣传片
2016/03/04 DOTA
python使用cStringIO实现临时内存文件访问的方法
2015/03/26 Python
Python 多线程实例详解
2017/03/25 Python
Python中的元组介绍
2019/01/28 Python
Python多进程方式抓取基金网站内容的方法分析
2019/06/03 Python
Python使用pyserial进行串口通信的实例
2019/07/02 Python
完美解决python3.7 pip升级 拒绝访问问题
2019/07/12 Python
python 实现从高分辨图像上抠取图像块
2020/01/02 Python
Python进行统计建模
2020/08/10 Python
通俗讲解python 装饰器
2020/09/07 Python
网络通讯中,端口有什么含义,端口的取值范围
2012/11/23 面试题
Linux管理员面试题 Linux admin interview questions
2016/07/08 面试题
《胡杨》教学反思
2014/02/16 职场文书
保护环境的建议书
2014/03/12 职场文书
新闻发布会主持词
2014/03/28 职场文书
买卖车协议书
2014/04/21 职场文书
优秀员工评优方案
2014/06/13 职场文书
购房意向书
2014/08/30 职场文书
安全月宣传标语
2014/10/07 职场文书
王金山在党的群众路线教育实践活动总结大会上的讲话稿
2014/10/25 职场文书
2014年初三班主任工作总结
2014/12/05 职场文书
研究生导师评语
2014/12/31 职场文书
2015年置业顾问工作总结
2015/04/07 职场文书
2015年教务工作总结
2015/05/23 职场文书
创业计划书之暑假培训班
2019/11/09 职场文书
Html5新增了哪些功能
2021/04/16 HTML / CSS
Python selenium模拟网页点击爬虫交管12123违章数据
2021/05/26 Python