摘要：記錄一下在之前工作中遇到的手機號碼驗證的一個問題，主要是用正則表達式來判斷手機號是否輸入正確。下面附上代碼，已經實現過的。

記錄一下在之前工作中遇到的手機號碼驗證的一個問題，主要是用正則表達式來判斷手機號是否輸入正確。下面附上代碼，已經實現過的。

    
    
        
        
        
        
    
    
        

            
用戶注冊
        
        

            

                

                    
                
                


            
        
        
    
    

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;
}