vue 使用rules對表單字段進行校驗的步驟

在實際開發過程中，發現以下的寫法比較累贅，因為在后面的項目中，繼續優化表單驗證的方法，讓代碼更簡潔。主要的修改是驗證方法的修改和調用

以前驗證表單字段的最大長度，description: [{ max: 200, message: ’最大長度為200個字符’, trigger: ’blur’ }]

現在寫法：description: [validateLen(200)]

其中，validateLen是我封裝的一個方法。

使用步驟：

1、在uitls文件夾中新建一個validate.js文件。

2、定義需要驗證的方法

3、在需要使用的頁面中引入import { validateLen, validateChart_ } from ’@/utils/validate’

4、在用于校驗的rules中使用。例如：description: [validateLen(200)]

具體寫法：參考如下。只是把舊的寫法統一封裝成了return 進行輸出。少寫很多代碼，省事整潔

// 是否必填export function validateNecessary(tipInfo = ’請輸入’, trigger = ’blur’, isNeces = true,) { return { required: isNeces, message: tipInfo, trigger }}// 驗證最大長度export function validateLen(len = 20) { return { max: len, message: ’最大長度為’ + len + ’個字符’, trigger: ’blur’ }}

基于element-ui

1、在代碼中，添加屬性：:rule

<el-form :model='form' :rules='rules' ref='form' label-width='150px'></el-form>

并且，在<el-form-item>中添加prop屬性，對應rules中的規則

2、新開一個文件夾（validate.js）定義驗證規則

3、在頁面(index.vue)中引入驗證規則定義的文件，并在export default中定義rule規則，使用語法：{validator:驗證方法,trigger:驗證觸發}

4、以下是validator.js文件的部分驗證方法

