快捷導(dǎo)航

前端Vue中常用rules校驗(yàn)規(guī)則(輪子)如電話身份證郵箱等校驗(yàn)方法例子

更新時(shí)間：2023年12月07日 09:51:04 作者：是小橙丶

當(dāng)我們?cè)陂_(kāi)發(fā)應(yīng)用時(shí)經(jīng)常需要對(duì)表單進(jìn)行校驗(yàn),以確保用戶輸入的數(shù)據(jù)符合預(yù)期,這篇文章主要給大家介紹了關(guān)于前端Vue中常用rules校驗(yàn)規(guī)則(輪子)如電話身份證郵箱等校驗(yàn)方法的相關(guān)資料,需要的朋友可以參考下

前言

例如：隨著前端的發(fā)展，很多功能都需要在前端填寫時(shí)就先校驗(yàn)是否填寫正確，則博主寫了一些校驗(yàn)輪子供大家使用。

一、正則是什么？

正則表達(dá)式(regular expression)是一個(gè)描述字符規(guī)則的對(duì)象?？梢杂脕?lái)檢查一個(gè)字符串是否含有某個(gè)子字符串，將匹配的子字符串做替換或者從某個(gè)字符串中取出符合某個(gè)條件的子串等。

為什么要用正則：

前端往往有大量的表單數(shù)據(jù)校驗(yàn)工作，采用正則表達(dá)式會(huì)使得數(shù)據(jù)校驗(yàn)的工作量大大減輕。常用效果：郵箱、手機(jī)號(hào)、身份證號(hào)等

二、造輪子

1.電話號(hào)碼/手機(jī)號(hào)/身份證/郵箱校驗(yàn)

/**
 * @description 判斷是否是手機(jī)號(hào)
 * @param value
 * @returns {boolean}
 */
export function isPhone(value) {
  const reg = /^1\d{10}$/
  return reg.test(value)
}

// 電話號(hào)碼驗(yàn)證
export function validatePhone(rule, value, callback) {
  const mobilereg = /^[1][3,4,5,6,7,8,9][0-9]{9}$/ // 手機(jī)
  const phonereg = /^0\d{2,3}-?\d{7,8}$/ // 固話
  const noAreaPhonereg = /^[1-9]\d{6,7}$/ // 無(wú)區(qū)號(hào)固話
  rule.phonetype = rule.phonetype || 'mobile'
  if (rule.phonetype === 'mobile') {
    if (value && !mobilereg.test(value))
      callback(new Error(i18n.t('common.validatePhone')))
    else callback()
  }

  if (rule.phonetype === 'phone') {
    if (value && !phonereg.test(value))
      callback(new Error(i18n.t('common.validatePhone')))
    else callback()
  }

  if (rule.phonetype === 'all') {
    if (value && !phonereg.test(value) && !mobilereg.test(value))
      callback(new Error(i18n.t('common.validatePhone')))
    else callback()
  }

  if (rule.phonetype === 'allAndNoArea') {
    if (
      value &&
      !phonereg.test(value) &&
      !mobilereg.test(value) &&
      !noAreaPhonereg.test(value)
    )
      callback(new Error(i18n.t('common.validatePhone')))
    else callback()
  }
}

/**
 * @description 判斷是否是身份證號(hào)(第二代)
 * @param value
 * @returns {boolean}
 */
export function isIdCard(value) {
  const reg =
    /^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/
  return reg.test(value)
}

/**
 * @description 判斷是否是郵箱
 * @param value
 * @returns {boolean}
 */
// 郵箱驗(yàn)證
export function validateEmail(rule, value, callback) {
  const reg = /^([a-zA-Z]|[0-9])(\w|\-|\.)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/
  if (!value) return callback(new Error('請(qǐng)輸入收件人郵箱'))
  if (!reg.test(value)) {
    callback(new Error(i18n.t('common.validateEmail')))
  } else {
    callback()
  }
}


/**
 * validate IDCard 身份證
 * @returns
 */
export function validateIDCard(val) {
  if (checkCode(val)) {
    var date = val.substring(6, 14)
    if (checkDate(date)) {
      if (checkProv(val.substring(0, 2))) {
        return true
      }
    }
  }
  return false
}
/**
 * check Prov
 */
