vue中手机号码+座机号码、邮箱正则校验规则封装

直接上代码：

封装验证器：

export function isvalidPhone(phone) {const isPhone = /^1([38][0-9]|4[014-9]|[59][0-35-9]|6[2567]|7[0-8])\d{8}$/ //11位合法手机号码const isMob1 = /0\d{2,3}\d{7,8}/ //不带-的座机：02985111752const isMob2 = /^([0-9]{3,4}-)?[0-9]{7,8}$/ //带一个-：029-85111752const isMob3 = /^\d{3,4}-\d{3,4}-\d{3,4}$/; //带三个-： 0752-250-520if (isMob1.test(phone) || isMob2.test(phone) || isMob3.test(phone) || isPhone.test(phone)) {return true} else {return false}
}export function validEmail(email) {const reg = /^[a-zA-Z0-9_.-]+@[a-zA-Z0-9]+(\.[a-zA-Z0-9-]+)*\.[a-zA-Z0-9]{2,6}$/return reg.test(email)
}

组件中使用：
form表单中写入自定义校验规则

data() {const validPhone = (rule, value, callback) => {if (!value) {callback()} else if (!isvalidPhone(value)) {callback(new Error('请输入合法的电话号码'))} else {callback()}}const validMail = (rule, value, callback) => {if (value === '' || value === null) {callback()} else if (value === this.email) {// callback(new Error('新邮箱不能与旧邮箱相同'))} else if (validEmail(value)) {callback()} else if (!validEmail(value)) {callback(new Error('请输入合法的邮箱'))}return{ rules: {custName: [{ required: true, message: '请输入客户名称', trigger: 'blur' }],phone: [// { required: false, message: '请输入联系电话', trigger: 'blur' },{ required: false, validator: validPhone, trigger: 'blur' }],email: [{ required: false, validator: validMail, trigger: 'blur' }]}}
}

看效果：

失焦后进行校验。

vue中手机号码+座机号码、邮箱正则校验规则封装相关推荐

各种正则校验规则：校验用户名正则，校验手机号，校验中文姓名，校验英文姓名，校验数字，校验银行卡，校验身份证号码，校验时间格式，校验 email(邮箱)
火车车次 /^[GCDZTSPKXLY1-9]\d{1,4}$/ 手机机身码(IMEI) /^\d{15,17}$/ 必须带端口号的网址(或ip) /^((ht|f)tps?:\/\/)?[\w-]+ ...
【MedusaSTears】记一次踏坑:EL表达式不支持正则_EL表达式使用函数一览表_手机/座机号码脱敏正则规则
吃水不忘挖井人系列: EL表达式中使用函数 <%@ page language="java" pageEncoding="UTF-8"%> < ...
URL正则校验以及邮箱正则校验
1.校验URL (1) 需要校验的url要包含http://www.或者https://www.前缀,和要包含后缀. const value = 'http://www.value.com'; con ...
vue中如何进行身份证合法性校验（身份证18位，包含最后一位数字/字母）
文章目录前言正文 1. 首先,根据实际情况,目前我们使用的身份证由18位构成,包括数字和字母X.那么,在input输入框中就需要限制用户输入的数据类型. 2.其次,查看Element ui 组件库 ...
自定义邮箱和手机号码的校验规则
自定义邮箱和手机号码的校验规则 export default {name: "User",data() {// 验证邮箱的校验规则let checkEmail = (rule, v ...
vue身份证正则校验
对身份证号码进行正则校验 let regs = /(^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|3 ...
常用的手机号，身份号正则校验
常用的手机号,身份号正则校验手机号的正则校验: let tel = 12345678901; /^1[34578]\d{9}$/.test(tel): 返回值为true和false: functio ...
在Vue中使用Font Awesome
在Vue中使用Font Awesome Font Awesome介绍安装配置在Vue组件中使用图标使用商标图标源代码 Font Awesome介绍 Font Awesome是一套流行的图标字 ...
Laravel 校验规则之字段值唯一性校验
版权声明:本文为博主原创文章,未经博主允许不得转载. 目录(?)[+] laravel validator unique 'name' => 'required|unique:test,disp ...
vue中 el-input手机号码或座机号码做验证
** 今天工作中让添加号码限制于是自己查了些资料自己写了一份分别说明一个手机号验证以及固定电话验证** <el-col :span="8"><el-form-i ...

vue中手机号码+座机号码、邮箱正则校验规则封装

直接上代码：

vue中手机号码+座机号码、邮箱正则校验规则封装相关推荐

最新文章

热门文章