用js验证手机号码格式是否正确

2024年4月30日 182次阅读 来源: AaronYuan 
记录一下在之前工作中遇到的手机号码验证的一个问题，主要是用正则表达式来判断手机号是否输入正确。下面附上代码，已经实现过的。
<!Doctype html>
    <html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
        <title>用户注册</title>
        <script type="text/javascript" src="js/jquery-3.1.1.min.js"></script>
    </head>
    <body>
        <header>
            <div class="title">用户注册</div>
        </header>
        <div class="login">
            <div class="mainlogin">
                <div class="account">
                    <input type="users" name="phone" class="phone" placeholder="请输入手机号码">
                </div>
                <div class="cellphone_error"></div>

            </div>
        </div>
        <script>
            var Val={
                    //正则表达式验证是否为手机号码
                    isMobile:function(s){return this.test(s,/^1[34578]\d{9}$/)},  
                    isNumber:function(s,d){return !isNaN(s.nodeType==1?s.value:s)&&(!d||!this.test(s,"^-?[0-9]*\\.[0-9]*$"))},
                    isEmpty:function(s){return !jQuery.isEmptyObject(s)},test:function(s,p){s=s.nodeType==1?s.value:s;return new RegExp(p).test(s)}
                };
                
            $(".users").blur(function(){
            var v=$(this).val();
            var n=$(this).next();
            if(!isEmpty(v) && !Val.isMobile(v)){
                $(".cellphone_error").html("请输入正确的手机号码！");
                $('.account').css('border','1px solid #ff0000');
                return;
            }if(isEmpty(v)){
                $(".cellphone_error").html("请输入账号！");
                $('.account').css('border','1px solid #ff0000');
                return;
            }
        </script>
    </body>
    </html>

css样式

@charset "UTF-8";

/**
 * 
 * @authors Your Name (you@example.org)
 * @date    2016-11-08 17:38:55
 * @version $Id$
 */

html,body {
    font-family: Helvetica, "microsoft yahei";
    margin: 0px;
    padding: 0px;
}

input,textarea {
    -webkit-user-modify: read-write-plaintext-only;
    -webkit-appearance: none;
    outline: none;
    -webkit-tap-highlight-color:rgba(0,0,0,0);
}

ul {
    list-style: none;
    margin: 0px;
    padding: 0px;
}

a{
    text-decoration: none;
    
}
.clear{
    clear: both;
}
.hidden {
    visibility: hidden;
}

::-webkit-input-placeholder {
    /* WebKit browsers */
    color: #c0c0c0;
}

:-moz-placeholder {
    /* Mozilla Firefox 4 to 18 */
    color: #c0c0c0;
}

::-moz-placeholder {
    /* Mozilla Firefox 19+ */
    color: #c0c0c0;
}

:-ms-input-placeholder {
    /* Internet Explorer 10+ */
    color: #c0c0c0;
}

/**头部样式**/
.header{
    width: 100%;
    background: #2cc2ff;
    height:94px;
}
.mainheader {
    width: 664px;
    margin: 0 auto;
    height: 36px;
    padding: 29px 28px 29px 28px;
}
.closeicon{
    float: left;
    width: 36px;
    height:36px;
}
.closeicon img {
    width: 36px;
    height: 36px;
}
.mainheader .title{
    font-size: 34px;
    color: #ffffff;
    height: 36px;
    line-height: 36px;
    width: 664px;
    text-align: center;
    letter-spacing: 4px;
    float: left;
}


.login{
    width: 720px;
    margin: 0 auto;
    padding-top: 50px;
}
.mainlogin{
    width: 80%;
    margin: 0 10%;
}
.account,.password{
    width: 100%;
    height:94px;
    border-radius: 8px;
    border: 1px solid #a6dfff;
    line-height: 100px;
}

.account input, .password input {
    font-size: 28px;
    font-family: Helvetica, "microsoft yahei";
    outline: none;
    border: 0px;
    width: 75%;
    margin-left: 3.3%;
}
.cellphone_error, .getcode_error{
    color: #f60000;
    font-size: 20px;
    height: 56px;
    line-height: 56px;
}
.loginbtn{
    width: 100%;
    height:94px;
    font-size: 28px;
    font-family: Helvetica, "microsoft yahei";
    color: #fff;
    outline: none;
    border: 1px solid #2cc2ff;
    border-radius:96px;
    letter-spacing: 2px;
    background: #2cc2ff;
    line-height: 100px;
 
}

.forgetpsd {
    font-size: 28px;
    height: 28px;
    line-height: 28px;
    color: #ffae00;
    float: right;
    margin-bottom: 25px;
}

.quklog_register {
    margin-top: 40px;
    /*margin-bottom: 198px;*/
    font-size: 28px;
    color: #8e8e8e;
}

.quklog_register a {
    color: #2cc6ff;
    font-size: 28px;
    text-decoration: none;
}

.goregister {
    float: right;
}

.loadingDiv{
    position:absolute;
    background:#000;
    background-size: 100% 100%;
    opacity:0.5;
    filter:alpha(opacity=50);
    top:0;
    right: 0;
    left:0;
    bottom: 0;
    margin:auto;
    z-index:10000;
}
.loadingImg{
    position:absolute;
    width:57px;
    height: 57px;
    top:420px;
    right: 0;
    left:0;
    bottom: 0;
    margin:0 auto;
    z-index:10000;
    cursor: wait;   
    background:url(../images/loading2.gif) no-repeat scroll 5px 10px; 
}

.otherway { 
    width: 588px;
    height: 20px;
    position: relative;
    margin:0 auto;
    margin:0 auto;
}

.line {
    width: 588px;
    height: 1px;
    background: #D9EBFF;
}

.methods {
    position: absolute;
    top: -50%;
    left: 30.1%;
    color: #c0c0c0;
    background: #ffffff;
    font-size: 20px;
    height: 20px;
    line-height: 20px;
    width: 232px;
    text-align: center;
}

.mode {
    width: 384px;
    height: 48px;
    margin: 0 auto;
    margin-bottom: 172px;
    margin-top:38px;
}


.account_error,
.password_error {
    color: #f60000;
    font-size: 20px;
    margin-left: 66px;
    height: 56px;
    line-height: 56px;
}
    原文作者：AaronYuan
    原文地址: https://segmentfault.com/a/1190000010344000
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