表單驗證(驗證手機號是否存在，驗證碼倒計時)

話不投機，話就多，直接上代碼

css代碼：

html代碼：

<form method="post" id="form_hroizon" enctype="multipart/form-data" action="/">
    <input type="hidden" name="phoneTemplet" id="phoneTemplet">
    <input type="hidden" name="regType" id="regType">
    <div class="c-login-input">
        <div class="form-group">
            <label for="inputEmail3" class="label-control label-width120 pull-left t-r-f f16">手機號</label>
            <div class="pull-left">
                <input type="tel" autocomplete="off" class="input-control put-width440 j-telphone" id="inputtel" name="phones" placeholder="請輸入您的電話號碼" value="">
                <span class="f12 red tel-msg"></span>
                <div class="c-login-errtips" style="display:none;"></div>
            </div>
        </div>
        <div class="form-group">
            <label for="inputEmail3" class="label-control label-width120 pull-left t-r-f f16">登陸密碼</label>
            <div class="pull-left">
                <input type="password" class="input-control put-width440 fistpwd" id="inputpwd" name="password" placeholder="請輸入密碼" value="">
                <span class="f12 red pwd-msg"></span>
            </div>
        </div>
        <div class="form-group">
            <label for="inputEmail3" class="label-control label-width120 pull-left t-r-f f16">驗證碼</label>
            <div class="pull-left">
                <input type="tel" class="input-control put-with100 vericode" id="inputEmail3" name="code" placeholder="請輸入驗證碼">
                <input id="btnSendCode" type="button" value="免費獲取驗證碼" class="j-getcode f12 b-i-k btn code-btn c-p" />
                <span class="f12 red code-msg"></span>
            </div>
        </div>
     </div>
   
    <div class="form-group">
        <a class="j-sends" type="submit" name="submit" target="_self" href="javascript:void(0)">註冊</a>
    </div>
</form>

JS代碼：

<script type="text/javascript">
    $(function(){
        $(".j-sends").click(function(){
            var phones = $.trim($(".j-telphone").val());
            var isMobile=/^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1}))+\d{8})$/;
            if(!phones){
                 $('.tel-msg').text('請輸入手機號碼，不能爲空');
                 return false;
            }else if (!isMobile.test(phones)) {
                $('.tel-msg').text('請輸入有效的手機號碼');
                return false;
            }else{
                //手機號碼是否存在
                $.ajax({
                    url : "/",  //
                    type:"post",
                    dataType:"JSON",
                    data:{
                        phones: phones,
                    },
                    contentType:'application/json;charset=UTF-8',
                    //async: false,

　　　　　　　　//dataType : 'jsonp',  
       　　　　 //jsonp: "appcode",//服務端用於接收appcode調用的function名的參數
                    success:function(data){
                        if (data.flag == "1") {  //
                            $('.tel-msg').html(data.errorInfo); //
                            return false;
                        }else{
                            $('.tel-msg').html(data.errorInfo);  //可
                        }
                    },
                    error:function(){
                    }
                });        
            }
        })
        
    //驗證碼倒計時
    var InterValObj; //timer變量，控制時間  
    var count = 30; //間隔函數，1秒執行  
    var curCount;//當前剩餘秒數  
    var code = ""; //驗證碼  
    var regType;
    var phoneTemplet;
    var codeLength = 4;//驗證碼長度  
    $(".code-btn").click(function(){
        curCount = count;  
        var phone=$.trim($(".j-telphone").val());//手機號碼  
        var isMobile=/^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1}))+\d{8})$/;
        var jtel = $(".j-telphone");
        if(phone != "" && isMobile.test(phone) && phone.length==11){  
            //設置button效果，開始計時  
            $("#btnSendCode").attr("disabled", "true");  
            $("#btnSendCode").val("請在" + curCount + "秒內輸入驗證碼");  
            InterValObj = window.setInterval(SetRemainTime, 1000); //啓動計時器，1秒執行一次
            //產生驗證碼  
            for (var i = 0; i < codeLength; i++) {  
                code += parseInt(Math.random() * 9).toString();  
            }
            
            //向後臺獲驗證碼
             $.ajax({  
                url : base + "/",
                type: "POST",
               // dataType: "text",  
               // data: "phones=" + phone + "&code=" + code,   
                dataType: "JSON",
                data:{
                    phones:phone,
                    code: code,
                    regType:"1",
                    phoneTemplet:"phone_uc"
                },
                success: function (data){
                    if(data.flag=="F"){
                        $(".code-msg").html(data.errorInfo);                   
                    }else{
                        $(".code-msg").html(data.errorInfo);
                    }
                }  
            });  
        }else{  
            $('.tel-msg').text('請輸入有效的手機號碼');                 
        }
    });
    //timer處理函數  
    function SetRemainTime() {  
        if (curCount == 0) {                  
            window.clearInterval(InterValObj);//中止計時器  
            $("#btnSendCode").removeAttr("disabled");//啓用按鈕  
            $("#btnSendCode").val("從新發送驗證碼");  
            code = ""; //清除驗證碼。若是不清除，過期間後，輸入收到的驗證碼依然有效      
        }  
        else {  
            curCount--;  
            $("#btnSendCode").val("請在" + curCount + "秒內輸入驗證碼");  
        }  
    }    
    })