var checkProv = function (val) {
  var pattern = /^[1-9][0-9]/
  var provs = {
    11: '北京',
    12: '天津',
    13: '河北',
    14: '山西',
    15: '內(nèi)蒙古',
    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: '臺(tái)灣',
    81: '香港',
    82: '澳門',
  }
  if (pattern.test(val)) {
    if (provs[val]) {
      return true
    }
  }
  return false
}
/**
 * check Date
 */
var checkDate = function (val) {
  var pattern = /^(18|19|20)\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)$/
  if (pattern.test(val)) {
    var year = val.substring(0, 4)
    var month = val.substring(4, 6)
    var date = val.substring(6, 8)
    var date2 = new Date(year + '-' + month + '-' + date)
    if (date2 && date2.getMonth() == parseInt(month) - 1) {
      return true
    }
  }
  return false
}
// 校驗(yàn)碼校驗(yàn)
var checkCode = function (val) {
  var p =
    /^[1-9]\d{5}(18|19|20)\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/
  var factor = [7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5, 8, 4, 2]
  var parity = [1, 0, 'X', 9, 8, 7, 6, 5, 4, 3, 2]
  var code = val.substring(17)
  if (p.test(val)) {
    var sum = 0
    for (var i = 0; i < 17; i++) {
      sum += val[i] * factor[i]
    }
    if (parity[sum % 11] == code.toUpperCase()) {
      return true
    }
  }
  return false
}

2.外鏈 IP 傳統(tǒng)網(wǎng)站端口號(hào)判斷

/**
 * @description 判讀是否為外鏈
 * @param path
 * @returns {boolean}
 */
export function isExternal(path) {
  return /^(https?:|mailto:|tel:)/.test(path)
}

/**
 * @description 判斷是否為IP
 * @param ip
 * @returns {boolean}
 */
export function isIP(ip) {
  const 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])$/
  return reg.test(ip)
}

/**
 * @description 判斷是否是傳統(tǒng)網(wǎng)站
 * @param url
 * @returns {boolean}
 */
export function isUrl(url) {
  const reg =
    /^(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.,?'\\+&%$#=~_-]+))*$/
  return reg.test(url)
}

/**
 * @description 判斷是否是端口號(hào)
 * @param value
 * @returns {boolean}
 */
export function isPort(value) {
  const reg =
    /^([0-9]|[1-9]\d|[1-9]\d{2}|[1-9]\d{3}|[1-5]\d{4}|6[0-4]\d{3}|65[0-4]\d{2}|655[0-2]\d|6553[0-5])$/
  return reg.test(value)
}

3.大寫字母/小寫字母/字符串/數(shù)組

/**
 * @description 判斷是否是小寫字母
 * @param value
 * @returns {boolean}
 */
export function isLowerCase(value) {
  const reg = /^[a-z]+$/
  return reg.test(value)
}

/**
 * @description 判斷是否是大寫字母
 * @param value
 * @returns {boolean}
 */
export function isUpperCase(value) {
  const reg = /^[A-Z]+$/
  return reg.test(value)
}

/**
 * @description 判斷是否是大寫字母開(kāi)頭
 * @param value
 * @returns {boolean}
 */
export function isAlphabets(value) {
  const reg = /^[A-Za-z]+$/
  return reg.test(value)
}

/**
 * @description 判斷是否是字符串
 * @param value
 * @returns {boolean}
 */
export function isString(value) {
  return typeof value === 'string' || value instanceof String
}

/**
 * @description 判斷是否是數(shù)組
 * @param arg
 */
export function isArray(arg) {
  if (typeof Array.isArray === 'undefined') {
    return Object.prototype.toString.call(arg) === '[object Array]'
  }
  return Array.isArray(arg)
}

4.經(jīng)緯度判斷

/**
 * @description 判斷經(jīng)度 -180.0～+180.0（整數(shù)部分為0～180，必須輸入1到5位小數(shù)）
 * @param value
 * @returns {boolean}
 */
export function isLongitude(value) {
  const reg = /^[-|+]?(0?\d{1,2}\.\d{1,5}|1[0-7]?\d\.\d{1,5}|180\.0{1,5})$/
  return reg.test(value)
}

/**
 * @description 判斷緯度 -90.0～+90.0（整數(shù)部分為0～90，必須輸入1到5位小數(shù)）
 * @param value
 * @returns {boolean}
 */
export function isLatitude(value) {
  const reg = /^[-|+]?([0-8]?\d\.\d{1,5}|90\.0{1,5})$/
  return reg.test(value)
}

5.rtsp校驗(yàn)

/**
 * @description rtsp校驗(yàn)，只要有rtsp://
 * @param value
 * @returns {boolean}
 */
export function isRTSP(value) {
  const reg =
    /^rtsp:\/\/([a-z]{0,10}:.{0,10}@)?(\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])$/
  const reg1 =
    /^rtsp:\/\/([a-z]{0,10}:.{0,10}@)?(\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]):[0-9]{1,5}/
  const reg2 =
    /^rtsp:\/\/([a-z]{0,10}:.{0,10}@)?(\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])\//
  return reg.test(value) || reg1.test(value) || reg2.test(value)
}

