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

项目中找回密码的功能：

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

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

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

前端代码：

表单部分：

<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