详解基于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 location几个方法小姐
Jul 09 Javascript
javascript中的startWith和endWith的几种实现方法
May 07 Javascript
跟我学Node.js(四)---Node.js的模块载入方式与机制
Jun 04 Javascript
WEB前端设计师常用工具集锦
Dec 09 Javascript
jquery实现顶部向右伸缩的导航区域代码
Sep 02 Javascript
Vue.js组件tabs实现选项卡切换效果
Dec 01 Javascript
JS中闭包的经典用法小结(2则示例)
Dec 28 Javascript
JS实现的验证身份证及获取地区功能示例
Jan 16 Javascript
微信小程序 图片宽高自适应详解
May 11 Javascript
Vue与Node.js通过socket.io通信的示例代码
Jul 25 Javascript
深入浅析Node.js 事件循环、定时器和process.nextTick()
Oct 22 Javascript
react脚手架如何配置less和ant按需加载的方法步骤
Nov 28 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 Zip解压 文件在线解压缩的函数代码
2010/05/26 PHP
ThinkPHP整合datatables实现服务端分页的示例代码
2018/02/10 PHP
PHP输出Excel PHPExcel的方法
2018/07/26 PHP
PHP的Trait机制原理与用法分析
2019/10/18 PHP
JavaScript使用prototype定义对象类型(转)[
2006/12/22 Javascript
javascript getElementsByClassName 和js取地址栏参数
2010/01/02 Javascript
优化javascript的执行速度
2010/01/23 Javascript
firefox火狐浏览器与与ie兼容的2个问题总结
2010/07/20 Javascript
常用的JS验证和函数汇总
2014/12/23 Javascript
js实现类似jquery里animate动画效果的方法
2015/04/10 Javascript
省市区三级联动下拉框菜单javascript版
2015/08/11 Javascript
JavaScript中this详解
2015/09/01 Javascript
深入JavaScript高级程序设计之对象、数组(栈方法,队列方法,重排序方法,迭代方法)
2015/12/01 Javascript
JavaScript动态创建二维数组的方法示例
2019/02/01 Javascript
浅析JavaScript异步代码优化
2019/03/18 Javascript
jquery实现吸顶导航效果
2020/01/08 jQuery
深入浅析vue全局环境变量和模式
2020/04/28 Javascript
js+canvas实现画板功能
2020/09/13 Javascript
手机浏览器唤起微信分享(JS)
2020/10/11 Javascript
Vue select 绑定动态变量的实例讲解
2020/10/22 Javascript
Cython 三分钟入门教程
2009/09/17 Python
使用Python编写简单网络爬虫抓取视频下载资源
2014/11/04 Python
深入理解Python中字典的键的使用
2015/08/19 Python
Python 文件操作之读取文件(read),文件指针与写入文件(write),文件打开方式示例
2019/09/29 Python
python+Django+pycharm+mysql 搭建首个web项目详解
2019/11/29 Python
关于Theano和Tensorflow多GPU使用问题
2020/06/19 Python
python与js主要区别点总结
2020/09/13 Python
HTML5 form标签之解放表单验证、增加文件上传、集成拖放的使用方法
2013/04/24 HTML / CSS
凯特方迪化妆品官网:Kat Von D Beauty
2016/11/15 全球购物
软件测试笔试题
2012/10/25 面试题
校园招聘策划书
2014/01/09 职场文书
先进事迹报告会主持词
2014/04/02 职场文书
单位委托书格式范本
2014/09/29 职场文书
高中生个性发展自我评价
2015/03/09 职场文书
联谊活动总结范文
2015/05/09 职场文书
Django模型层实现多表关系创建和多表操作
2021/07/21 Python