在项目中总会遇到对表单的校验,那么用于对表单中的内容进行多种情况的判断如何做呢?
比如说:首先先对所填的数字进行范围判断,其次判断是否满足大于某个数的判断,接下来做是否是某个数字的倍数等等。。。
莫要懵,慢慢搞...
实例举一个项目中的二次校验吧:
使用的是 element的表单校验 什么 ref , prop, :model,:rule啥的就不多说了
//定义自定义二次校验
var reg = /^[1-9]\d*$/
var REG = /^[1-9]\d{0,1}(\.\d{1,2})?$|^100$/ //1-100整数或二位小数
var Reg = /(^[1-9][0-9]$|^[1-9]$|^100$)/
//自定义校验函数
var checkRatio = (rule, value, cb) => {
if (!REG.test(value)) {
return cb(new Error('"请输入1-100的整数或两位小数"'))
}
setTimeout(() => {
let extract_ratio = parseInt(this.qualityTask.extract_ratio)
let mini_extraction_ratio = parseInt(
this.project_info.mini_extraction_ratio
)
if (extract_ratio < mini_extraction_ratio) {
cb(new Error(`抽取比例不能低于${mini_extraction_ratio}%!`))
} else {
cb()
}
}, 500)
}
var checkNums = (rule, value, cb) => {
if (!reg.test(value)) {
return cb(new Error('"请输入正整数且必须填写哦"'))
}
setTimeout(() => {
let extract_nums = parseInt(this.qualityTask.extract_nums)
let data_num = parseInt(this.project_info.data_num)
let mini_extraction_ratio = parseInt(
this.project_info.mini_extraction_ratio
)
if (extract_nums < data_num * (mini_extraction_ratio / 100)) {
cb(
new Error(
`抽取数据量不得低于该批次数据量的${mini_extraction_ratio}%`
)
)
} else {
cb()
}
}, 500)
}
var checkPass = (rule, value, cb) => {
if (!Reg.test(value)) {
return cb(new Error('"请输入1-100的正整数"'))
}
setTimeout(() => {
let pass_ratio = parseInt(this.qualityTask.pass_ratio)
let quality_pass_rate = parseInt(this.project_info.quality_pass_rate)
if (pass_ratio < quality_pass_rate) {
cb(new Error(`输入的质检合格率不能低于${quality_pass_rate}%`))
} else {
cb()
}
}, 500)
}
其中校验的内容可以根据项目实际情况来
最后在表单绑定的prop 对应的 rule写出来就o98k 了
//校验
rules: {
batchs_list: [
{ required: true, message: '请选择批次', trigger: 'change' }
], //批次选择
extract_ratio: [
{ required: true, trigger: 'blur', validator: checkRatio }
], //抽取比例
extract_nums: [
{ required: true, trigger: 'blur', validator: checkNums }
], //抽取数据量
pass_ratio: [{ required: true, trigger: 'blur', validator: checkPass }] //质检合格率
}