项目中找回密码的功能:
忘记密码,登录页面点击忘记密码,跳转页面输入用户名,如果用户名已经绑定手机号,后台调用短信接口给该用户绑定的手机发送短信,如果没有绑定手机号则给出提示
同时,发送验证码按钮出现倒计时并不可点击
用户接收到验证码后,输入验证码并提交,如果验证码正确,跳转到修改密码页面,如果验证码不正确,跳转到错误页面。
前端代码:
表单部分:
<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