Element中表单验证&一种较为实用的用法

element中对表单的校验，官方文档详见https://element.eleme.cn/#/zh-CN/component/form，个人觉得作为日常开发并不适合拿来即用，所以我搜了几种用法，简单整理了一个我个人觉得用起来比较顺手的一种。

在工具类文件夹下，建一个validation.js文件。

module.exports = {
  NormalPwd(rule, value, callback) {
    let reg = /^(?![0-9]*$)(?![a-zA-Z]*$)[a-zA-Z0-9]{6,12}$/
    matching(value, callback, reg, '请输入6-12位字母和数字组合')
  },
  ComplexPwd(rule, value, callback) {
    let reg = /^(?![\d]+$)(?![a-zA-Z]+$)(?![^\da-zA-Z]+$)([^\u4e00-\u9fa5\s]){8,20}$/
    matching(value, callback, reg, '请输入8-20位英文字母、数字或者符号')
  },
  PhoneNum(rule, value, callback) {
    let reg = /^[1][3, 4, 5, 6, 7, 8][0-9]{9}$/
    matching(value, callback, reg, '请输入正确的手机')
  },
  Email(rule, value, callback) {
    let reg = /^([a-zA-Z0-9]+[-_\.]?)+@[a-zA-Z0-9]+\.[a-z]+$/
    matching(value, callback, reg, '输入正确的邮箱')
  },
  IdCard(rule, value, callback) {
    let reg = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/
    matching(value, callback, reg, '输入正确的身份证号码')
  },
  HKMacauIDcard(rule, value, callback) {
    let reg = /^([A-Z]\d{6,10}(\(\w{1}\))?)$/
    matching(value, callback, reg, '输入正确的港澳通行证号码')
  },
  MilitaryIDcard(rule, value, callback) {
    let reg = /^[\u4E00-\u9FA5](字第)([0-9a-zA-Z]{4,8})(号?)$/
    matching(value, callback, reg, '输入正确的军官证号码')
  },
  BusinessLicenseNum(rule, value, callback) {
    let reg = /^[A-Z0-9]{8}-[A-Z0-9]$|^[A-Z0-9]{8}-[A-Z0-9]-[0-9]{2}$/
    matching(value, callback, reg, '请输入正确的营业执照')
  },
  Ip(rule, value, callback) {
    let reg = /^(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$/
    matching(value, callback, reg, '请输入正确的IP')
  },
  BankCard(rule, value, callback) {
    let reg = /^([1-9]{1})(\d{14}|\d{18})$/
    matching(value, callback, reg, '请输入正确的银行卡')
  },
}

//对rules进行校验的方法
let matching = (value, callback, reg, message) => {
    if (value === '' || value === undefined || value == null) {
        callback(new Error(message))
    } else {
        if (!reg.test(value)) {
            callback(new Error(message))
        } else {
            callback()
        }
    }
}

在所需要的地方使用方法如下

import validation from '@/utils/validation.js'

rules: {
        reportName: [
          { required: true, message: "请输入姓名", trigger: "blur" },
        ],
        cardType: [
          { required: true, message: "请选择证件类型", trigger: "change" },
        ],
        cardId: [
          { required: true, validator: rulesjs.IdCard, trigger: 'blur' }
        ],
        HKMacauID: [
          { required: true, validator: rulesjs.HKMacauIDcards, trigger: 'blur' }
        ],
        MilitaryID: [
          { required: true, validator: rulesjs.MilitaryIDcards, trigger: 'blur' }
        ],
        reportPhone: [
          { required: true, validator: rulesjs.Phone, trigger: 'blur' }
        ],
        reportEmail: [
          { required: true, validator: rulesjs.Email, trigger: "blur" },
        ],
        reportType: [
          { required: true, message: "请选择举报类型", trigger: "change" },
        ],
        reportCompanyName: [
          { required: true, message: "请输入被举报单位/公司名称", trigger: "blur" },
      },

在html中，form中要绑定验证规则rules，在需要验证的form-item中写上对应的验证项prop="cardId"

<el-form ref="formData" :model="formData" :rules="rules">
  <el-form-item label="证件号" prop="cardId">
      <el-input v-model="formData.cardId" placeholder="请输入证件号"/>
  </el-form-item>
</el-form>

注意：验证失败的提示信息，如果走验证规则的话，在对应的验证方法中写，若没有验证规则，则在rules中写。若两个都写，那么rules优先级更高。

下面说一下，若formData是嵌套的，对应的rules也应写成嵌套的，举个例子

formData: {
        obj1:{
          cardId:''
        },
        obj2:{
          PhoneNum:''
        }
      },
        
rules: {
        obj1: {
          cardId: [
            { required: true, validator: rulesjs.cardId, trigger: "blur" },
          ],
        },
        obj2: {
          PhoneNum: [
            { required: true, validator: rulesjs.PhoneNum, trigger: "blur" },
          ],
        },
      },

html中对应的写法也该写成：

 <el-form-item label="身份证" prop="obj1.cardId">
   <el-input v-model="formData.obj1.cardId" type="text" placeholder="身份证" />
 </el-form-item>