使用正则表达式验证手机号码

开发工具与关键技术:VS2015、正则表达式
作者:易金亮
撰写时间:2019.07.07

在项目中,总会涉及到数据的新增,比如新增用户信息等,而说到新增用户信息,就离不开用户的联系方式了,比如手机号码,而手机号码可并不是能随便输入的,得确保是一个真实存在的号码,不然新增的号码就没有什么意义了,所以我们必须给它做一个验证,当我们输入得不会真实的手机号码时它就会提示你“请正确填写手机号码”,这样就可以确保我们数据的准确性与真实性,既然验证如此重要,那么我们该如何给它做验证呢?接下来我就来说说如何通过正则表达式验证手机号码,首先我们先来看一下效果如下截图所示:
在这里插入图片描述
如上截图所示,当我们输入的是一个正确的手机号码时它就会录入,不会给我们提示,而当我们输入的是一个错误的手机号码时它就会出现如下截图所示的提示:
在这里插入图片描述
如上截图所示我们可以看到,我们输入的号码只有一位数字不同,那就是第二位,因为我们给第二位数字做了验证,所以当第二位输入的不是规定的数字时它就会提示我们输入的号码不正确。那么我们是如何给它做的验证呢,其代码如下所示:

function checkPhone(phone) {
            //验证电话号码手机号码,包含至今所有号段? ?
            var ab = /^[1][3,4,5,7,8][0-9]{9}$/;
            if (ab.test(phone) == false) {
                layer.alert("请正确填写手机号码!", { icon: 5, offset: '200px' });
                returnfalse;
            }
        }

如上代码所示,我们写了一个方法验证手机号码,其实就是一个正则表达式,它规定第一位数字输入的必须是1,第二位数字输入的必须是3,4,5,7,8其中的一位,后面的只能输入0-9的数字,不能输入字母或其他的字符,输入的必须是一个十一位数的号码,不然它就会出现如上图所示的提示,写好验证的方法后我们就要把它添加到输入手机号码的input文本框中,如下代码所示:

<li class="xiaozi">
      <span>移动电话</span>
      <input type="text" maxlength="11" oninput="value=value.replace(/[^\d]/g,'')"
             placeholder="请输入您的电话号码"  onChange="checkPhone(this.value)" 
            id="MobileTelephone" name="Remoudisabled" disabled/>
</li>

如上代码所示,我们限制了这个input文本框最多只能输入11位数,因为手机号码就是11位数,通过以上代码,我们的手机号码验证就完成了,

Logo

Authing 是一款以开发者为中心的全场景身份云产品,集成了所有主流身份认证协议,为企业和开发者提供完善安全的用户认证和访问管理服务

更多推荐