短信接口發送驗證碼倒計時以及提交驗證

項目中找回密碼的功能：

忘記密碼，登陸頁面點擊忘記密碼，跳轉頁面輸入用戶名，若是用戶名已經綁定手機號，後臺調用短信接口給該用戶綁定的手機發送短信，若是沒有綁定手機號則給出提示

同時，發送驗證碼按鈕出現倒計時並不可點擊

用戶接收到驗證碼後，輸入驗證碼並提交，若是驗證碼正確，跳轉到修改密碼頁面，若是驗證碼不正確，跳轉到錯誤頁面。

前端代碼：

表單部分：

<form id="phoneform" class="layui-form" style="margin-top:10%;margin-left:30%;
background-color:white;
    height: 180px;
    width:400px;
    padding: 50px;
    border-radius:15px;" method="post"  action="<%=basePath%>/personal/msg/findphonepnum">
  
  <div class="layui-form-item">
    <label class="layui-form-label">用戶名：</label>
    <div class="layui-input-block">
      <input id="username" type="text" name="username" lay-verify="required" placeholder="請輸入用戶名" autocomplete="off" class="layui-input">
   
    </div>
    <div id="msg" style="margin-left: 40px"></div>
  </div>
   <div class="layui-form-item">
    <label class="layui-form-label">驗證碼：</label>
    <div class="layui-input-block">
      <input id="pnum" type="text" name="pnum" lay-verify="required" placeholder="請輸入驗證碼" autocomplete="off" class="layui-input">
   
    </div>
  </div>
  <div class="layui-form-item">
    <div class="layui-input-block">
      
      <input type="button" class="layui-btn" id="find"  value="點擊獲取驗證碼" /> 
      <button class="layui-btn" lay-submit=""   lay-filter="demo2">提交</button>
    </div>
  </div>
</form>

js部分，ajax，倒計時：

<script>
layui.use(['form', 'layedit', 'laydate','layer'], function(){
  var form = layui.form
  ,layer = layui.layer
  ,layedit = layui.layedit
  ,laydate = layui.laydate;
  
  $("#find").click(function() {
      if($("#username").val()==''){
          layer.msg("請填寫正確用戶名");
          return false;
      }
      var obj=this;
      $.ajax({
          type:"post",
          url:"<%=basePath%>/personal/msg/findphone",
          data:{
              username:$("#username").val(),
          },
          dataType:"json",//返回的
          success:function(data) {
              
              if(data.result){
                  $("#find").addClass(" layui-btn-disabled");
                  $('#find').attr('disabled',"true");
                  settime(obj);
                  $("#msg").text(data.msg);
              }else{
                  layer.msg(data.msg);
              }
          },
          error:function(msg) {
              console.log(msg);
          }
      }); 
  });
});
</script>

<script type="text/javascript"> 
var countdown=120; 
function settime(obj) { 
if (countdown == 0) { 
    obj.removeAttribute("disabled"); 
    obj.classList.remove("layui-btn-disabled")
    obj.value="獲取驗證碼"; 
    countdown = 60; 
    return;
} else { 
    
    obj.value="從新發送(" + countdown + ")"; 
    countdown--; 
} 
setTimeout(function() { 
    settime(obj) }
    ,1000) 
}
</script>

這裏遇到了一個問題，關於按鈕變色不可點擊以及倒計時顯示，由於本人也是剛開始作java沒多久，js功底通常，因此這個倒計時代碼時從網上找的，而後在和ajx結合時，獲取當前對象出了點問題，由於若是放ajax前面，就算髮送驗證按失敗也會顯示倒計時，若是放在ajax裏面，用沒法獲取到該按鈕對象。我嘗試過在ajax裏面用 $('#find') 傳到函數裏，也是不行的。後來在ajax前先用  var obj=this;  ajax返回成功自後在調用倒計時函數就能夠了。

重點是發送代碼後的按鈕變化和提示以及倒計時。

後端代碼：

主要是調用短信接口發送驗證碼以及用戶提交驗證碼的驗證。

在個人另外一篇博客裏面：

http://www.cnblogs.com/jiangwz/p/8093389.html