上海网站建设升级,wordpress改不了密码,西部数码做的网站打不开,哈尔滨网站建设还不如最近在写前端表单验证的时候#xff0c;发现一篇文章质量很好#xff0c;所以写下这篇文章记录 原文章链接#xff1a;vue 邮箱、密码、手机号码等输入验证规则
1.手机号
const checkPhone (rule, value, callback) {const phoneReg /^1[34578]\d{9}$$/;if (!value…最近在写前端表单验证的时候发现一篇文章质量很好所以写下这篇文章记录 原文章链接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:modeladdForm:label-positionlabelPosition:rulesaddFormRulesrefaddFormReflabel-width80px
el-form-item label邮箱 propemailel-input v-modeladdForm.email/el-input
/el-form-item
el-form-item label手机 propphoneNumberel-input v-modeladdForm.phoneNumber/el-input
/el-form-itemdata() {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 propusernameel-input nameusername typetext v-modelregisterForm.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)
