短信接口发送验证码倒计时以及提交验证

项目中找回密码的功能：

忘记密码，登录页面点击忘记密码，跳转页面输入用户名，如果用户名已经绑定手机号，后台调用短信接口给该用户绑定的手机发送短信，如果没有绑定手机号则给出提示

同时，发送验证码按钮出现倒计时并不可点击

用户接收到验证码后，输入验证码并提交，如果验证码正确，跳转到修改密码页面，如果验证码不正确，跳转到错误页面。

前端代码：

表单部分：

<form id="phoneform" class="layui-form" style="margin-top:10%;margin-left:30%;
background-color:white;
    height: 180px;
    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