Vue验证手机号的同时验证座机号

前言

最近遇到了表单验证，验证是否是手机号码和座机号码，要是是的话通过验证，要是不是的话，则文字提示。因为自己不是很熟练这一部分，故写篇笔记记录一下，以免后面自己忘记或者混淆。

业务场景

手机号码是1xx-xxxx-xxxx的形式，座机号码是0xxx-xxxxxxxx的形式（其中x代表数字），则通过联系电话的验证，要是其他格式，则不通过验证。

解决

这里是表单的代码，表单上面绑定了rules。

 <el-col :span="8"><el-form-item label="联系电话：" prop="telephone" label-width="160px" ><el-input v-model="form.telephone" type="text"></el-input></el-form-item></el-col>

然后在rules里面加上联系电话的规则，在validator里面写上上面声明的验证规则定义的参数，我这边写的是checkPhone，注意要统一。然后在checkPhone里面就有手机号和座机号码的验证了。

data（）{
var checkPhone = (rule, value, callback) => {if (value === '') {callback(new Error('联系电话不可为空！'));} else {let regPone = null;let mobile = /^1(3|4|5|6|7|8|9)\d{9}$/; //最新16手机正则let tel = /^(0\d{2,3}-){0,1}\d{7,8}$/; //座机if (value.charAt(0) == 0) {   // charAt查找第一个字符方法，用来判断输入的是座机还是手机号regPone = tel;} else {regPone = mobile;}if (!regPone.test(value)) {callback(new Error("请输入正确的电话格式！"))}callback();}}
return{rules: {telephone: [{required: true,trigger: "blur",validator: checkPhone}],}}
}

Vue验证手机号的同时验证座机号相关推荐

前端校验用户输入的手机号或者座机号是否符合格式
效果: 输入的手机号:15878452358324 输入座机号: 012-15845233223 代码: 因为联系电话非必填项,所以在点击提交之前去校验的时候,如果填写了手机号或者座机号则去校验,没有 ...
php 验证座机,验证国内手机号与座机号的正则表达式
这次给大家带来验证国内手机号与座机号的正则表达式,验证国内手机号与座机号的正则表达式的注意事项有哪些,下面就是实战案例,一起来看一下.验证手机号:^((13[0-9])|(14[7])|(15[^4, ...
正则表达式——同时验证座机号和手机号
正则表达式--同时验证座机号和手机号座机可能的号码为: (1)12345678 (2)1234567 (3)010-12345678 (4)0357-53608463 (4)15200000000( ...
iOS开发实战之手机号、座机号正则验证
早些时候一直在写微信小程序..NETWeb Api相关的教程,写教程就像人生一样,走走停停,思前想后,有什么得失,有什么可以总结与提高. 昨天晚些时候基本上被马保国对阵拳击的视频给刷屏了,顺便在这里发 ...
el-input手机号，座机号，邮箱，银行卡，邮编，传真验证
一.手机号验证 html部分: data中表单验证: addRules: {phoneNumber: [{ validator: this.checkPhone,required: true,trig ...
验证手机号和座机号规则
/*** 严格认证11位手机号和座机号 Mr.DJ*/ const MOBILE_PATTERNS_MORE='/^((0\d{2,3}-\d{7,8})|(1[3584]\d{9}))$/'; 这个 ...
JS电话号座机号同时验证
vue 中用elementUI 的input框输入电话号码座机号同时验证 data () { const checkPhoneNum = (rule, value, callback) => { ...
vue验证手机号、密码验证码、时间、机型、图片类型等
新建util.js : // 验证手机号 const testPhone = (resPhone) => {console.log(resPhone, "resPhone") ...
vue input手机号验证
vue监听input光标消失验证手机号是否合法,验证正则手机号11位以1开头 <input v-model="phoneValue" @input="handleI ...

Vue验证手机号的同时验证座机号

前言

业务场景

解决

Vue验证手机号的同时验证座机号相关推荐

最新文章

热门文章