vue.js常用的自定義校驗方式

更新時間：2026年04月24日 09:43:20 作者：單人影i

文章介紹了使用ElementUI時如何自定義校驗規(guī)則,包括將校驗邏輯封裝為JavaScript文件,通過`validator`和`trigger`屬性定義校驗方法和觸發(fā)條件等

vue.js常用自定義校驗

最好把所有的校驗都寫成js 然后引用.validate.js

const resultMsg = {
  result: false,
  message: ''
}
export function isvalidUsername(str) {
  const valid_map = ['admin', 'editor']
  return valid_map.indexOf(str.trim()) >= 0
}
/* 合法uri*/
export function validateURL(textval) {
  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.,?'\\+&%$#=~_-]+))*$/
  return urlregex.test(textval)
}
/* 小寫字母*/
export function validateLowerCase(str) {
  const reg = /^[a-z]+$/
  return reg.test(str)
}
/* 大寫字母*/
export function validateUpperCase(str) {
  const reg = /^[A-Z]+$/
  return reg.test(str)
}
/* 大小寫字母*/
export function validatAlphabets(str) {
  const reg = /^[A-Za-z]+$/
  return reg.test(str)
}
/*判斷輸入的EMAIL格式是否正確 */
export function validateIsEmail(str) {
  if (str.length != 0) {
    const reg = /[\w!#$%&'*+/=?^_`{|}~-]+(?:\.[\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\w](?:[\w-]*[\w])?\.)+[\w](?:[\w-]*[\w])?/;
    return reg.test(str);
  }
}
/*判斷輸入的手機號格式是否正確 */
export function validateIsPhone(str) {
  if (str.length != 0) {
    const reg = /^1[0-9]{10}$/;
    return reg.test(str);
  }
}
/*驗證價格*/
export function validatePrice(str) {
  const reg = /(^[1-9]([0-9]{1,4})?(\.[0-9]{1,2})?$)|(^(0){1}$)|(^[0-9]\.[0-9]([0-9])?$)/;
  return reg.test(str)
}
/*驗證正整數(shù)*/
export function validateNum(value) {
  const reg = /^[1-9][0-9]*$/;
  resultMsg.result = reg.test(value);
  resultMsg.message = '請輸入正整數(shù)';
  return resultMsg;
}
/*驗證4位正整數(shù)*/
export function validateNum4(value) {
  const reg = /^0|[1-9][0-9]{0,3}$/;
  resultMsg.result = reg.test(value);
  resultMsg.message = '請輸入數(shù)字值且不大于4位';
  return resultMsg;
}
/*驗證5位正整數(shù)*/
export function validateNum5(value) {
  const reg = /^0|[1-9][0-9]{0,4}$/;
  resultMsg.result = reg.test(value);
  resultMsg.message = '請輸入數(shù)字值且不大于5位';
  return resultMsg;
}
/*驗證1-7位數(shù)字加4位小數(shù)*/
export function validateNum7(value) {
  const reg = /^(0|[1-9][0-9]{0,6})(\.[0-9]{1,4})?$/;
  resultMsg.result = reg.test(value);
  resultMsg.message = '請輸入數(shù)字值且不大于7位或最大四位小數(shù)';
  return resultMsg;
}
/*驗證1-16位數(shù)字加2位小數(shù)*/
export function validateNum16(value) {
  const reg = /^(0|[1-9][0-9]{0,13})(\.[0-9]{1,2})?$/;
  resultMsg.result = reg.test(value);
  resultMsg.message = '請輸入數(shù)字值且不大于14位或最大兩位小數(shù)';
  return resultMsg;
}
/*驗證1-18位數(shù)字加6位小數(shù)*/
export function validateNum18(value) {
  const reg = /^(0|[1-9][0-9]{0,17})(\.[0-9]{1,6})?$/;
  resultMsg.result = reg.test(value);
  resultMsg.message = '請輸入數(shù)字值且不大于18位或最大六位小數(shù)';
  return resultMsg;
}
/*驗證9位正整數(shù)*/
export function validateNum9(value) {
  const reg = /^0|[1-9][0-9]{0,9}$/;
  resultMsg.result = reg.test(value);
  resultMsg.message = '請輸入數(shù)字值且不大于10位';
  return resultMsg;
}
/*驗證12位正整數(shù)*/
export function validateNum12_6(value) {
  const reg = /^(0|[1-9][0-9]{0,11})(\.[0-9]{1,6})?$/;
  resultMsg.result = reg.test(value);
  resultMsg.message = '請輸入數(shù)字值且不大于12位或最大六位小數(shù)';
  return resultMsg;
}
//校驗輸入非中文  true 是中文
export function noChinese(value) {
  const reg = /[\u4e00-\u9fa5]/;
  resultMsg.result = reg.test(value);
  resultMsg.message = '基金代碼不能輸入漢字!';
  return resultMsg;
}
//校驗輸入是否是數(shù)組或點
export function inputNumberOrSpot(value) {
  const reg = /^\d+(?=\.{0,1}\d+$|$)/ ;
  resultMsg.result = reg.test(value);
  resultMsg.message = '請輸入正確的銷售服務費費率!';
  return resultMsg;
}
//校驗輸入是否是數(shù)字（包括正負、小數(shù)點）
export function inputOrNumber(value) {
  const reg = /[-+]*[0-9][.][0-9]+|[-+]*[1-9][0-9]*|^[0]$/ ;
  resultMsg.result = reg.test(value);
  resultMsg.message = '請輸入數(shù)字';
  return resultMsg;
}
//校驗輸入字符是否大于6位(包含數(shù)字字母)
export function validateByte6_18(value) {
  const reg = /^.{6,18}$/;
  resultMsg.result = reg.test(value);
  resultMsg.message = '請輸入至少輸入6位及以上任意字符';
  return resultMsg;
}
//校驗輸入字符是否是路徑格式
export function validateUrl(value) {
  const reg = /^[a-zA-Z]:(((\\(?! )[^/:*?<>\""|\\]+)+\\?)|(\\)?)\s*$/;
  resultMsg.result = reg.test(value);
  resultMsg.message = '請輸入正確的文件路徑';
  return resultMsg;
}
//大寫金額
export function digitUppercase(num) {
  var tmpNum = num;
  var AA = new Array("零", "壹", "貳", "叁", "肆", "伍", "陸", "柒", "捌", "玖");
  var BB = new Array("", "拾", "佰", "仟", "萬", "億", "元", "");
  var CC = new Array("角", "分", "厘");
  var a = ("" + num).replace(/(^0*)/g, "").split("."), k = 0, re = "";
  for (var i = a[0].length - 1; i >= 0; i--) {
    switch (k) {
      case 0:
        re = BB[7] + re;
        break;
      case 4:
        if (!new RegExp("0{4}\\d{" + (a[0].length - i - 1) + "}$").test(a[0]))
          re = BB[4] + re;
        break;
      case 8:
        re = BB[5] + re;
        BB[7] = BB[5];
        k = 0;
        break;
    }
    if (k % 4 == 2 && a[0].charAt(i + 2) != 0 && a[0].charAt(i + 1) == 0)
      re = AA[0] + re;
    if (a[0].charAt(i) != 0)
      re = AA[a[0].charAt(i)] + BB[k % 4] + re;
    k++;
  }
  if (a.length > 1) {// 加上小數(shù)部分(如果有小數(shù)部分)
    if (a[0].length == 0) {
      re += "";
    } else {
      re += BB[6];
    }
    for (var i = 0; i < a[1].length; i++) {
      re += AA[a[1].charAt(i)] + CC[i];
      if (i == 2)
        break;
    }
  }
  if (tmpNum.toString().indexOf(".") == -1) {
    re += "元整";
  }
  // 處理輸入字符0的情況
  if (a == '') {
    re = "零" + re;
  }
  return re;
}
/* 是否郵箱*/
export function validateEMail(rule, value,callback) {
  const reg =/^([a-zA-Z0-9]+[-_\.]?)+@[a-zA-Z0-9]+\.[a-z]+$/;
  if(value==''||value==undefined||value==null){
    callback();
  }else{
    if (!reg.test(value)){
      callback(new Error('請輸入正確的郵箱地址'));
    } else {
      callback();
    }
  }
}
/* 是否身份證號碼*/
export function validateIdNo(rule, value,callback) {
  const reg = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/;
  if(value==''||value==undefined||value==null){
    callback();
  }else {
    if ((!reg.test(value)) && value != '') {
      callback(new Error('請輸入正確的身份證號碼'));
    } else {
      callback();
    }
  }
}
/* 是否手機號碼或者固話*/
export function validatePhoneTwo(rule, value, callback) {
  const reg = /^((0\d{2,3}-\d{7,8})|(1[34578]\d{9}))$/;;
  if (value == '' || value == undefined || value == null) {
    callback();
  } else {
    if ((!reg.test(value)) && value != '') {
      callback(new Error('請輸入正確的電話號碼或者固話號碼'));
    } else {
      callback();
    }
  }
}
/* 是否固話*/
export function validateTelphone(rule, value,callback) {
  const reg =/0\d{2}-\d{7,8}/;
  if(value==''||value==undefined||value==null){
    callback();
  }else {
    if ((!reg.test(value)) && value != '') {
      callback(new Error('請輸入正確的固話（格式：區(qū)號+號碼,如010-1234567）'));
    } else {
      callback();
    }
  }
}

頁面自定義校驗分數(shù)0-100 最多兩位小數(shù)

在校驗規(guī)則里面寫
 answerNum: [{type: 'int', validator: validateFraction, trigger: 'blur'},],
具體方法:
export function validateFraction(rule, value, callback) {
  if (!value) {
    callback();
  }
  var reg = /^\d\.([1-9]{1,2}|[0-9][1-9])$|^[1-9]\d{0,1}(\.\d{1,2}){0,1}$|^100(\.0{1,2}){0,1}$/;
  if (reg.test(value) === false) {
    callback(new Error('請輸入正確成績,最多保留兩位小數(shù)'));
  }
}

在頁面中引入驗證規(guī)則定義的文件，并在export default中定義rule規(guī)則，