封装正则、表单验证的内容

最新推荐文章于 2023-09-27 09:06:18 发布

原创最新推荐文章于 2023-09-27 09:06:18 发布 · 188 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#js

该博客介绍了如何封装和使用一系列的表单验证规则，包括手机号、价格、人数和课时的验证方法。提供了如`checkMobile`、`checkPrice`等静态方法，并封装了如`PriceMethod`、`accommodateMethod`等便捷验证规则，便于在表单中进行数据校验，确保输入数据的合法性。示例展示了如何在表单验证规则对象中应用这些封装的方法。

//关于表单验证规则的封装

class ProofRules {
  //验证手机规则
  static checkMobile = (rules, value, callback) => {
    const regPhoneNumber = /^(0|86|17951)?(13[0-9]|15[012356789]|17[678]|18[0-9]|14[57])[0-9]{8}$/
    if (regPhoneNumber.test(value)) {
      return callback()
    } else {
      callback(new Error('请填写合法的手机号码'))
    }
  }

  //验证价格的正则
  static checkPrice = (rules, value, callback) => {
    const regPrice = /(^[1-9]\d*.\d{1,2}$)|(^0.\d{1,2}$)|(^[1-9]\d*$)/
    if (regPrice.test(value)) {
      return callback()
    } else {
      callback(new Error('请正确填写价格，要求最多为两位小数且不能为0'))
    }
  }

  //基础课程价格的完全封装
  static PriceMethod (title) {
    return [
      this.requiredField(title),
      {
        validator: this.checkPrice,
        trigger: 'blur'
      }
    ]
  }

  //验证人数的正则---->0且为整数
  static checkAccommodate = (rules, value, callback) => {
    const regAccommodate = /^[1-9]\d*$/
    if (regAccommodate.test(value)) {
      return callback()
    } else {
      callback(new Error('请正确填入人数，必须为正整数且不能为0'))
    }
  }

  //人数的完整封装
  static accommodateMethod (title) {
    return [
      this.requiredField(title),
      {
        validator: this.checkAccommodate,
        trigger: 'blur'
      }
    ]
  }

  //验证课时的正则
  static checkClassHours = (rules, value, callback) => {
    const regAccommodate = /^[1-9]\d*$/
    if (regAccommodate.test(value)) {
      return callback()
    } else {
      callback(new Error('请正确填入课时时长，必须为正整数且不能为0'))
    }
  }

  //对于时长验证的完全封装
  static classHoursMethod(title){
   return[
     this.requiredField(title),
     {
       validator: this.checkClassHours,
       trigger: 'blur'
     }
   ]
  }

  //封装必填项----返回的是个对象
  static requiredField (title) {
    return {
      required: true,
      message: '请输入' + title,
      trigger: 'blur'
    }
  }

  //封装必填项的长度
  static requiredLength (min, max) {
    return {
      min: min,
      max: max,
      message: '长度在' + min + '到' + max + '个字符',
      trigger: 'blur'
    }
  }

  //封装一个完整的，验证长度和必填项
  static requiredFieldAndLength (title, min, max) {
    return [
      this.requiredField(title),
      this.requiredLength(min, max)
    ]
  }

}

export default ProofRuless

使用

//引入封装的验证规则，包括价格、手机等的一些特殊验证
import ProofRules from '../../../ck/util/proofRules'

formRules: {
  ClassName: ProofRules.requiredFieldAndLength('基础课程名称', 2, 20),
  Describe: ProofRules.requiredFieldAndLength('基础课程描述', 2, 200),
  Price: ProofRules.PriceMethod('基础课程价格'),
  Accommodate: ProofRules.accommodateMethod('基础课程的容纳人数'),
  ClassHour: ProofRules.classHoursMethod('基础课程时长')
},