</script>

 

額外小功能添加--

  1、密碼隱藏顯示  老套的JS寫法 經過name值來判讀 也比較經常使用

  // 隱藏顯示(emilform是表單的name值， password是密碼的name值)
function showmailpass(){  
    if (this.emilform.password.type=="password") {
        this.emilform.password.type="text";
        document.getElementById("emilhide").style.display="block";
        document.getElementById("emilshow").style.display="none";
    }
}
function hidemailpass(){
    if (this.emilform.password.type=="text") {
        this.emilform.password.type="password";
        document.getElementById("emilshow").style.display="block";
        document.getElementById("emilhide").style.display="none";
    }
}

二、jquery方法

<form method="post" name="emilform" id="form_emil" enctype="multipart/form-data" action="/">

　　<!-- 密碼 -->
       <div class="regist-item regist-icon i-passwd clearfix">
              <input type="password" tabindex="2" name="password" id="emilpwd" class="pull-left fpwd"  placeholder="請輸入密碼" value="" />
               <a href="javascript:showmailpass()" id="emilshow" class="a-shpass b-in-lok pull-left trans">顯示</a>
               <a href="javascript:hidemailpass()" id="emilhide" style="display:none" class="a-shpass b-in-lok pull-left trans">隱藏</a>
        </div>

</form>

 

2、回車提交表單

   A、keydown()  事件會在鍵盤按下時觸發.
         keyup() 事件會在按鍵釋放時觸發,也就是你按下鍵盤彈起後的事件
         keypress() 事件會在敲擊按鍵時觸發,咱們能夠理解爲按下並擡起同一個按鍵

   一、針對整個form表單

    <a href="javascript:void(0)" tabindex="5" id="loginent">注&nbsp;&nbsp;冊</a>
    $(document).on('keydown ',function(e){
        var e = document.all ? window.event : e;
        if(e.keyCode == "13"){

            //裏面填寫觸發事件
            例如：document.getElementById('loginent').click();   //表單提交 按鈕觸發事件
        }
    });
二、頁面中多個表單，具體的回車一個表單能夠 -  同樣

    $("#form_phone").keydown(function(e){
         //           var e = e || event,
         //      keycode = e.which || e.keyCode;

       var e = e || event;
       var  keycode = e.which || e.keyCode;
         if (keycode==13) {
             document.getElementById('j-sends').click();
         }
  });

/////回車 代替 tab  ------（看看就好，能夠用的）

   <form name="forms">

      <div class="login-form-item clearfix">
            <input type="text" name="user" class="pull-left trans" tabindex="1" id="user" placeholder="請輸入用戶名"/>
            <a href="javascript:void(0)" class="jremove-user pull-left trans">清除</a>
        </div>

         <div class="login-form-item clearfix">
               <input type="password" name="password" tabindex="2" id="password" class="login-pwd pull-left" placeholder="請輸入密碼"/>
                <a  id="clickshow"   class="jshow-pwd k pull-left trans">顯示</a>
          </div>
          <div class="login-form-item clearfix">
                 <input type="text" name="code" tabindex="3" id="code" class="login-nonce pull-left keyenter" placeholder="請輸入驗證碼"/>
                 <span class="b-in-lok captcha-spn pull-left"><img class="identiy-pic" id="captcha-pic"  src="../images/yzhma.png" alt=''  align="absmiddle"></span>
           </div>
　　　 <a href="javascript:;"  id="loginent">登&nbsp;&nbsp;錄</a>
    </form>
var txt = new Array('user', 'password', 'code');   //ID
if (document.addEventListener) {
    document.addEventListener("keypress", fireHandler, true);
}
function fireHandler(evt) {
    if (evt.which == 13) {
        if (evt.target.id == 'user') {
            document.getElementById('password').focus();
        }
        if (evt.target.id == 'password') {
            document.getElementById('code').focus();
        }
        if (evt.target.id == 'code') {
            document.getElementById('loginent').click();  // 提交表單 按鈕
        }
    }
}

喜歡就給贊個把，哈哈，對你有幫助把