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)文章
echarts設(shè)置tootip輪播切換展示(vue3搭配vue-echarts粘貼即用)
這篇文章主要為大家介紹了echarts設(shè)置tootip輪播切換展示效果,vue3搭配vue-echarts粘貼即用,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步2023-10-10
這篇文章主要介紹了Vue的Options用法說明，具有很好的參考價值，希望對大家有所2020-08-08
這篇文章主要介紹了記錄一個van-list不斷onLoad加載的坑及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
Vue使用pinia管理數(shù)據(jù)pinia持久化存儲問題
這篇文章主要介紹了Vue使用pinia管理數(shù)據(jù)pinia持久化存儲問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-03-03
這篇文章主要介紹了vue路徑寫法之關(guān)于./和@/的區(qū)別，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
為讓大家更好的理解Vue3的Composition?Api本文采用了詳細的動畫演繹，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-07-07
在 Vue 項目中引入 tinymce 富文本編輯器的完整代碼
這篇文章主要介紹了在 Vue 項目中引入 tinymce 富文本編輯器的實例代碼,非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下2018-05-05
這篇文章主要介紹了Vue手機號正則匹配，姓名加密展示,本文通過實例代碼給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-08-08
vue3使用defineModel實現(xiàn)父子組件雙向綁定
這篇文章主要個給大家介紹了在vue3中使用defineModel進行父子組件中的雙向綁定,文中通過代碼示例給大家介紹的非常詳細,對大家的學(xué)習(xí)或工作有一定的幫助,需要的朋友可以參考下2024-01-01
這篇文章主要介紹了vue接入高德地圖繪制扇形，需求是有一個列表，列表的數(shù)據(jù)就是一個基站信息，包含基站的經(jīng)緯度信息和名字，基站下面又分扇區(qū)，本文通過示例代碼給大家介紹的非常詳細，需要的朋友可以參考下2022-04-04