vue之郵箱、密碼、手機(jī)號(hào)碼等輸入驗(yàn)證規(guī)則說明
更新時(shí)間：2023年10月18日 09:01:53 作者：Pisces_224
這篇文章主要介紹了vue之郵箱、密碼、手機(jī)號(hào)碼等輸入驗(yàn)證規(guī)則說明,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
vue郵箱、密碼、手機(jī)號(hào)碼等輸入驗(yàn)證規(guī)則
手機(jī)號(hào)
const checkPhone = (rule, value, callback) => {
const phoneReg = /^1[34578]\d{9}$$/;
if (!value) {
return callback(new Error("電話號(hào)碼不能為空"));
}
setTimeout(() => {
if (!Number.isInteger(+value)) {
callback(new Error("請(qǐng)輸入數(shù)字值"));
} else {
if (phoneReg.test(value)) {
callback();
} else {
callback(new Error("電話號(hào)碼格式不正確"));
}
}
}, 100);
};
郵箱
const checkEmail = (rule, value, callback) => {
const mailReg = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/;
if (!value) {
return callback(new Error("郵箱不能為空"));
}
setTimeout(() => {
if (mailReg.test(value)) {
callback();
} else {
callback(new Error("請(qǐng)輸入正確的郵箱格式"));
}
}, 100);
};
密碼
var validatePass = (rule, value, callback) => {
if (value === '') {
callback(new Error('請(qǐng)?jiān)O(shè)置正確格式的密碼'));
} else if(value.length < 6){
callback(new Error('密碼長(zhǎng)度最小6位'));
}else{
callback();
}
};
調(diào)用：
<el-form
:model="addForm"
:label-position="labelPosition"
:rules="addFormRules"
ref="addFormRef"
label-width="80px"
>
<el-form-item label="郵箱" prop="email">
<el-input v-model="addForm.email"></el-input>
</el-form-item>
<el-form-item label="手機(jī)" prop="phoneNumber">
<el-input v-model="addForm.phoneNumber"></el-input>
</el-form-item>
data() {
return {
addForm: {},
addFormRules: {
email: [{ required: true, validator: checkEmail, trigger: "blur" }],
phoneNumber: [{ required: false, message: "請(qǐng)輸入聯(lián)系方式", validator: checkPhone, trigger: "blur"}],
}
}
}
全局驗(yàn)證規(guī)則腳本，需要的地方引入即可：
1.給頁面表單對(duì)象添加驗(yàn)證屬性
:rules=“registerRules” ref=“registerForm”
為el-form-item每個(gè)表單子項(xiàng)添加 prop 屬性, 例如
<el-form-item prop="username"> <el-input name="username" type="text" v-model="registerForm.username" placeholder="請(qǐng)?jiān)O(shè)置登錄用戶名"></el-input> </el-form-item>
rules是一個(gè)驗(yàn)證規(guī)則對(duì)象，因此需要在data()頁面數(shù)據(jù)里添加registerRules對(duì)象：
registerRules: {
username: [{ required: true, trigger: 'blur', validator: validateUsername }],
password: [{ required: true, trigger: 'blur', validator: validatePassword }],
password_repeat: [{ required: true, trigger: 'blur', validator: this.validatePassRepeat }],
bind_phone: [{ required: true, trigger: 'blur', validator: validatePhone }],
realname: [{ required: true, trigger: 'blur', validator: validateRealName }],
id_number: [{ required: true, trigger: 'blur', validator: validateIdNumber }]
},
3.創(chuàng)建validate.js全局驗(yàn)證規(guī)則腳本，供頁面靈活引入
/* 驗(yàn)證賬號(hào) */
export function validateUsername(rule, value, callback) {
if (value.length < 6 || value.length > 20) {
return callback(new Error('用戶名不得小于6個(gè)或大于20個(gè)字符!'))
} else {
callback()
}
}
/* 驗(yàn)證密碼 */
export function validatePassword(rule, value, callback) {
if (value.length < 6) {
return callback(new Error('密碼不能小于6位'))
} else {
callback()
}
}
/* 合法郵箱 */
export function validateEmail(rule, value, callback) {
const emailReg = /^(([a-zA-Z0-9_\-\.]+)@([a-zA-Z0-9_\-\.]+)\.([a-zA-Z]{2,5}){1,25})$/
if (!value) {
return callback(new Error('郵箱不能為空!!'))
}
setTimeout(() => {
if (!emailReg.test(value)) {
return callback(new Error('郵箱格式錯(cuò)誤'))
} else {
callback()
}
}, 100)
}
/* 合法手機(jī)號(hào) */
export function validatePhone(rule, value, callback) {
const phoneReg = /^[1][3,4,5,7,8][0-9]{9}$/
if (!value) {
return callback(new Error('手機(jī)號(hào)碼不能為空!!'))
}
setTimeout(() => {
if (!phoneReg.test(value)) {
return callback(new Error('手機(jī)號(hào)碼格式錯(cuò)誤'))
} else {
callback()
}
}, 100)
}
/* 合法真實(shí)姓名 */
export function validateRealName(rule, value, callback) {
const realnameReg = /^([a-zA-Z0-9\u4e00-\u9fa5\·]{1,10})$/
if (!value) {
return callback(new Error('真實(shí)姓名不能為空!!'))
}
setTimeout(() => {
if (!realnameReg.test(value)) {
return callback(new Error('您的真實(shí)姓名格式錯(cuò)誤,請(qǐng)輸入英文或漢字!'))
} else {
callback()
}
}, 100)
}
/* 合法身份證 */
export function validateIdNumber(rule, value, callback) {
const idNumberReg = /^[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)$/
if (!value) {
return callback(new Error('身份證號(hào)碼不能為空!!'))
}
setTimeout(() => {
if (!idNumberReg.test(value)) {
return callback(new Error('您的身份證號(hào)碼格式錯(cuò)誤!'))
} else {
callback()
}
}, 100)
}
4.引入全局驗(yàn)證規(guī)則即可
import { validateUsername, validatePassword, validatePhone, validateRealName, validateIdNumber } from '../../utils/validate'
另外，大部分驗(yàn)證函數(shù)都是通過正則表達(dá)式來驗(yàn)證的，以下還有很多常見的正則式：
/* 合法的https或ftp地址 */
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.,?'\\+&%$#=~_-]+))*$/
/* 小寫字母 */
const reg = /^[a-z]+$/
/* 大寫字母 *
const reg = /^[A-Z]+$/
/* 大小寫字母*/
const reg = /^[A-Za-z]+$/
通過reg.test()函數(shù)判斷是否符合正則式：
/* 判斷str是否符合reg正則式,返回真或者假 */ reg.test(str)
總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
Vue使用Element實(shí)現(xiàn)增刪改查+打包的步驟
這篇文章主要介紹了Vue使用Element實(shí)現(xiàn)增刪改查+打包的步驟，幫助大家更好的理解和學(xué)習(xí)vue框架，感興趣的朋友可以了解下2020-11-11
本篇文章主要介紹了Vue引入遠(yuǎn)程JS文件，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-04-04
Vue.js組件實(shí)現(xiàn)選項(xiàng)卡以及切換特效
這篇文章主要為大家詳細(xì)介紹了Vue.js組件實(shí)現(xiàn)選項(xiàng)卡以及切換特效，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-07-07
快速解決 keep-alive 緩存組件中定時(shí)器干擾問題
文章介紹了在使用keep-alive緩存組件時(shí),如何在組件被緩存后清理定時(shí)器以避免干擾其他組件的邏輯,通過在deactivated鉤子中清理定時(shí)器,可以確保組件被緩存時(shí)不會(huì)繼續(xù)運(yùn)行定時(shí)器,感興趣的朋友一起看看吧2025-02-02
vue+axios 前端實(shí)現(xiàn)的常用攔截的代碼示例
這篇文章主要介紹了vue+axios 前端實(shí)現(xiàn)的常用攔截的代碼示例，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-08-08
Vue3實(shí)現(xiàn)組件通信的14種方式詳解與實(shí)戰(zhàn)
在Vue3中,組件通信仍然是一個(gè)非常重要的話題,因?yàn)樵诖蠖鄶?shù)應(yīng)用程序中,不同的組件之間需要進(jìn)行數(shù)據(jù)傳遞和交互,在Vue3中,組件通信有多種方式可供選擇,本文給大家介紹了Vue3實(shí)現(xiàn)組件通信的14種方式,需要的朋友可以參考下2025-08-08
Sass作為一種CSS預(yù)處理器,已經(jīng)從最初的簡(jiǎn)單擴(kuò)展發(fā)展成為功能豐富的樣式編程語言,本文給大家介紹Sass功能特性、常用方法與最佳實(shí)踐,感興趣的朋友一起看看吧2025-07-07
vue3實(shí)現(xiàn)一個(gè)滾動(dòng)分頁加載瀑布流列表過程
文章介紹了如何使用Vue3和JavaScript實(shí)現(xiàn)一個(gè)滾動(dòng)分頁加載的瀑布流列表項(xiàng)目框架,主要選擇了vue-waterfall-next插件,并結(jié)合原生JavaScript實(shí)現(xiàn)了滾動(dòng)加載功能,包括防抖處理以優(yōu)化頁面性能2026-02-02
在現(xiàn)代的單頁面應(yīng)用（SPA）中,404錯(cuò)誤是不可避免的,當(dāng)用戶訪問一個(gè)無效的路由時(shí),我們希望能夠提供一個(gè)友好的404頁面,以改善用戶體驗(yàn),在這篇博客中,我們將探討如何在Vue應(yīng)用中處理404頁面,并提供示例代碼幫助你更好地理解這一過程,需要的朋友可以參考下2024-12-12
基于uniapp?vue3?的滑動(dòng)搶單組件實(shí)例代碼
文章介紹了如何在Vue組件的`onMounted`生命周期鉤子中獲取`movable-area`和`movable-view`組件的實(shí)例,從而計(jì)算出可滑動(dòng)的距離,示例代碼展示了這一過程,感興趣的朋友跟隨小編一起看看吧2025-02-02