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