目錄

• 一、表單效驗(yàn)規(guī)則的使用
• 1、自定義效驗(yàn)規(guī)則介紹
• 2、綁定效驗(yàn)方法
• 3、添加效驗(yàn)
• 4、效驗(yàn)判斷
• 5、清除效驗(yàn)規(guī)則
• 二、常見(jiàn)表單效驗(yàn)規(guī)則
• （一）pattern驗(yàn)證
• （二）validator.js文件中常見(jiàn)的驗(yàn)證方法

一、表單效驗(yàn)規(guī)則的使用

1、自定義效驗(yàn)規(guī)則介紹

• 是否必填： required: true || fasle
• 效驗(yàn)消息提示：message: "提示信息"
• 效驗(yàn)觸發(fā)方式：trigger："change" || "blur"
• 根據(jù)正則表達(dá)式驗(yàn)證： pattern
• 最大長(zhǎng)度和最小長(zhǎng)度： max = 10 和 min = 1
• 數(shù)據(jù)轉(zhuǎn)換：transform（value）{return}
• 自定義校驗(yàn)功能：validador: fn(rule, value, callback)

2、綁定效驗(yàn)方法

• 在<el-form>中添加屬性 :rule="rules"；
• 在<el-form-item>中添加prop屬性，將屬性值對(duì)應(yīng)寫(xiě)在rules規(guī)則中。

 <el-form :model="ruleForm" :rules="rules"><el-form-item label="姓名：" prop="name">  <el-input    v-model.trim="personList.name"    placeholder="請(qǐng)輸入"  /></el-form-item></el-form>

3、添加效驗(yàn)

方法一：直接在index.vue頁(yè)面中用 pattern 進(jìn)行正則表達(dá)式驗(yàn)證

name: [   { pattern: pattern驗(yàn)證, required: true, message: "提示信息", trigger: "blur" }]

案例：

data() {     return { rules: {     name: [     { required: false, message: "請(qǐng)輸入姓名", trigger: "blur" },     { min: 1, max: 10, message: "長(zhǎng)度不超過(guò)10個(gè)字符", trigger: "blur" }  ],      number: [       { required: true, message: "數(shù)字", trigger: "blur" },       { pattern: /^[0-9]+.?[0-9]{1,2}?$/ , message: "金額為數(shù)字", trigger: "blur"},     ]    }  }}

//表單限制 input 輸入框只能輸入純數(shù)字oninput = "value=value.replace(/[^\d]/g,"")"   //案例<el-form-item label="員工號(hào)：">      <el-inputv-model.trim="PersonnelData.staffId"oninput="value=value.replace(/[^\d]/g,"")"clearableplaceholder="請(qǐng)輸入員工號(hào)"      /> </el-form-item>

• 方法二 ：直接在index.vue頁(yè)面中的data里面定義驗(yàn)證方法
• 使用語(yǔ)法：{validator:驗(yàn)證方法,trigger:驗(yàn)證觸發(fā)}

data() {    const validatePass = (rule, value, callback) => {       if (value.length < 3) { callback(new Error("密碼不能小于3位"));       } else { callback();       }     }; return { rules: {   password: [   { required: true, trigger: "blur", validator: validatePass }, ]    }  }}

方法三：新開(kāi)一個(gè)文件夾（validate.js）定義所有需要用到的驗(yàn)證規(guī)則

然后在頁(yè)面(index.vue)中引入驗(yàn)證規(guī)則定義的文件，并在export default中定義rule規(guī)則

使用語(yǔ)法：{validator:驗(yàn)證方法,trigger:驗(yàn)證觸發(fā)}

4、效驗(yàn)判斷

驗(yàn)證設(shè)置效驗(yàn)處是否已完成填寫(xiě)，若無(wú)，則效驗(yàn)處有提示

handle() {  this.$refs["admin"].validate((valid) => {    if(valid){    .......     }   })}

5、清除效驗(yàn)規(guī)則

Close() {  this.$refs["dateForm"].clearValidate();  this.dateForm = {}}

二、常見(jiàn)表單效驗(yàn)規(guī)則

（一）pattern驗(yàn)證

1、是否合法IP地址:pattern:/^(\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])$/, 2.是否手機(jī)號(hào)碼或者固話pattern:/^((0\d{2,3}-\d{7,8})|(1[34578]\d{9}))$/, 3. 是否身份證號(hào)碼pattern:/(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/, 4.是否郵箱pattern:/^([a-zA-Z0-9]+[-_\.]?)+@[a-zA-Z0-9]+\.[a-z]+$/, 5.整數(shù)填寫(xiě)pattern:/^-?[1-9]\d*$/, 6.正整數(shù)填寫(xiě)pattern:/^[1-9]\d*$/, 7.小寫(xiě)字母pattern:/^[a-z]+$/, 8.大寫(xiě)字母pattern:/^[A-Z]+$/, 9.大小寫(xiě)混合pattern:/^[A-Za-z]+$/, 10.多個(gè)8位數(shù)字格式(yyyyMMdd)并以逗號(hào)隔開(kāi)pattern:/^\d{8}(\,\d{8})*$/, 11.數(shù)字加英文，不包含特殊字符pattern:/^[a-zA-Z0-9]+$/, 12.前兩位是數(shù)字后一位是英文pattern:/^\d{2}[a-zA-Z]+$/, 13.密碼校驗(yàn)（6-20位英文字母、數(shù)字或者符號(hào)（除空格），且字母、數(shù)字和標(biāo)點(diǎn)符號(hào)至少包含兩種）pattern:/^(?![\d]+$)(?![a-zA-Z]+$)(?![^\da-zA-Z]+$)([^\u4e00-\u9fa5\s]){6,20}$/, 14.中文校驗(yàn)pattern:/^[\u0391-\uFFE5A-Za-z]+$/,

（二）validator.js文件中常見(jiàn)的驗(yàn)證方法

1、是否合法IP地址export function validateIP(rule, value,callback) {  if(value==""||value==undefined||value==null){    callback();  }else {    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])$/;    if ((!reg.test(value)) && value != "") {      callback(new Error("請(qǐng)輸入正確的IP地址"));    } else {      callback();    }  }} 2、是否手機(jī)號(hào)碼或者固話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("請(qǐng)輸入正確的電話號(hào)碼或者固話號(hào)碼"));    } else {      callback();    }  }} 3、是否固話export function validateTelphone(rule, value,callback) {  const reg =/0\d{2,3}-\d{7,8}/;  if(value==""||value==undefined||value==null){    callback();  }else {    if ((!reg.test(value)) && value != "") {      callback(new Error("請(qǐng)輸入正確的固定電話）"));    } else {      callback();    }  }} 4、是否手機(jī)號(hào)碼export function validatePhone(rule, value,callback) {  const reg =/^[1][3-9][0-9]{9}$/;  if(value==""||value==undefined||value==null){    callback();  }else {    if ((!reg.test(value)) && value != "") {      callback(new Error("請(qǐng)輸入正確的電話號(hào)碼"));    } else {      callback();    }  }}5、是否身份證號(hào)碼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("請(qǐng)輸入正確的身份證號(hào)碼"));    } else {      callback();    }  }} 6、是否郵箱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("請(qǐng)輸入正確的郵箱"));    } else {      callback();    }  }} 7、合法urlexport function validateURL(url) {  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(url);} 8、驗(yàn)證內(nèi)容是否包含英文數(shù)字以及下劃線export function isPassword(rule, value, callback) {  const reg =/^[_a-zA-Z0-9]+$/;  if(value==""||value==undefined||value==null){    callback();  } else {    if (!reg.test(value)){      callback(new Error("僅由英文字母，數(shù)字以及下劃線組成"));    } else {      callback();    }  }} 9、自動(dòng)檢驗(yàn)數(shù)值的范圍export function checkMax20000(rule, value, callback) {  if (value == "" || value == undefined || value == null) {    callback();  } else if (!Number(value)) {    callback(new Error("請(qǐng)輸入[1,20000]之間的數(shù)字"));  } else if (value < 1 || value > 20000) {    callback(new Error("請(qǐng)輸入[1,20000]之間的數(shù)字"));  } else {    callback();  }} 10、驗(yàn)證數(shù)字輸入框最大數(shù)值export function checkMaxVal(rule, value,callback) {  if (value < 0 || value > 最大值) {    callback(new Error("請(qǐng)輸入[0,最大值]之間的數(shù)字"));  } else {    callback();  }} 11、驗(yàn)證是否1-99之間export function isOneToNinetyNine(rule, value, callback) {  if (!value) {    return callback(new Error("輸入不可以為空"));  }  setTimeout(() => {    if (!Number(value)) {      callback(new Error("請(qǐng)輸入正整數(shù)"));    } else {      const re = /^[1-9][0-9]{0,1}$/;      const rsCheck = re.test(value);      if (!rsCheck) {callback(new Error("請(qǐng)輸入正整數(shù)，值為【1,99】"));      } else {callback();      }    }  }, 0);} 12、驗(yàn)證是否整數(shù)export function isInteger(rule, value, callback) {  if (!value) {    return callback(new Error("輸入不可以為空"));  }  setTimeout(() => {    if (!Number(value)) {      callback(new Error("請(qǐng)輸入正整數(shù)"));    } else {      const re = /^[0-9]*[1-9][0-9]*$/;      const rsCheck = re.test(value);      if (!rsCheck) {callback(new Error("請(qǐng)輸入正整數(shù)"));      } else {callback();      }    }  }, 0);} 13、驗(yàn)證是否整數(shù),非必填export function isIntegerNotMust(rule, value, callback) {  if (!value) {    callback();  }  setTimeout(() => {    if (!Number(value)) {      callback(new Error("請(qǐng)輸入正整數(shù)"));    } else {      const re = /^[0-9]*[1-9][0-9]*$/;      const rsCheck = re.test(value);      if (!rsCheck) {callback(new Error("請(qǐng)輸入正整數(shù)"));      } else {callback();      }    }  }, 1000);} 14、 驗(yàn)證是否是[0-1]的小數(shù)export function isDecimal(rule, value, callback) {  if (!value) {    return callback(new Error("輸入不可以為空"));  }  setTimeout(() => {    if (!Number(value)) {      callback(new Error("請(qǐng)輸入[0,1]之間的數(shù)字"));    } else {      if (value < 0 || value > 1) {callback(new Error("請(qǐng)輸入[0,1]之間的數(shù)字"));      } else {callback();      }    }  }, 100);} 15、 驗(yàn)證是否是[1-10]的小數(shù),即不可以等于0export function isBtnOneToTen(rule, value, callback) {  if (typeof value == "undefined") {    return callback(new Error("輸入不可以為空"));  }  setTimeout(() => {    if (!Number(value)) {      callback(new Error("請(qǐng)輸入正整數(shù)，值為[1,10]"));    } else {      if (!(value == "1" || value == "2" || value == "3" || value == "4" || value == "5" || value == "6" || value == "7" || value == "8" || value == "9" || value == "10")) {callback(new Error("請(qǐng)輸入正整數(shù)，值為[1,10]"));      } else {callback();      }    }  }, 100);} 16、驗(yàn)證是否是[1-100]的小數(shù),即不可以等于0export function isBtnOneToHundred(rule, value, callback) {  if (!value) {    return callback(new Error("輸入不可以為空"));  }  setTimeout(() => {    if (!Number(value)) {      callback(new Error("請(qǐng)輸入整數(shù)，值為[1,100]"));    } else {      if (value < 1 || value > 100) {callback(new Error("請(qǐng)輸入整數(shù)，值為[1,100]"));      } else {callback();      }    }  }, 100);} 17、驗(yàn)證是否是[0-100]的小數(shù)export function isBtnZeroToHundred(rule, value, callback) {  if (!value) {    return callback(new Error("輸入不可以為空"));  }  setTimeout(() => {    if (!Number(value)) {      callback(new Error("請(qǐng)輸入[1,100]之間的數(shù)字"));    } else {      if (value < 0 || value > 100) {callback(new Error("請(qǐng)輸入[1,100]之間的數(shù)字"));      } else {callback();      }    }  }, 100);} 18、驗(yàn)證端口是否在[0,65535]之間export function isPort(rule, value, callback) {  if (!value) {    return callback(new Error("輸入不可以為空"));  }  setTimeout(() => {    if (value == "" || typeof(value) == undefined) {      callback(new Error("請(qǐng)輸入端口值"));    } else {      const re = /^([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])$/;      const rsCheck = re.test(value);      if (!rsCheck) {callback(new Error("請(qǐng)輸入在[0-65535]之間的端口值"));      } else {callback();      }    }  }, 100);} 19、驗(yàn)證端口是否在[0,65535]之間，非必填,isMust表示是否必填export function isCheckPort(rule, value, callback) {  if (!value) {    callback();  }  setTimeout(() => {    if (value == "" || typeof(value) == undefined) {      //callback(new Error("請(qǐng)輸入端口值"));    } else {      const re = /^([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])$/;      const rsCheck = re.test(value);      if (!rsCheck) {callback(new Error("請(qǐng)輸入在[0-65535]之間的端口值"));      } else {callback();      }    }  }, 100);} 20、小寫(xiě)字母export function validateLowerCase(val) {  const reg = /^[a-z]+$/;  return reg.test(val);} 21、兩位小數(shù)驗(yàn)證const validateValidity = (rule, value, callback) => {  if (!/(^[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^(0){1}$)|(^[0-9]\.[0-9]([0-9])?$)/.test(value)) {    callback(new Error("最多兩位小數(shù)！！！"));  } else {    callback();  }}; 22、是否大寫(xiě)字母export function validateUpperCase(val) {  const reg = /^[A-Z]+$/;  return reg.test(val);} 23、是否大小寫(xiě)字母export function validatAlphabets(val) {  const reg = /^[A-Za-z]+$/;  return reg.test(val);} 24、密碼校驗(yàn)export const validatePsdReg = (rule, value, callback) => {  if (!value) {    return callback(new Error("請(qǐng)輸入密碼"))  }  if (!/^(?![\d]+$)(?![a-zA-Z]+$)(?![^\da-zA-Z]+$)([^\u4e00-\u9fa5\s]){6,20}$/.test(value)) {    callback(new Error("請(qǐng)輸入6-20位英文字母、數(shù)字或者符號(hào)（除空格），且字母、數(shù)字和標(biāo)點(diǎn)符號(hào)至少包含兩種"))  } else {    callback()  }} 25、中文校驗(yàn)export const validateContacts = (rule, value, callback) => {  if (!value) {    return callback(new Error("請(qǐng)輸入中文"))  }  if (!/^[\u0391-\uFFE5A-Za-z]+$/.test(value)) {    callback(new Error("不可輸入特殊字符"))  } else {    callback()  }} 26、身份證校驗(yàn)export const ID = (rule, value, callback) => {    if (!value) {      return callback(new Error("身份證不能為空"))    }    if (! /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/.test(value)) {      callback(new Error("請(qǐng)輸入正確的二代身份證號(hào)碼"))    } else {      callback()    }} 27、賬號(hào)校驗(yàn)export const validateCode = (rule, value, callback) => {  if (!value) {    return callback(new Error("請(qǐng)輸入賬號(hào)"))  }  if (!/^(?![0-9]*$)(?![a-zA-Z]*$)[a-zA-Z0-9]{6,20}$/.test(value)) {    callback(new Error("賬號(hào)必須為6-20位字母和數(shù)字組合"))  } else {    callback()  }} 28、純數(shù)字校驗(yàn)export const validateNumber = (rule, value, callback) => {    let numberReg = /^\d+$|^\d+[.]?\d+$/    if (value !== "") {if (!numberReg.test(value)) {    callback(new Error("請(qǐng)輸入數(shù)字"))} else {    callback()}    } else {callback(new Error("請(qǐng)輸入值"))    }} 29、最多一位小數(shù)const onePoint = (rule, value, callback) => {  if (!/^[0-9]+([.]{1}[0-9]{1})?$/.test(value)) {    callback(new Error("最多一位小數(shù)！！！"));  } else {    callback();  }};

到此這篇關(guān)于Vue Element UI 表單自定義效驗(yàn)規(guī)則的文章就介紹到這了,更多相關(guān)vue Element UI表單自定義效驗(yàn)內(nèi)容請(qǐng)搜索以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持！