專案中找回密碼的功能：

忘記密碼，登入頁面點選忘記密碼，跳轉頁面輸入使用者名稱，如果使用者名稱已經繫結手機號，後臺呼叫簡訊介面給該使用者繫結的手機發送簡訊，如果沒有繫結手機號則給出提示

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

使用者接收到驗證碼後，輸入驗證碼並提交，如果驗證碼正確，跳轉到修改密碼頁面，如果驗證碼不正確，跳轉到錯誤頁面。

前端程式碼：

表單部分：

<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