基於async-validator的表單驗證，iView、element的通用驗證封裝函式，包含常用手機、郵箱、身份證、QQ號碼、微博賬號、最小、最大等驗證
阿新 • • 發佈：2021-03-24
開發基於Vue.js使用Element UI、iView UI的專案時，寫驗證和常用自定義驗證可以封裝成獨立函式，輕鬆呼叫，
包含常用手機、郵箱、身份證、QQ號碼、微博賬號、最小、最大等驗證。
validate.js
/** * @description 表單驗證封裝 * @author WXF * @update 2019-06-20 */ export const regExp = { // 10字元必填（同理20字元必填，50字元必填，1500字元必填） validateLen(rule, value, callback) { let stringLen1 = /^[\s\S]{1,10}$/ if (!value) { callback(new Error('請填寫XXXX')) } else if (!stringLen1.test(value)) { callback(new Error('超過10字元限制')) } else { callback() } }, //0-100百分比驗證 validatepercentage(rule, value, callback) { let reg = /^([1-9]{1,2}$)|(^[0-9]{1,2}\.[0-9]{1,2}$)|100$/ if (!value) { callback(new Error('請輸入比例')) } else if (!reg.test(value)) { callback(new Error('請輸入0-100的數字')) } else { callback() } }, // 手機號 （eg:138********,159********） validatePhone(rule, value, callback, source, options, isRequired = false) { let regPhone = /^1([38][0-9]|4[579]|5[0-3,5-9]|6[6]|7[0135678]|9[89])\d{8}$/ if (!value && !isRequired) { callback() } else if (!value) { callback(new Error('請輸入手機號碼')) } else if (!regPhone.test(value)) { callback(new Error('手機號格式錯誤')) } else { callback() } }, validatevoidname(rule, value, callback) { if (!value) { callback(new Error("請輸入使用者名稱")); } else { callback(); } }, // 使用者名稱 （eg:a123456） validateUserName(rule, value, callback) { let regUserName = /^[0-9a-zA-Z]{6,16}$/ if (!value) { callback(new Error('請輸入登入賬號')) } else if (!regUserName.test(value)) { callback(new Error('請輸入6-16位由字母和數字組成的登入賬號')) } else { callback() } }, // 密碼 validatePassword(rule, value, callback) { let regPassword = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,18}$/ if (!value) { callback(new Error('請輸入密碼')) } else if (!regPassword.test(value)) { callback(new Error('密碼格式錯誤！必須包含6-18為字母和數字')) } else { callback() } }, // 郵箱 validateEmails(rule, value, callback, source, options, isRequired = false) { let regEmails = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/ // console.log('isRequired is: ', JSON.stringify(isRequired)) if (!value && !isRequired) { callback() } else if (!value) { callback(new Error('請輸入郵箱')) } else if (!regEmails.test(value)) { callback(new Error('郵箱格式錯誤')) } else { callback() } }, // 金額驗證 validateAmount(rule, value, callback, source, options, isRequired = false) { let regAmount = /(^[0-9]{1,10}$)|(^[0-9]{1,10}[\.]{1}[0-9]{1,2}$)/ if (!value && !isRequired) { callback() } else if (!value) { callback(new Error('請輸入金額')) } else if (!regAmount.test(value)) { callback(new Error('金額格式錯誤，最多允許輸入10位整數及2位小數')) } else { callback() } }, // 身份證驗證 validateIdCard(rule, value, callback, source, options, isRequired = false) { 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{3}([0-9]|X|x)$/ if (!value && !isRequired) { callback() } else if (!value) { callback(new Error('請輸入身份證號')) } else if (!regIdCard.test(value)) { callback(new Error('身份證號碼格式錯誤')) } else { callback() } }, // 銀行卡驗證 validateBank(rule, value, callback, source, options, isRequired = false) { let regBank = /^([1-9]{1})(\d{15}|\d{16}|\d{18})$/ if (!value && !isRequired) { callback() } else if (!value) { callback() } else if (!regBank.test(value)) { callback(new Error('銀行卡號碼格式錯誤')) } else { callback() } }, // 非零正整數驗證 validateNum(rule, value, callback) { let reg = /^\+?[1-9][0-9]*$/ if (!value) { callback(new Error('請填寫非零正整數')) } else { if (reg.test(value) == false) { callback(new Error('請輸入非零的正整數')) } else { callback() } } }, // 銀行卡 validateBankCard(rule, value, callback) { let regBankCard = /^(\d{16}|\d{19})$/ if (value == '') { callback(new Error('請輸入銀行卡號')) } else { if (regBankCard.test(value) == false) { callback(new Error('銀行卡號格式錯誤')) } else { callback() } } }, // 固話格式 validateTel(rule, value, callback) { let regTel = /^(0\d{2,3}-?)?\d{7,8}$/ if (value == '') { callback(new Error('請輸入座機號碼')) } else { if (regTel.test(value) == false) { callback(new Error('座機號碼格式錯誤')) } else { callback() } } }, // QQ號碼 validateQQ(rule, value, callback, source, options, isRequired = false) { let regex = /^[1-9][0-9]{4,}$/ if (!value && !isRequired) { callback() } else if (!value) { callback(new Error('請輸入QQ號碼')) } else { if (!regex.test(value)) { callback(new Error('QQ號碼格式錯誤')) } else { callback() } } }, // weibo號 validateWeibo(rule, value, callback, source, options, isRequired = false) { let regex = /^[0-9a-zA-Z\u4e00-\u9fa5_-]*$/ if (!value && !isRequired) { callback() } else if (!value) { callback(new Error('請輸入微博賬號')) } else { if (!regex.test(value)) { callback(new Error('微博號碼格式錯誤')) } else { callback() } } }, } export const validateRules = { range: (min, max) => [validateRules.min(min), validateRules.max(max)], // email: (isRequired) => ({validator: regExp.validateEmails}), email: (isRequired) => ({validator: (rule, value, callback, source, options) => regExp.validateEmails(rule, value, callback, source, options, isRequired)}), phone: (isRequired) => ({validator: (rule, value, callback, source, options) => regExp.validatePhone(rule, value, callback, source, options, isRequired)}), idCard: (isRequired) => ({validator: (rule, value, callback, source, options) => regExp.validateIdCard(rule, value, callback, source, options, isRequired)}), qq: (isRequired) => ({validator: (rule, value, callback, source, options) => regExp.validateQQ(rule, value, callback, source, options, isRequired)}), weibo: (isRequired) => ({validator: (rule, value, callback, source, options) => regExp.validateWeibo(rule, value, callback, source, options, isRequired)}), amount: (isRequired) => ({validator: (rule, value, callback, source, options) => regExp.validateAmount(rule, value, callback, source, options, isRequired)}), min: (minLength) => ({min: minLength, message: `最少輸入${minLength}個字元`}), max: (maxLength) => ({max: maxLength, message: `最多輸入${maxLength}個字元`}), }
vue檔案中呼叫