6.表單的一些校驗(yàn)

// 只允許輸入數(shù)字或字母
export function validateIntOrLet(rule, value, callback) {
  const reg = /^[0-9a-zA-Z]+$/
  if (!reg.test(value)) {
    callback(new Error('只允許輸入數(shù)字或字母'))
  } else {
    callback()
  }
}

// 只允許輸入數(shù)字
export function validateInt(rule, value, callback) {
  const reg = /^[0-9]+$/
  if (value && !reg.test(value)) {
    callback(new Error(i18n.t('common.validateInt')))
  } else if (value && 10 < value.length) {
    callback(new Error(i18n.t('common.dataLengthTip', { number: 10 })))
  } else {
    callback()
  }
}


// 只允許輸入正整數(shù)
export function validateIntNumber(rule, value, callback) {
  const reg = /^[1-9]\d*$/
  if (value && !reg.test(value)) {
    callback(new Error(i18n.t('common.validatePositiveInt')))
  } else {
    callback()
  }
}


// 只允許輸入正整數(shù)或者含有1到4位小數(shù)的數(shù)字  0/0.0001/123
export function validateFloatNumbertoFixed(rule, value, callback) {
  value = `${value}`.trim()
  let n = Number(value)
  if (isNaN(n)) {
    return callback(new Error('請(qǐng)輸入數(shù)字'))
  }

  if (n === 0) {
    return callback()
  }

  // 可見(jiàn)小數(shù)位
  let { decimalPlaces, message } = rule
  decimalPlaces = decimalPlaces || 4
  // console.log('validateIntNumber:', rule)
  // var reg = /^[1-9]\d*(\.\d{1,4})?$/ //1到4位小數(shù)
  const reg = new RegExp(`^\\d+(\\.\\d{1,${decimalPlaces}})?$`)
  if (value && !reg.test(value)) {
    callback(new Error(message || '只允許輸入正整數(shù)或者含有1到4位小數(shù)的數(shù)字'))
  } else {
    return callback()
  }
}

三、輪子使用實(shí)例

import { validateFloatNumbertoFixed } from '@/utils/validate'

rules: {
    salePrice: [
          {
            required: true,
            message: '必填字段',
            trigger: 'change',
          },
          {
            decimalPlaces: 2,
            message: '只允許輸入正整數(shù)或者含有1到2位小數(shù)的數(shù)字',
            validator: validateFloatNumbertoFixed,
            trigger: 'blur',
          },
        ],
}

總結(jié)

例如：以上就是今天要講的內(nèi)容，本文僅僅造了一些校驗(yàn)的輪子，為我們前端工作帶來(lái)了極大的便利，有需要的同學(xué)自取

到此這篇關(guān)于前端Vue中常用rules校驗(yàn)規(guī)則(輪子)如電話身份證郵箱等校驗(yàn)方法的文章就介紹到這了,更多相關(guān)前端Vue常用rules校驗(yàn)規(guī)則內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: