在項(xiàng)目中總會遇到對表單的校驗(yàn),那么用于對表單中的內(nèi)容進(jìn)行多種情況的判斷如何做呢?
比如說:首先先對所填的數(shù)字進(jìn)行范圍判斷,其次判斷是否滿足大于某個數(shù)的判斷,接下來做是否是某個數(shù)字的倍數(shù)等等。。。
莫要懵,慢慢搞...
實(shí)例舉一個項(xiàng)目中的二次校驗(yàn)吧:
使用的是 element的表單校驗(yàn) 什么 ref , prop, :model,:rule啥的就不多說了
//定義自定義二次校驗(yàn)
var reg = /^[1-9]\d*$/
var REG = /^[1-9]\d{0,1}(\.\d{1,2})?$|^100$/ //1-100整數(shù)或二位小數(shù)
var Reg = /(^[1-9][0-9]$|^[1-9]$|^100$)/
//自定義校驗(yàn)函數(shù)
var checkRatio = (rule, value, cb) => {
if (!REG.test(value)) {
return cb(new Error('"請輸入1-100的整數(shù)或兩位小數(shù)"'))
}
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('"請輸入正整數(shù)且必須填寫哦"'))
}
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(
`抽取數(shù)據(jù)量不得低于該批次數(shù)據(jù)量的${mini_extraction_ratio}%`
)
)
} else {
cb()
}
}, 500)
}
var checkPass = (rule, value, cb) => {
if (!Reg.test(value)) {
return cb(new Error('"請輸入1-100的正整數(shù)"'))
}
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(`輸入的質(zhì)檢合格率不能低于${quality_pass_rate}%`))
} else {
cb()
}
}, 500)
}
其中校驗(yàn)的內(nèi)容可以根據(jù)項(xiàng)目實(shí)際情況來
最后在表單綁定的prop 對應(yīng)的 rule寫出來就o98k 了
//校驗(yàn)
rules: {
batchs_list: [
{ required: true, message: '請選擇批次', trigger: 'change' }
], //批次選擇
extract_ratio: [
{ required: true, trigger: 'blur', validator: checkRatio }
], //抽取比例
extract_nums: [
{ required: true, trigger: 'blur', validator: checkNums }
], //抽取數(shù)據(jù)量
pass_ratio: [{ required: true, trigger: 'blur', validator: checkPass }] //質(zhì)檢合格率
}