jQuery 前端實現手機驗證碼

html

<input id="phone" type="text" name="phone">
<input id="checkCode"  type="text"  name="code">
<button id="code-btn">點擊發送驗證碼</button>

 

js代碼

var code = ""; //接收驗證碼   
$('#code-btn').click(function(){
  var count = 5;
    var phone=$("#phone").val();//手機號碼  
    var reg_phone = /1\d{10}/;
    if(!reg_phone.test(phone)){   //驗證手機是否符合格式
        alert("填寫手機號");
        return false;
    } 
    //開始計時  
    $("#code-btn").attr('disabled','disabled');  
    $("#code-btn").html("倒計時" + count + "秒");  
    var timer = setInterval(function(){  
      count--;
      $("#code-btn").html("倒計時" + count + "秒"); 
      if (count==0) {
        clearInterval(timer);
        $("#code-btn").attr("disabled",false);//啟用按鈕  
        $("#code-btn").html("重新發送驗證碼");
        code = "";//清除驗證碼。如果不清除，過時間后，輸入收到的驗證碼依然有效 
      }
    },1000);

    //向后台發送處理數據  
    $.ajax({  
        type: "POST", //用POST方式傳輸  
        dataType: "text", //數據格式:JSON  
        url: '', //目標地址  
        data: "phone=" + phone + "&code=" + code,  
        error: function (XMLHttpRequest, textStatus, errorThrown) { },  
        success: function (msg){ }  
    });
});