/*是否合法IP地址*/export function validateIP(rule, value,callback) { if(value==’’||value==undefined||value==null){ callback(); }else { const reg = /^(d{1,2}|1dd|2[0-4]d|25[0-5]).(d{1,2}|1dd|2[0-4]d|25[0-5]).(d{1,2}|1dd|2[0-4]d|25[0-5]).(d{1,2}|1dd|2[0-4]d|25[0-5])$/; if ((!reg.test(value)) && value != ’’) { callback(new Error(’請輸入正確的IP地址’)); } else { callback(); } }}/* 是否手機號碼或者固話*/export function validatePhoneTwo(rule, value, callback) { const reg = /^((0d{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 =/0d{2}-d{7,8}/; if(value==’’||value==undefined||value==null){ callback(); }else { if ((!reg.test(value)) && value != ’’) { callback(new Error(’請輸入正確的固話（格式：區號+號碼,如010-1234567）’)); } else { callback(); } }}/* 是否手機號碼*/export function validatePhone(rule, value,callback) { const reg =/^[1][3,4,5,7,8][0-9]{9}$/; if(value==’’||value==undefined||value==null){ callback(); }else { if ((!reg.test(value)) && 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 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(); } }}/* 合法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 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(’密碼僅由英文字母，數字以及下劃線組成’)); } else { callback(); } }}/*自動檢驗數值的范圍*/export function checkMax20000(rule, value, callback) { if (value == ’’ || value == undefined || value == null) { callback(); } else if (!Number(value)) { callback(new Error(’請輸入[1,20000]之間的數字’)); } else if (value < 1 || value > 20000) { callback(new Error(’請輸入[1,20000]之間的數字’)); } else { callback(); }}//驗證數字輸入框最大數值,32767export function checkMaxVal(rule, value,callback) { if (value < 0 || value > 32767) { callback(new Error(’請輸入[0,32767]之間的數字’)); } else { callback(); }}//驗證是否1-99之間export function isOneToNinetyNine(rule, value, callback) { if (!value) { return callback(new Error(’輸入不可以為空’)); } setTimeout(() => { if (!Number(value)) { callback(new Error(’請輸入正整數’)); } else { const re = /^[1-9][0-9]{0,1}$/; const rsCheck = re.test(value); if (!rsCheck) { callback(new Error(’請輸入正整數，值為【1,99】’)); } else { callback(); } } }, 0);}// 驗證是否整數export function isInteger(rule, value, callback) { if (!value) { return callback(new Error(’輸入不可以為空’)); } setTimeout(() => { if (!Number(value)) { callback(new Error(’請輸入正整數’)); } else { const re = /^[0-9]*[1-9][0-9]*$/; const rsCheck = re.test(value); if (!rsCheck) { callback(new Error(’請輸入正整數’)); } else { callback(); } } }, 0);}// 驗證是否整數,非必填export function isIntegerNotMust(rule, value, callback) { if (!value) { callback(); } setTimeout(() => { if (!Number(value)) { callback(new Error(’請輸入正整數’)); } else { const re = /^[0-9]*[1-9][0-9]*$/; const rsCheck = re.test(value); if (!rsCheck) { callback(new Error(’請輸入正整數’)); } else { callback(); } } }, 1000);}// 驗證是否是[0-1]的小數export function isDecimal(rule, value, callback) { if (!value) { return callback(new Error(’輸入不可以為空’)); } setTimeout(() => { if (!Number(value)) { callback(new Error(’請輸入[0,1]之間的數字’)); } else { if (value < 0 || value > 1) { callback(new Error(’請輸入[0,1]之間的數字’)); } else { callback(); } } }, 100);}// 驗證是否是[1-10]的小數,即不可以等于0export function isBtnOneToTen(rule, value, callback) { if (typeof value == ’undefined’) { return callback(new Error(’輸入不可以為空’)); } setTimeout(() => { if (!Number(value)) { callback(new Error(’請輸入正整數，值為[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(’請輸入正整數，值為[1,10]’)); } else { callback(); } } }, 100);}// 驗證是否是[1-100]的小數,即不可以等于0export function isBtnOneToHundred(rule, value, callback) { if (!value) { return callback(new Error(’輸入不可以為空’)); } setTimeout(() => { if (!Number(value)) { callback(new Error(’請輸入整數，值為[1,100]’)); } else { if (value < 1 || value > 100) { callback(new Error(’請輸入整數，值為[1,100]’)); } else { callback(); } } }, 100);}// 驗證是否是[0-100]的小數export function isBtnZeroToHundred(rule, value, callback) { if (!value) { return callback(new Error(’輸入不可以為空’)); } setTimeout(() => { if (!Number(value)) { callback(new Error(’請輸入[1,100]之間的數字’)); } else { if (value < 0 || value > 100) { callback(new Error(’請輸入[1,100]之間的數字’)); } else { callback(); } } }, 100);}// 驗證端口是否在[0,65535]之間export function isPort(rule, value, callback) { if (!value) { return callback(new Error(’輸入不可以為空’)); } setTimeout(() => { if (value == ’’ || typeof(value) == undefined) { callback(new Error(’請輸入端口值’)); } 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(’請輸入在[0-65535]之間的端口值’)); } else { callback(); } } }, 100);}// 驗證端口是否在[0,65535]之間，非必填,isMust表示是否必填export function isCheckPort(rule, value, callback) { if (!value) { callback(); } setTimeout(() => { if (value == ’’ || typeof(value) == undefined) { //callback(new Error(’請輸入端口值’)); } 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(’請輸入在[0-65535]之間的端口值’)); } else { callback(); } } }, 100);}/* 小寫字母*/export function validateLowerCase(str) { const reg = /^[a-z]+$/; return reg.test(str);}/*保留2為小數*/export function validatetoFixedNew(str) { return str ;}/* 驗證key*/// export function validateKey(str) {// var 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);}

以上就是vue 使用rules對表單字段進行校驗的步驟的詳細內容，更多關于vue 用rules對表單字段進行校驗的資料請關注好吧啦網其它相關文章！