vue 前端邮箱、密码、手机号码等输入验证规则

最近在写前端表单验证的时候，发现一篇文章质量很好，所以写下这篇文章记录
原文章链接：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)

vue 前端邮箱、密码、手机号码等输入验证规则相关推荐

Vue input标签 email和手机号输入验证
Vue input标签 email和手机号输入验证 1. email邮箱验证规则 2. 手机号正则表达式验证规则 vue写法: <script> export default {data( ...
VUE element-ui之form表单自定义验证11位手机号码（封装验证规则）
步骤: 封装验证规则: export function isvalidPhone(phone) {const reg = /^1([38][0-9]|4[014-9]|[59][0-35-9]|6[2 ...
vue几条常见的表单验证规则
:rules="addFormRules" + prop="username" <el-form ref="addformRef" : ...
在vue中input标签手机号码进行正则验证
今天遇到一个问题就是在vue中给input进行正则手机号码的验证下面是今天的代码,用js进行书写,没有用elementUI,代码如下: <div cla ...
vue之el-form实现常用表单验证规则定义【比如:用户名、密码、身份证号、邮箱号，手机号，车牌号、ip地址等】|亲测有效，建议收藏
前端学习（1342）:mongoose验证规则拿到错误信息
const mongoose = require('mongoose'); mongoose.connect('mongodb://localhost/playground', { useUnifie ...
前端学习（1341）:mongoose验证规则延伸
const mongoose = require('mongoose'); mongoose.connect('mongodb://localhost/playground', { useUnifie ...
前端学习（1340）:mongoose验证规则
const mongoose = require('mongoose'); mongoose.connect('mongodb://localhost/playground', { useUnifie ...
Struts2用户输入验证（6）
10.6 小结 Struts2框架下的用户输入验证分为三种方式:1. 编程方式下的验证 2. 配置方式下的验证 3.注解方式下的验证. 如果在Struts2项目下存在多种验证方式,其 ...

vue 前端邮箱、密码、手机号码等输入验证规则

1.手机号

2.邮箱

3.密码

4.页面中调用

vue 前端邮箱、密码、手机号码等输入验证规则相关推荐

最新文章

热门文章

vue 前端 邮箱、密码、手机号码等输入验证规则

1.手机号

2.邮箱

3.密码

4.页面中调用

vue 前端 邮箱、密码、手机号码等输入验证规则相关推荐

最新文章

热门文章

vue 前端邮箱、密码、手机号码等输入验证规则

vue 前端邮箱、密码、手机号码等输入验证规则相关推荐