一、基本身份證 手機號碼等基本檢驗方式

/**
 * @desc 基於ElementUI Form rules 進行使用, 參考官方文件: http://element-cn.eleme.io/#/zh-CN/component/form [自定義校驗規則]
 * @example  rules: {
 *  ip: [
 *    {required: true, message: '請輸入矩陣IP', trigger: 'blur'},
 *    {validator: this.$rules.ipAddress, trigger: 'blur'}
 *  ]
 * }
 *

 */
export const validater = {

  /**
   * 校驗 包括中文字、英文字母、數字和下劃線
   * 登入賬號校驗
   */
  validateAccount(rule, value, callback) {
    let acount = /^(?!_)(?!.*?_$)[a-zA-Z0-9_\u4e00-\u9fa5]+$/
    if (value && (!(acount).test(value))) {
      callback(new Error('賬號不符合規範'))
    } else {
      callback()
    }
  },

  /**
   * IP地址校驗
   */
  ipAddress(rule, value, callback) {
	if(value && "..." === value){
		callback(new Error('請輸入IP地址'))
	}if (value && !(/((25[0-5]|2[0-4]\d|((1\d{2})|([1-9]?\d)))\.){3}(25[0-5]|2[0-4]\d|((1\d{2})|([1-9]?\d)))/).test(value)) {
      callback(new Error('IP地址不符合規範'))
    } else {
      callback()
    }
  },

  /**
   * 手機號碼校驗
   */
  phoneNumber(rule, value, callback) {
    if (value && (!(/^[1][34578]\d{9}$/).test(value) || !(/^[1-9]\d*$/).test(value) || value.length !== 11)) {
      callback(new Error('手機號碼不符合規範'))
    } else {
      callback()
    }
  },

  /**
   * 電話號碼校驗
   */
  telephoneNumber(rule, value, callback) {
    if (value && (!(/^((0\d{2,3}-\d{7,8})|(1[3584]\d{9}))$/).test(value))) {
      callback(new Error('電話號碼不符合規範'))
    } else {
      callback()
    }
  },

  /**
   * 郵箱校驗
   */
  emailValue(rule, value, callback) {
    let temp = /^[\w.\-]
 
[email protected](?:[a-z0-9]+(?:-[a-z0-9]+)*\.)+[a-z]{2,3}$/
    let tempOne = /^[A-Za-zd]+([-_.][A-Za-zd]+)*@([A-Za-zd]+[-.])+[A-Za-zd]{2,5}$/
    if (value && (!(temp).test(value))) {
      callback(new Error('郵箱格式不符合規範'))
    } else {
      callback()
    }
  },

  /**
   * 身份證號碼校驗
   */
  idCard(rule, value, callback) {
    if (value && (!(/\d{17}[\d|x]|\d{15}/).test(value) || (value.length !== 15 && value.length !== 18))) {
      callback(new Error('身份證號碼不符合規範'))
    } else {
      callback()
    }
  },

  /**
   * 正整數校驗
   */
  integerP(rule, value, callback) {
    if (value && !(/^[1-9]\d*$/).test(value)) {
      callback(new Error('只能填寫正整數'))
    } else {
      callback()
    }
  },

  /**
   * 負整數校驗
   */
  integerN(rule, value, callback) {
    if (value && !(/^-[1-9]\d*$/).test(value)) {
      callback(new Error('只能填寫負整數'))
    } else {
      callback()
    }
  },

  /**
   * 英文字元校驗
   */
  enText(rule, value, callback) {
    // let a = '',
    //   arr = value.split(" ")
    // for (let i = 0; i < arr.length; i++) { //刪除行內空格
    //   a += arr[i];
    // }
    if (value && !(/^[A-Za-z]+$/).test(value)) {
      callback(new Error('只能填寫英文字元'))
    } else {
      callback()
    }
  },

  /**
   * 中文字元英文字元校驗
   */
  ChEnText(rule, value, callback) {
    if (value && !(/^[A-Za-z0-9]+$/).test(value)) {
      callback(new Error('只能填寫數字和英文字元'))
    } else {
      callback()
    }
  },

  /**
   * 中文字元校驗
   */
  cnText(rule, value, callback) {
    // let a = '',
    //   arr = value.split(" ")
    // for (let i = 0; i < arr.length; i++) { //刪除行內空格
    //   a += arr[i];
    // }
    if (value && (/[^\u4e00-\u9fa5]/).test(value)) {
      callback(new Error('只能填寫中文字元'))
    } else {
      callback()
    }
  },

  /**
   * 只能輸入英文或者數字
   */
  enOrnunText (rule, value, callback) {
    if (value && !(/^[A-Za-z0-9]+$/).test(value)) {
      callback(new Error('只能填寫英文或者數字'))
    } else {
      callback()
    }
  },

  /**
   * 20位數字國標編碼校驗，且為正整數
   */
  validateDeviceNo (rule, value, callback) {
    if (value && !(/^[1-9]\d*$/).test(value)) {
      callback(new Error('只能填寫正整數'))
    } else {
      if (!/^[0-9]{20}$/.test(value)) {
        callback(new Error('請輸入20位數字的編碼！'));
      } else {
        callback();
      }
    }

  },

  /**
   *校驗電腦Mac地址
   *以xx-xx-xx-xx-xx-xx的形式輸入（xx為16進位制數字）
   */
  validateMac (rule, value, callback) {
    let temp = /[A-Fa-f0-9]{2}-[A-Fa-f0-9]{2}-[A-Fa-f0-9]{2}-[A-Fa-f0-9]{2}-[A-Fa-f0-9]{2}-[A-Fa-f0-9]{2}/;
    if (!temp.test(value)) {
      callback(new Error('請輸入xx-xx-xx-xx-xx-xx形式的MAC地址！'));
    } else{
      callback();
    }
  },

  /**
   * 校驗地址程式碼或者分組程式碼
   */
  validateCode (rule, value, callback) {
    let num = /^[1-9]\d*$/
    if (value && !(num).test(value)) {
      callback(new Error('只能填寫正整數'))
    } else {
      let codeLen = value.toString().length
      console.log(codeLen)
      if(codeLen > 0 && codeLen % 3 !== 0){
        callback(new Error('輸入的長度必須是3的倍數'))
      }else if(codeLen>18){
        callback(new Error('輸入的長度不能超過18位,請重新輸入'))
      }
      else {
        callback()
      }
    }
  },

  /**
   * 校驗字元長度
   */
  validateLength (rule, value, callback) {
    let codeLen = value.toString().length
    if(codeLen>18){
      callback(new Error('輸入的長度不能超過20位,請重新輸入'))
    }
  },

  /**
   * 數字 ,兩位
   */
  validateTwoNum (rule, value, callback) {
    let temp = /^[1-9]{2}$/;
    if (!temp.test(value)) {
      callback(new Error('請輸入兩位正整數！'));
    } else{
      callback();
    }
  },

  /**
  * 校驗經度是否符合規範
  * 
   */
  checkLongitude(rule, value, callback) {
    let longrg = /^(\-|\+)?(((\d|[1-9]\d|1[0-7]\d|0{1,3})\.\d{0,6})|(\d|[1-9]\d|1[0-7]\d|0{1,3})|180\.0{0,6}|180)$/;
    if(!longrg.test(value)){
      callback(new Error('經度整數部分為0-180,小數部分為0到6位!'));
    } else {
      callback();
    }
    },

 /**
  * 校驗緯度是否符合規範
  * 
  */
  checkLatitude(rule, value, callback) {
  var latreg = /^(\-|\+)?([0-8]?\d{1}\.\d{0,6}|90\.0{0,6}|[0-8]?\d{1}|90)$/;
   if(!latreg.test(value)){
     callback(new Error('緯度整數部分為0-90,小數部分為0到6位!'));
   } else {
     callback();
   }
}
}
 

