Vue项目中Form表单自定义校验

在实际项目中肯定少不了的增删改查中，前端表单有时候必须校验一些规则，比如必须输入电话号码、必须是数字、必须输入真实身份证号、必须输入整数且大于0等等等等，太多了，所以这里就列一下常用的自定义校验规则。我这里vue搭配的element-ui，所以就以element-ui为例 

首先是一个validate.js，这个文件就是咱们去验证一些规则的方法，返回一个布尔值  

 @/utils/validate.js

/**
 * 邮箱
 * @param {*} s
 */
export function isEmail (s) {
  return /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((.[a-zA-Z0-9_-]{2,3}){1,2})$/.test(s)
}

/**
 * 手机号码
 * @param {*} s
 */
export function isMobile (s) {
  return /^1[0-9]{10}$/.test(s)
}

/**
 * 电话号码
 * @param {*} s
 */
export function isPhone (s) {
  return /^([0-9]{3,4}-)?[0-9]{7,8}$/.test(s)
}

/**
 * URL地址
 * @param {*} s
 */
export function isURL (s) {
  return /^http[s]?:\/\/.*/.test(s)
}

/* 小写字母 */
export function isLowerCase (str) {
  const reg = /^[a-z]+$/
  return reg.test(str)
}

/* 大写字母 */
export function isUpperCase (str) {
  const reg = /^[A-Z]+$/
  return reg.test(str)
}

/* 大小写字母 */
export function isAlphabets (str) {
  const reg = /^[A-Za-z]+$/
  return reg.test(str)
}

/* 验证pad还是pc */
export const isPc = function () {
  const userAgentInfo = navigator.userAgent
  const Agents = ['Android', 'iPhone',
    'SymbianOS', 'Windows Phone',
    'iPad', 'iPod']
  let flag = true
  for (let v = 0; v < Agents.length; v++) {
    if (userAgentInfo.indexOf(Agents[v]) > 0) {
      flag = false
      break
    }
  }
  return flag
}

/**
 * 判断姓名是否正确
 */
export function isName (name) {
  let regName = /^[\u4e00-\u9fa5]{2,4}$/
  if (!regName.test(name)) return false
  return true
}

/**
 * 判断是否为整数
 */
export function isNum (num, type) {
  let regName = /[^\d.]/g
  if (type === 1) {
    if (!regName.test(num)) return false
  } else if (type === 2) {
    regName = /[^\d]/g
    if (!regName.test(num)) return false
  }
  return true
}

/**
 * 判断是否为小数
 */
export function isFloat (num) {
  let regName1 = /^\d+(\.\d+)?$/
  let regName2 = /^(-(([0-9]+\.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*\.[0-9]+)|([0-9]*[1-9][0-9]*)))$/
  if (regName1.test(num) || regName2.test(num)) return true
  return false
}

/**
 * 判断是否为空
 */
export function isNull (val) {
  if (val instanceof Array) {
    if (val.length === 0) return true
  } else if (val instanceof Object) {
    if (JSON.stringify(val) === '{}') return true
  } else {
    if (val === 'null' || val == null || val === 'undefined' || val === undefined || val === '') return true
    return false
  }
  return false
}

/**
 * 判断身份证号码
 */
