使用场景:
element ui
自定义表单验证,输入的内容限制只能是数字,包括负整数、正整数和0,每个数字之间只能用英文逗号隔开,每一个输入框只允许输入5个数字,并且输入的数字最大不能超过365
和最小不能小于-365
还有一个条件是需要根据select
下拉框限制输入的数字,分别有三个条件:条件一,-365-365
之间的数字都可以输入,条件二就只能输入0-365
之间的数字,条件三只能输入0
问题描述
当时看到这个需求的时候,头皮发懵,在网上搜了许多的方法,刚开始是写的一个方法,插入到rules
的验证规则,然后在与select
下拉框联动,分别设置验证条件,这样可以实现大致的验证
changeStrategyType(value) {
console.log(value, '下拉框改变事件')
this.formRules['taskNode'] = []
let pt = ''
let msg = ''
if (value === 1) {
// 条件一
msg = '条件一输入内容不符合规范'
// pt = /^(?:0+(,\d+)*|(?:-?[1-9]\d*)+(,\d+)*)$/
pt = /^(?:0+(,\d+)*|(?:-?[1-9]\d*)+(,\d+)*)$/
} else if (value === 2) {
//条件二
msg = '输入范围应该>=0'
pt = /^(?:0+(,\d+)*|([1-9]\d*)+(,\d+)*)$/
} else if (value === 3) {
//条件三
msg = '输入范围应=0'
pt = /^([0])$/
}
this.formRules['taskNode'].push({ required: true, message: msg, pattern: pt, trigger: 'blur' })
}
但是这样写的问题也就来了:
1.在验证条件一的时候,我只要连续输入两个负数或者内容里面出现了两个负数,验证就会不通过
2.不好限制输入框输入的数字长度为5个
3.不好验证是否出现了输入同样数字的验证
4.不好限制输入的最大值和最小值
解决方案:
在出现了上面的几个问题之后,我想到了还是利用自定义的表单验证的方法,然后将输入框输入的内容转换成为一个数组,利用数组的方法检验输入的内容长度、输入内容是否相同,以及输入的最大值和最小值!
(数组yyds!!!)
const validateTasknode = (rule, value, callback) => {
let arr = []
let string = value
arr =string.split(",")
if (!value) {
callback(new Error('输入内容不为空'))
} else {
if (this.formData.strategyType === '') {
callback(
new Error('请先选择条件类型')
)
}else{
if(this.formData.strategyType === 1){
let val = /^((\-?\d+)(?!,\2(,|$)))(,(\-?\d+)(?!,\5(,|$)))*$/
if(!val.test(value)){
callback(new Error('条件一输入不符合规范'))
}
}else if(this.formData.strategyType === 2){
let val = /^(?:0+(,\d+)*|([1-9]\d*)+(,\d+)*)$/
if(!val.test(value)){
callback(new Error('条件二输入范围应>=0'))
}
}else if(this.formData.strategyType === 3){
let val = /^([0])$/
if(!val.test(value)){
callback(new Error('条件三输入范围应=0'))
}
}
if(arr.length > 5){
callback(new Error('最多只能输入5个数字'))
}
for(let i=0;i<=arr.length;i++){
if(arr[i] > 365){
callback(new Error('最大不能超过365'))
}else if(arr[i] < -365){
callback(new Error('最小不能超过-365'))
}
for(let j=i+1;j<=arr.length;j++){
if(arr[i] === arr[j]){
callback(new Error('不能存在两个相同的数字'))
}
}
}
}
callback()
}
}
针对条件一的解决方案就是重新优化了正则表达式
参考博客:https://www.jianshu.com/p/61d69bbf9bea