element-ui自定义表单验证规则完整版待补充

来源博客：【Harryの心阁】

1. 使用方式

npm install el-rules --save

• 直接引用
• 验证类别：

验证规则	属性名称
用户名	username
邮箱	email
中文姓名	name
密码	password
手机	mobile
年龄	age
网站	url
车牌号	checkCar
身份证	cardId

2. 全部代码

/***
 * @Description: element-ui自定义表单验证规则
 * @Author: Harry
 * @Date: 2021-09-25 14:18:47
 * @Url: https://u.mr90.top
 * @github: https://github.com/rr210
 * @LastEditTime: 2021-09-25 15:00:36
 * @LastEditors: Harry
 */
const phoneRegex = /^(?:(?:\+|00)86)?1\d{10}$/ // 手机正则匹配
// 邮箱正则匹配
// const emailRegex = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/
const urlRegex = /^(((ht|f)tps?):\/\/)?[\w-]+(\.[\w-]+)+([\w.,@?^=%&:/~+#-]*[\w@?^=%&/~+#-])?$/
// 姓名中文的正则
const chRegex = /^[\u4e00-\u9fa5]{0,}$/
// 年龄正则
const ageRegx = /^[0-9]*$/

const formRules = {
  username: [
    { required: true, message: '必填' },
    { min: 6, max: 18, message: '长度在 6 到 18 个字符', trigger: 'blur' }
  ],
  // 邮箱
  email: [{ type: 'email', message: '请输入正确的邮箱地址', trigger: 'blur' }],
  // 检验中文的格式
  name: [
    { required: true, message: '请输入姓名', trigger: 'blur' },
    {
      validator: function (rule, value, callback) {
        if (chRegex.test(value) === false) {
          callback(new Error('请输入中文'))
        } else {
          // 校验通过
          callback()
        }
      },
      trigger: 'blur'
    }
  ],
  password: [
    {
      required: true,
      message: '请填写密码',
      trigger: 'blur'
    },
    { min: 6, max: 16, message: '请输入6-16位的字符', trigger: 'blur' }
  ],
  // 手机号码
  mobile: [
    { required: true, message: '请输入手机号码', trigger: 'blur' },
    {
      validator: function (rule, value, callback) {
        if (phoneRegex.test(value) === false) {
          callback(new Error('请输入正确的手机号'))
        } else {
          callback()
        }
      },
      trigger: 'blur'
    }
  ],
  // 年龄
  age: [
    {
      validator: function (rule, value, callback) {
        if (ageRegx.test(value) === false) {
          callback(new Error('请输入正确的数字'))
        } else {
          callback()
        }
      },
      trigger: 'blur'
    }
  ],
  // 网站地址
  url: [
    {
      validator: function (rule, value, callback) {
        if (urlRegex.test(value) === false) {
          callback(new Error('请输入正确的Url'))
        } else {
          callback()
        }
      },
      trigger: 'blur'
    }
  ],
  checkCar: [
    {
      validator: (rule, value, callback) => {
        if (!value) {
          return callback()
        } else {
          let result = false
          if (value.length === 7) {
            // 车牌是7位时候规则为： 省份简称或大写字母共1位+大写字母共1位+大写字母或者数字共4位+大写字母或数字或特殊汉字1位  例如:AAAAAAA  京A9999警
            const express = /^[京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领A-Z]{1}[A-Z]{1}[A-Z0-9]{4}[A-Z0-9挂学警港澳]{1}$/
            result = express.test(value) // 满足条件时候 正则结果是true
          } else if (value.length === 8) {
            const express2 = /^[京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领A-Z]{1}[A-Z]{1}[A-Z0-9]{5}[A-Z0-9挂学警港澳]{1}$/
            result = express2.test(value)
          }
          if (result) {
            return callback()
          } else {
            return callback(new Error('请输入正确车牌号码'))
          }
        }
      }
    }
  ]
}
module.exports = {
  formRules
}

公众号：今日在学

一起学习可好？扫码关注，了解更多!!