export function isCardId (code) {
  let msg = ''
  const city = {
    11: '北京',
    12: '天津',
    13: '河北',
    14: '山西',
    15: '内蒙古',
    21: '辽宁',
    22: '吉林',
    23: '黑龙江 ',
    31: '上海',
    32: '江苏',
    33: '浙江',
    34: '安徽',
    35: '福建',
    36: '江西',
    37: '山东',
    41: '河南',
    42: '湖北 ',
    43: '湖南',
    44: '广东',
    45: '广西',
    46: '海南',
    50: '重庆',
    51: '四川',
    52: '贵州',
    53: '云南',
    54: '西藏 ',
    61: '陕西',
    62: '甘肃',
    63: '青海',
    64: '宁夏',
    65: '新疆',
    71: '台湾',
    81: '香港',
    82: '澳门',
    91: '国外 '
  }
  if (!isNull(code)) {
    if (code.length === 18) {
      if (!code || !/(^\d{18}$)|(^\d{17}(\d|X|x)$)/.test(code)) {
        msg = '证件号码格式错误'
        return false
      } else if (!city[code.substr(0, 2)]) {
        msg = '地址编码错误'
        return false
      } else {
        // 18位身份证需要验证最后一位校验位
        code = code.split('')
        // ∑(ai×Wi)(mod 11)
        // 加权因子
        let factor = [7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5, 8, 4, 2]
        // 校验位
        let parity = [1, 0, 'X', 9, 8, 7, 6, 5, 4, 3, 2, 'x']
        let sum = 0
        let ai = 0
        let wi = 0
        for (let i = 0; i < 17; i++) {
          ai = code[i]
          wi = factor[i]
          sum += ai * wi
        }
        let last = parity[sum % 11]
        if ('' + last !== '' + code[17]) {
          msg = '证件号码校验位错误'
          return false
        }
      }
    } else {
      msg = '证件号码长度不为18位'
      return false
    }
  } else {
    msg = '证件号码不能为空'
    return false
  }
  if (msg) {
    console.log(msg)
  }
  return true
}

/*
 * 整数必须为0
 */
export function isIntEqZero (value) {
  value = parseInt(value)
  return value === 0
}

/*
 * 判断整数value是否大于0
 * 整数必须大于0
 */
export function isIntGtZero (value) {
  value = parseInt(value)
  return value > 0
}

/*
 * 判断整数value是否大于或等于0
 * 整数必须大于或等于0
 */
export function isIntGteZero (value) {
  value = parseInt(value)
  return value >= 0
}

/*
 * 判断整数value是否不等于0
 * 整数必须不等于0
 */
export function isIntNEqZero (value) {
  value = parseInt(value)
  return value !== 0
}

/*
 * 判断整数value是否不等于0
 * 整数必须小于0
 */
export function isIntLtZero (value) {
  value = parseInt(value)
  return value < 0
}

/*
 * 判断整数value是否小于或等于0
 * 整数必须小于或等于0
 */
export function isIntLteZero (value) {
  value = parseInt(value)
  return value <= 0
}

/*
 * 判断浮点数value是否等于0
 * 浮点数必须为0
 */
export function isFloatEqZero (value) {
  value = parseFloat(value)
  return value === 0
}

/*
 * 判断浮点数value是否大于0
 * 浮点数必须大于0
 */
export function isFloatGtZero (value) {
  value = parseFloat(value)
  return value > 0
}

/*
 * 判断浮点数value是否大于或等于0
 * 浮点数必须大于或等于0
 */
export function isFloatGteZero (value) {
  value = parseFloat(value)
  return value >= 0
}

/*
 * 判断浮点数value是否不等于0
 * 浮点数必须不等于0
 */
export function isFloatNEqZero (value) {
  value = parseFloat(value)
  return value !== 0
}

/*
 * 判断浮点数value是否小于0
 * 浮点数必须小于0
 */
export function isFloatLtZero (value) {
  value = parseFloat(value)
  return value < 0
}

/*
 * 判断浮点数value是否小于或等于0
 * 浮点数必须小于或等于0
 */
export function isFloatLteZero (value) {
  value = parseFloat(value)
  return value <= 0
}
/*
 * 匹配integer
 * 匹配integer
 */
export function isInteger (value) {
  // eslint-disable-next-line no-useless-escape
  return (/^[-\+]?\d+$/.test(value) && parseInt(value) >= 0)
}

/*
 * 判断数值类型，包括整数和浮点数
 * 匹配数值类型，包括整数和浮点数
 */
export function isNumber (value) {
  // eslint-disable-next-line no-useless-escape
  return /^[-\+]?\d+$/.test(value) || /^[-\+]?\d+(\.\d+)?$/.test(value)
}

/*
 * 只能输入[0-9]数字
 * 只能输入[0-9]数字
 */
export function isDigits (value) {
  return /^\d+$/.test(value)
}

/*
 * 判断英文字符
 * 只能包含英文字符。
 */
export function isEnglish (value) {
  return /^[A-Za-z]+$/.test(value)
}
/*
 * 联系电话(手机/电话皆可)验证
 * 请正确填写您的联系方式
 */
