Vue 正则表达式验证表单字段(如用户名/密码/真实姓名/身份证/手机号/邮箱)的合法性

1. 给页面表单对象添加验证属性

由于我的项目使用的el-form,则给el-form添加属性  :rules="registerRules" ref="registerForm"  

为el-form-item每个表单子项添加  prop 属性, 例如 

2. rules是一个验证规则对象,因此需要在data()页面数据里添加registerRules对象:

      registerRules: {
        username: [{ required: true, trigger: 'blur', validator: validateUsername }],
        password: [{ required: true, trigger: 'blur', validator: validatePassword }],
        password_repeat: [{ required: true, trigger: 'blur', validator: this.validatePassRepeat }],
        bind_phone: [{ required: true, trigger: 'blur', validator: validatePhone }],
        realname: [{ required: true, trigger: 'blur', validator: validateRealName }],
        id_number: [{ required: true, trigger: 'blur', validator: validateIdNumber }]
      },

3. 创建validate.js全局验证规则脚本,供页面灵活引入 

/* 验证账号 */
export function validateUsername(rule, value, callback) {
  if (value.length < 6 || value.length > 20) {
    return callback(new Error('用户名不得小于6个或大于20个字符!'))
  } else {
    callback()
  }
}

/* 验证密码 */
export function validatePassword(rule, value, callback) {
  if (value.length < 6) {
    return callback(new Error('密码不能小于6位'))
  } else {
    callback()
  }
}

/* 合法邮箱 */
export function validateEmail(rule, value, callback) {
  const emailReg = /^(([a-zA-Z0-9_\-\.]+)@([a-zA-Z0-9_\-\.]+)\.([a-zA-Z]{2,5}){1,25})$/
  if (!value) {
    return callback(new Error('邮箱不能为空!!'))
  }
  setTimeout(() => {
    if (!emailReg.test(value)) {
      return callback(new Error('邮箱格式错误'))
    } else {
      callback()
    }
  }, 100)
}

/* 合法手机号 */
export function validatePhone(rule, value, callback) {
  const phoneReg = /^[1][3,4,5,7,8][0-9]{9}$/
  if (!value) {
    return callback(new Error('手机号码不能为空!!'))
  }
  setTimeout(() => {
    if (!phoneReg.test(value)) {
      return callback(new Error('手机号码格式错误'))
    } else {
      callback()
    }
  }, 100)
}

/* 合法真实姓名 */
export function validateRealName(rule, value, callback) {
  const realnameReg = /^([a-zA-Z0-9\u4e00-\u9fa5\·]{1,10})$/
  if (!value) {
    return callback(new Error('真实姓名不能为空!!'))
  }
  setTimeout(() => {
    if (!realnameReg.test(value)) {
      return callback(new Error('您的真实姓名格式错误,请输入英文或汉字!'))
    } else {
      callback()
    }
  }, 100)
}

/* 合法身份证 */
export function validateIdNumber(rule, value, callback) {
  const idNumberReg = /^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$|^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}([0-9]|X)$/
  if (!value) {
    return callback(new Error('身份证号码不能为空!!'))
  }
  setTimeout(() => {
    if (!idNumberReg.test(value)) {
      return callback(new Error('您的身份证号码格式错误!'))
    } else {
      callback()
    }
  }, 100)
}

4. 引入全局验证规则即可

import { validateUsername, validatePassword, validatePhone, validateRealName, validateIdNumber } from '../../utils/validate'

---

大部分验证函数都是通过正则表达式来验证的,以下还有很多常见的正则式,可供你任选使用:

/* 合法的https或ftp地址 */
const urlregex = /^(https?|ftp):\/\/([a-zA-Z0-9.-]+(:[a-zA-Z0-9.&%$-]+)*@)*((25[0-5]|2[0-4][0-9]|1[0-9]{2}|[1-9][0-9]?)(\.(25[0-5]|2[0-4][0-9]|1[0-9]{2}|[1-9]?[0-9])){3}|([a-zA-Z0-9-]+\.)*[a-zA-Z0-9-]+\.(com|edu|gov|int|mil|net|org|biz|arpa|info|name|pro|aero|coop|museum|[a-zA-Z]{2}))(:[0-9]+)*(\/($|[a-zA-Z0-9.,?'\\+&%$#=~_-]+))*$/
  
/* 小写字母 */
const reg = /^[a-z]+$/

/* 大写字母 *
const reg = /^[A-Z]+$/

/* 大小写字母*/
const reg = /^[A-Za-z]+$/

通过reg.test()函数判断是否符合正则式:

/* 判断str是否符合reg正则式,返回真或者假 */
reg.test(str)