表單多次自定義校驗(yàn)

在項(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ì)檢合格率
      }
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容