註冊時輸入手機號規則

註冊時輸入手機號規則

註冊時，web端使用者輸入的手機號（案例手機號為中國手機號）：
1.必填；
2.第一位必為1，第二位不能為0/1/2且總共11位數字；

html部分

// html
<div class="form-item1">
   <label id="sj-slc" for="">中國0086&ensp;<i class="iconfont">&#xe637;</i></label>
    <div class="item-input-wrap form-item-valid"
 
 id="form-item-valid">
     <txt id="txt">建議使用常用手機號</txt>
     <input type="text" id="inw" maxlength="11">
     </div>
     <div class="wuinput-tips" id="wuinput-tips"><img src="images/icon-tips.png" alt="">&ensp;驗證完成後，你可以使用該手機登入或找回密碼</div>
     <div class
 
="input-tips" id="input-tips"></div> //提示手機號沒有輸入或者格式錯誤的div
    <div class="put-tips" id="right-tips"></div>  //提示手機號正確的div

css部分(關於.input-tips、.put-tips部分）

這兩部分主要是考慮使用者體驗的。

// 部分css
 .form-item1 .input-tips{
            display: none;
            position: absolute;
            top:
 
 0;
            left: 0;
            margin-top: 58px;
            padding-left:32px;
            line-height: 22px;
            font-size: 12px;
            color: #f91;
        }
        .form-item1 .input-tips:before{
              content: "";
              position: absolute;
              top: 3px;
              left: 9px;
              width: 17px;
              height: 16px;
              background: url("images/icon_lifeserv2.png") repeat-x -16px -100px;
          }
          .form-item1 .put-tips{
            display: none;
            position: absolute;
            top: 17px;
            right: 20px;
            width: 17px;
            height: 17px;
            background: url("images/icon_lifeserv2.png") repeat-x 0 -117px;
        }

js部分

// js
<script>
        function $(id) {
            return document.getElementById(id);
        }
 $("form-item-valid").onmouseover=function () {
            this.style.borderColor="rgb(153, 153, 153)";
            $("sj-slc").style.borderColor="rgb(153, 153, 153)";
            $("inw").focus();
            $("wuinput-tips").style.display="block";
            $("input-tips").style.display="none";
            $("txt").style.display="none";
            $("form-item-valid").onmouseout=function () {
                this.style.borderColor="rgb(221, 221, 221)";
                $("sj-slc").style.borderColor="rgb(221,221, 221)";
            }
        }
        $("inw").onblur=function () {
        var phone = document.getElementById('inw').value;
            var myreg = /^[1][3,4,5,6,7,8,9][0-9]{9}$/;
        function getStrLength(phone) {
            var strLength = phone.length;
            for (var j = 0; j < phone.length; j++) {
                if (phone.charCodeAt(j) > 255) {
                    strLength++;
                }
            }
            return strLength;
        }
        var phonnenumber = getStrLength(phone);
                 if (phonnenumber == 0) {
                     /*$("wuinput-tips").style.display="none";
                     $("txt").style.display="block";*/
                     $("wuinput-tips").className="input-tips";
                     $("wuinput-tips").innerHTML="請輸入手機號" ;
                 }else if(phonnenumber < 11){
                         $("wuinput-tips").className="input-tips";
                         $("wuinput-tips").innerHTML="格式錯誤" ;
                }else if(!myreg.test(phone)){
                         $("wuinput-tips").className="input-tips";
                         $("wuinput-tips").innerHTML="格式錯誤" ;
                }else {
                      $("wuinput-tips").className="put-tips";
                      $("wuinput-tips").innerHTML="" ;
        }
        }
        </script>

效果圖

喜歡的朋友可以參考參考~
歡迎朋友提出意見建議~