二、詳細的身份校驗方式

/*比較詳細的身份證校驗*/
Vue.prototype.isIdCard = (idCard) =>{
  let regIdCard=/^(^[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{4})|\d{3}[Xx])$)$/;
  if(regIdCard.test(idCard)){
    if(idCard.length === 18){
      let idCardWi = new Array( 7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5, 8, 4, 2 );
      let idCardY = new Array( 1, 0, 10, 9, 8, 7, 6, 5, 4, 3, 2 );
      let idCardWiSum = 0
      for(let i=0;i<17;i++){
        idCardWiSum+=idCard.substring(i,i+1)*idCardWi[i];
      }
      let idCardMod=idCardWiSum%11
      let idCardLast=idCard.substring(17)
      if(idCardMod === 2){
        if(idCardLast === "X"||idCardLast === "x"){
          return true;
        }else{
          Vue.prototype.$message.warning('身份證號碼錯誤!，請重新輸入')
          return false;
        }
      }else{
        if(idCardLast === idCardY[idCardMod]){
          return true;
        }else{
          Vue.prototype.$message.warning('身份證號碼錯誤!，請重新輸入')
          return false;
        }
      }
    }
  }else{
    Vue.prototype.$message.warning('身份證格式不正確!，請重新輸入')
    return false
  }
}
 

三 、使用方式

/*使用方式*/
rules: {
  mobilePhone: [
    {required: true, message: '請輸入電話號碼', trigger: 'blur'},
    {validator: this.$rules.phoneNumber, trigger: 'blur'}
  ],
    cardId: [
    {required: true, message: '請輸入電話號碼', trigger: 'blur'},
    {validator: this.$rules.idCard, trigger: 'blur'}
  ]
},

簡單的部落格描述只是記錄自己的點點滴滴，若有不當的地方，歡迎指教，謝謝。