个人中心
文章发布
退出
作者热门文章
- ubuntu12.04环境下使用kvm ioctl接口实现最简单的虚拟机
- Ubuntu 通过无线网络安装Ubuntu Server启动系统后连接无线网络的方法
- 在Ubuntu上搭建网桥的方法
- ubuntu 虚拟机上网方式及相关配置详解
28
4
CFSDN坚持开源创造价值，我们致力于搭建一个资源共享平台，让每一个IT人在这里找到属于你的精彩世界.
这篇CFSDN的博客文章详解基于element的区间选择组件校验(交易金额)由作者收集整理，如果你对这篇文章有兴趣，记得点赞哟.
这里以项目的需求为例，基本的需求如下:
代码如下：(页面) 。
|
1
2
3
4
5
6
7
8
9
10
11
12
|
<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>
|
根据上面的思路，单个表单的校验属于公共校验方法，关联校验需要分别校验（因为对比对象不同，且提示语不同），由此在自定义校验中有了如下定义:
公共校验方法：正整数校验、区间校验 。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
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(
'请输入数字值'
))
}
|
关联校验:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
|
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了吗 。
|
1
2
3
4
5
6
|
handleMinChange(index) {
this
.$refs.form.validateField(
'list.'
+ index +
'.qttcEndNum'
)
},
handleMaxChange(index) {
this
.$refs.form.validateField(
'list.'
+ index +
'.qttcStartNum'
)
}
|
大功告成，忘说了。我的表单是动态从后台获取的，所以校验rules是动态加的！！！ 。
到此这篇关于详解基于element的区间选择组件校验(交易金额)的文章就介绍到这了,更多相关element 区间选择组件校验内容请搜索我以前的文章或继续浏览下面的相关文章希望大家以后多多支持我！ 。
原文链接：https://blog.csdn.net/xiaoxiaoxiao_lu/article/details/86621609 。
最后此篇关于详解基于element的区间选择组件校验(交易金额)的文章就讲到这里了,如果你想了解更多关于详解基于element的区间选择组件校验(交易金额)的内容请搜索CFSDN的文章或继续浏览相关文章，希望大家以后支持我的博客！ 。
28
4
0
大家好，我是汤师爷~ 什么是订单履约系统？ 订单履约是从消费者下单支付到收到商品的全流程管理过程，包括订单接收、订单派单、库存分配、仓储管理和物流配送等环节，核心目标是确保商品准时、准确地送达消费
大家好，我是汤师爷~ 今天聊聊促销系统整体规划。 各类促销活动的系统流程，可以抽象为3大阶段： B端促销活动管理：商家运营人员在后台系统中配置和管理促销活动，包括设定活动基本信息、使用规则
全称“Java Virtual Machine statistics monitoring tool”（statistics 统计；monitoring 监控；tool 工具） 用于监控虚拟机的各种运
主要是讲下Mongodb的索引的查看、创建、删除、类型说明，还有就是Explain执行计划的解释说明。 可以转载，但请注明出处。
1>单线程或者单进程 相当于短链接，当accept之后，就开始数据的接收和数据的发送，不接受新的连接，即一个server，一个client 不存在并发。 2>循环服务器和并发服务器
详解 linux中的关机和重启命令 一 shutdown命令 shutdown [选项] 时间 选项： ?
首先，将json串转为一个JObject对象： ? 1
matplotlib官网 matplotlib库默认英文字体 添加黑体（‘SimHei'）为绘图字体 代码： plt.rcParams['font.sans-serif']=['SimHei'
在并发编程中，synchronized关键字是常出现的角色。之前我们都称呼synchronized关键字为重量锁，但是在jdk1.6中对synchronized进行了优化，引入了偏向锁、轻量锁。本篇
一般我们的项目中会使用1到2个数据库连接配置，同程艺龙的数据库连接配置被收拢到统一的配置中心，由DBA统一配置和维护，业务方通过某个字符串配置拿到的是Connection对象。
实例如下： ? 1
1. MemoryCahe NetCore中的缓存和System.Runtime.Caching很相似，但是在功能上做了增强，缓存的key支持object类型；提供了泛型支持；可以读缓存和单个缓存
argument是javascript中函数的一个特殊参数，例如下文，利用argument访问函数参数，判断函数是否执行 复制代码 代码如下: <script
一不小心装了一个Redis服务，开了一个全网的默认端口，一开始以为这台服务器没有公网ip，结果发现之后悔之莫及啊 某天发现cpu load高的出奇，发现一个minerd进程 占了大量cpu，googl
今天写这个是为了 提醒自己 编程过程 不仅要有逻辑 思想 还有要规范 代码 这样可读性 1、PHP 编程规范与编码习惯最主要的有以下几点： 1 文件说明 2 funct
摘要：虚拟机安装时一般都采用最小化安装，默认没有lspci工具。一台测试虚拟网卡性能的虚拟机，需要lspci工具来查看网卡的类型。本文描述了在一个虚拟机中安装lspci工具的具体步骤。 由于要测试
1、修改用户进程可打开文件数限制 在Linux平台上，无论编写客户端程序还是服务端程序，在进行高并发TCP连接处理时，最高的并发数量都要受到系统对用户单一进程同时可打开文件数量的限制(这是因为系统
目录 算术运算符 基本四则运算符 增量赋值运算符 自增/自减运算符 关系运算符 逻
如下所示： ? 1
MapperScannerConfigurer之sqlSessionFactory注入方式讲解 首先，Mybatis中的有一段配置非常方便，省去我们去写DaoImpl（Dao层实现类）的时间，这个
我是一名优秀的程序员,十分优秀！