export function isTel (value) {
  var length = value.length
  var mobile = /^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1}))+\d{8})$/
  var tel = /^(\d{3,4}-?)?\d{7,9}$/g
  return tel.test(value) || (length === 11 && mobile.test(value))
}

/*
 * 匹配qq
 * 匹配QQ
 */
export function isQq (value) {
  return /^[1-9]\d{4,12}$/.test(value)
}

/*
 * 邮政编码验证
 * 请正确填写您的邮政编码。
 */
export function isZipCode (value) {
  var zip = /^[0-9]{6}$/
  return zip.test(value)
}

/*
 * 匹配密码，以字母开头，长度在6-12之间，只能包含字符、数字和下划线。
 * 以字母开头，长度在6-12之间，只能包含字符、数字和下划线。
 */
// export function isPwd (value) {
//   return /^[a-zA-Z]\\w{6,12}$/.test(value)
// }

/*
 * 密码中必须包含字母（不区分大小写）、数字、特称字符，至少8个字符，最多30个字符
 */
export function isPwd (value) {
  return /(?=.*[0-9])(?=.*[a-zA-Z])(?=.*[^a-zA-Z0-9]).{8,30}/.test(value)
}

/*
 * IP地址验证
 * 请填写正确的IP地址。
 */
export function ip (value) {
  return /^(([1-9]|([1-9]\d)|(1\d\d)|(2([0-4]\d|5[0-5])))\.)(([1-9]|([1-9]\d)|(1\d\d)|(2([0-4]\d|5[0-5])))\.){2}([1-9]|([1-9]\d)|(1\d\d)|(2([0-4]\d|5[0-5])))$/.test(value)
}

/*
 * 字符验证，只能包含中文、英文、数字、下划线等字符。
 * 只能包含中文、英文、数字、下划线等字符
 */
export function stringCheck (value) {
  return /^[a-zA-Z0-9\u4e00-\u9fa5-_]+$/.test(value)
}

  /*
 * 匹配汉字
 * 匹配汉字
 */
export function isChinese (value) {
  return /^[\u4e00-\u9fa5]+$/.test(value)
}

  /*
 * 匹配中文(包括汉字和字符)
 * 匹配中文(包括汉字和字符)
 */
export function isChineseChar (value) {
  return /^[\u0391-\uFFE5]+$/.test(value)
}

  /*
 * 判断是否为合法字符(a-zA-Z0-9-_)
 * 判断是否为合法字符(a-zA-Z0-9-_)
 */
export function isRightfulString (value) {
  return /^[A-Za-z0-9_-]+$/.test(value)
}

// 车牌号校验
export function isPlateNo (plateNo) {
  var re = /^[\u4e00-\u9fa5]{1}[A-Z]{1}[A-Z_0-9]{5}$/
  if (re.test(plateNo)) {
    return true
  }
  return false
}

export default {isAlphabets, isCardId, isChinese, isChineseChar, isDigits, isEmail, isEnglish, isFloat, stringCheck, isFloatGteZero, ip, isFloatEqZero, isFloatGtZero, isFloatLtZero, isFloatLteZero, isFloatNEqZero, isIntEqZero, isIntGtZero, isIntGteZero, isIntLtZero, isIntLteZero, isIntNEqZero, isInteger, isLowerCase, isMobile, isName, isNull, isNum, isNumber, isPc, isPhone, isPlateNo, isPwd, isQq, isRightfulString, isTel, isURL, isUpperCase, isZipCode}

然后我们想在element-ui中的el-form表单中使用上面的规则，为了方便使用可以再建一个validator.js，这个文件就是在el-form-item上的rules自定义做校验使用的回调方法 

@/utils/validator.js 

import validate from './validate'

var isMobile = (rule, value, callback) => {
  if (value && !validate.isMobile(value)) {
    callback(new Error('请输入正确的手机号!'))
  } else {
    callback()
  }
}

var isPhone = (rule, value, callback) => {
  if (value && !validate.isPhone(value)) {
    callback(new Error('请输入正确的电话号码!'))
  } else {
    callback()
  }
}

