最近在写前端表单验证的时候，发现一篇文章质量很好，所以写下这篇文章记录
原文章链接：vue 邮箱、密码、手机号码等输入验证规则
1.手机号
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("请输入数字值"));
} else {
if (phoneReg.test(value)) {
callback();
} else {
callback(new Error("电话号码格式不正确"));
}
}
}, 100);
};
2.邮箱
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);
};
3.密码
var validatePass = (rule, value, callback) => {
if (value === '') {
callback(new Error('请设置正确格式的密码'));
} else if(value.length < 6){
callback(new Error('密码长度最小6位'));
}else{
callback();
}
};
4.页面中调用
<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: "请输入联系方式", validator: checkPhone, trigger: "blur"}],
}
}
}
全局验证规则脚本，需要的地方引入即可：
给页面表单对象添加验证属性
:rules=“registerRules” ref=“registerForm”
为el-form-item每个表单子项添加 prop 属性, 例如
<el-form-item prop="username">
<el-input name="username" type="text" v-model="registerForm.username" placeholder="请设置登录用户名"></el-input>
</el-form-item>
rules是一个验证规则对象,因此需要在data()页面数据里添加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 }]
},
创建validate.js全局验证规则脚本,供页面灵活引入
/* 验证账号 */
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)
}
引入全局验证规则即可
import {
validateUsername, validatePassword, validatePhone, validateRealName, validateIdNumber } from '../../utils/validate'
另外，大部分验证函数都是通过正则表达式来验证的,以下还有很多常见的正则式：
/* 合法的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()函数判断是否符合正则式:
/* 判断str是否符合reg正则式,返回真或者假 */
reg.test(str)