表单多次自定义校验

在项目中总会遇到对表单的校验,那么用于对表单中的内容进行多种情况的判断如何做呢?
比如说:首先先对所填的数字进行范围判断,其次判断是否满足大于某个数的判断,接下来做是否是某个数字的倍数等等。。。
莫要懵,慢慢搞...
实例举一个项目中的二次校验吧:
使用的是 element的表单校验 什么 refprop: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 }] //质检合格率
      }
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容