var isNum = (rule, value, callback) => {
  if (value && !validate.isNum(value, 1)) {
    callback(new Error('请输入整数!'))
  } else {
    callback()
  }
}

var isEmail = (rule, value, callback) => {
  if (value && !validate.isEmail(value)) {
    callback(new Error('请输入有效的邮箱!'))
  } else {
    callback()
  }
}

var isURL = (rule, value, callback) => {
  if (value && !validate.isURL(value)) {
    callback(new Error('请输入有效的URL!'))
  } else {
    callback()
  }
}

var isLowerCase = (rule, value, callback) => {
  if (value && !validate.isLowerCase(value)) {
    callback(new Error('请输入小写字母!'))
  } else {
    callback()
  }
}

var isUpperCase = (rule, value, callback) => {
  if (value && !validate.isUpperCase(value)) {
    callback(new Error('请输入大写字母!'))
  } else {
    callback()
  }
}

var isAlphabets = (rule, value, callback) => {
  if (value && !validate.isAlphabets(value)) {
    callback(new Error('请输入大小写字母!'))
  } else {
    callback()
  }
}

var isName = (rule, value, callback) => {
  if (value && !validate.isName(value)) {
    callback(new Error('请输入有效的姓名!'))
  } else {
    callback()
  }
}

var isFloat = (rule, value, callback) => {
  if (value && !validate.isFloat(value)) {
    callback(new Error('请输入浮点数!'))
  } else {
    callback()
  }
}

var isNull = (rule, value, callback) => {
  if (value && !validate.isNull(value)) {
    callback(new Error('必须为空!'))
  } else {
    callback()
  }
}

var isCardId = (rule, value, callback) => {
  if (value && !validate.isCardId(value)) {
    callback(new Error('请输入合法的身份证号!'))
  } else {
    callback()
  }
}

var isIntEqZero = (rule, value, callback) => {
  if (value && !validate.isIntEqZero(value)) {
    callback(new Error('请输入0!'))
  } else {
    callback()
  }
}
var isIntGtZero = (rule, value, callback) => {
  if (value && !validate.isIntGtZero(value)) {
    callback(new Error('整数必须大于0!'))
  } else {
    callback()
  }
}
var isIntGteZero = (rule, value, callback) => {
  if (value && !validate.isIntGteZero(value)) {
    callback(new Error('整数必须大于或等于0!'))
  } else {
    callback()
  }
}
var isIntNEqZero = (rule, value, callback) => {
  if (value && !validate.isIntNEqZero(value)) {
    callback(new Error('整数必须不等于0!'))
  } else {
    callback()
  }
}

var isIntLtZero = (rule, value, callback) => {
  if (value && !validate.isIntLtZero(value)) {
    callback(new Error('整数必须小于0!'))
  } else {
    callback()
  }
}

var isIntLteZero = (rule, value, callback) => {
  if (value && !validate.isIntLteZero(value)) {
    callback(new Error('整数必须小于或等于0!'))
  } else {
    callback()
  }
}

var isFloatEqZero = (rule, value, callback) => {
  if (value && !validate.isFloatEqZero(value)) {
    callback(new Error('浮点数必须为0!'))
  } else {
    callback()
  }
}

var isFloatGtZero = (rule, value, callback) => {
  if (value && !validate.isFloatGtZero(value)) {
    callback(new Error('浮点数必须大于0!'))
  } else {
    callback()
  }
}
var isFloatGteZero = (rule, value, callback) => {
  if (value && !validate.isFloatGteZero(value)) {
    callback(new Error('浮点数必须大于或等于0!'))
  } else {
    callback()
  }
}
var isFloatNEqZero = (rule, value, callback) => {
  if (value && !validate.isFloatNEqZero(value)) {
    callback(new Error('浮点数必须不等于0!'))
  } else {
    callback()
  }
}

var isFloatLtZero = (rule, value, callback) => {
  if (value && !validate.isFloatLtZero(value)) {
    callback(new Error('浮点数必须小于0!'))
  } else {
    callback()
  }
}

var isFloatLteZero = (rule, value, callback) => {
  if (value && !validate.isFloatLteZero(value)) {
    callback(new Error('浮点数必须小于或等于0!'))
  } else {
    callback()
  }
}

var isInteger = (rule, value, callback) => {
  if (value && !validate.isInteger(value)) {
    callback(new Error('必须为整数!'))
  } else {
    callback()
  }
}

var isNumber = (rule, value, callback) => {
  if (value && !validate.isNumber(value)) {
    callback(new Error('请输入数字!'))
  } else {
    callback()
  }
}

var isDigits = (rule, value, callback) => {
  if (value && !validate.isDigits(value)) {
    callback(new Error('只能输入[0-9]数字!'))
  } else {
    callback()
  }
}

var isEnglish = (rule, value, callback) => {
  if (value && !validate.isEnglish(value)) {
    callback(new Error('只能包含英文字符。'))
  } else {
    callback()
  }
}
var isTel = (rule, value, callback) => {
  if (value && !validate.isTel(value)) {
    callback(new Error('请正确填写您的联系方式'))
  } else {
    callback()
  }
}

var isQq = (rule, value, callback) => {
  if (value && !validate.isQq(value)) {
    callback(new Error('请正确填写您QQ号码'))
  } else {
    callback()
  }
}

var isZipCode = (rule, value, callback) => {
  if (value && !validate.isZipCode(value)) {
    callback(new Error('请正确填写您的邮政编码'))
  } else {
    callback()
  }
}

var isPwd = (rule, value, callback) => {
  if (value && !validate.isPwd(value)) {
    callback(new Error('密码中必须包含字母、数字、特称字符，且8~30个字符'))
  } else {
    callback()
  }
}

var ip = (rule, value, callback) => {
  if (value && !validate.ip(value)) {
    callback(new Error('请填写正确的IP地址。'))
  } else {
    callback()
  }
}

var stringCheck = (rule, value, callback) => {
  if (value && !validate.stringCheck(value)) {
    callback(new Error('只能包含中文、英文、数字、下划线等字符'))
  } else {
    callback()
  }
}

var isChinese = (rule, value, callback) => {
  if (value && !validate.isChinese(value)) {
    callback(new Error('匹配汉字'))
  } else {
    callback()
  }
}

var isChineseChar = (rule, value, callback) => {
  if (value && !validate.isChineseChar(value)) {
    callback(new Error('匹配中文(包括汉字和字符)'))
  } else {
    callback()
  }
}
var isRightfulString = (rule, value, callback) => {
  if (value && !validate.isRightfulString(value)) {
    callback(new Error('判断是否为合法字符(a-zA-Z0-9-_)'))
  } else {
    callback()
  }
}

var isPlateNo = (rule, value, callback) => {
  if (value && !validate.isPlateNo(value)) {
    callback(new Error('请输入合法车牌号'))
  } else {
    callback()
  }
}

export default {isAlphabets, isCardId, isChinese, isChineseChar, ip, isFloatGteZero, isNum, stringCheck, isDigits, isEmail, isEnglish, isFloat, isFloatEqZero, isFloatGtZero, isFloatLtZero, isFloatLteZero, isFloatNEqZero, isIntEqZero, isIntGtZero, isIntGteZero, isIntLtZero, isIntLteZero, isIntNEqZero, isInteger, isLowerCase, isMobile, isName, isNull, isNumber, isPhone, isPlateNo, isPwd, isQq, isRightfulString, isTel, isURL, isUpperCase, isZipCode}

也就是第二个js文件都是用的都是第一个js文件中的校验方法，第二个文件中的函数是给el-form-item自定义校验用的

为了方便使用，我们可以将第二个js文件（validator.js）中的函数挂载在Vue的原型上，拱全局使用

main.js 

import Vue from 'vue'

import validator from '@/utils/validator'

Vue.prototype.validator = validator

这样在表单上就可以直接使用了，如下： 

<el-form-item 
  label="IP地址" 
  prop="ip"
  :rules="[{required: true, message:'IP地址不能为空', trigger:'blur'}, {validator: validator.ip, trigger:'blur'}]"
>
  <el-input 
    size="mini" 
    v-model="inputForm.ip" 
    placeholder="请填写IP地址"
  ></el-input>
</el-form-item>