需求:
1:手机号码校验(格式的校验,手机号码是否已经绑定过)---未实现
2:填完手机号码,点击发送验证码,手机会收到一条信息
3:发送验证码按钮不可用,变成重新发送的倒计时
1):60秒以后又可以发送
2):前台页面刷新,点击发送验证码按钮,只要不到时间60s,仍然不能发送,前台提示 发送频繁
4:输入收到的手机验证码
5:点击确定,验证验证码正确,绑定手机
1):验证码错误,无法绑定
2):绑定的手机号必须和发送验证码的手机号相同
3):验证码本身设置过期时间 一般5分钟
js代码:
1 $(function(){ 2 //如果没绑定手机才会出现这些代码 3 <#if !userinfo.isBindPhone> 4 //给点击绑定手机添加时间 5 $("#btn_showBindPhone").click(function(){ 6 $("#bindPhoneModal").modal("show"); 7 }) 8 9 //点击发送按钮的倒计时处理 10 $("#sendVerifyCode").click(function(){ 11 var phonenumber=$("#phoneNumber").val(); 12 var _me=$(this); 13 if(phonenumber){ 14 _me.attr("disabled",true); 15 var time=60; 16 $.ajax({ 17 dataType:"json", 18 type:"POST", 19 url:"/sendVerifyCode.do", 20 data:{phoneNumber:phonenumber}, 21 success:function(data){ 22 if(data.success){ 23 //发送成功,开始倒计时处理 24 var timer=window.setInterval(function(){ 25 time--; 26 if(time>0){ 27 _me.text(time+"秒后重新发送!"); 28 }else{ 29 //清除计时器 30 window.clearInterval(timer); 31 _me.text("重新发送验证码"); 32 _me.attr("disabled",false); 33 } 34 },1000); 35 }else{ 36 //发送失败,提示错误信息 37 $.messager.popup(data.msg); 38 _me.attr("disabled",false);//重置按钮为可用 39 } 40 } 41 }); 42 } 43 }); 44 45 //提交绑定手机按钮响应事件 46 $("#bindPhone").click(function(){ 47 $("#bindForm").ajaxSubmit(function(data){ 48 if(data.success){ 49 $.messager.confirm("提示","绑定手机成功!",function(){ 50 //绑定成功,重新加载页面 51 window.location.reload(); 52 }); 53 }else{ 54 $.messager.popup(data.msg); 55 } 56 }); 57 }) 58 }); 59 </#if>
模态框:
1 <#if !userinfo.isBindPhone> 2 <!-- 绑定手机模式窗口 --> 3 <div class="modal fade" id="bindPhoneModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"> 4 <div class="modal-dialog" role="document"> 5 <div class="modal-content"> 6 <div class="modal-header"> 7 <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> 8 <h4 class="modal-title" id="exampleModalLabel">绑定手机</h4> 9 </div> 10 <div class="modal-body"> 11 <form class="form-horizontal" id="bindForm" method="post" action="/bindPhone.do"> 12 <div class="form-group"> 13 <label for="phoneNumber" class="col-sm-2 control-label">手机号:</label> 14 <div class="col-sm-4"> 15 <input type="text" class="form-control" id="phoneNumber" name="phoneNumber" /> 16 <button id="sendVerifyCode" class="btn btn-primary" type="button">发送验证码</button> 17 </div> 18 </div> 19 <div class="form-group"> 20 <label for="verifyCode" class="col-sm-2 control-label">验证码:</label> 21 <div class="col-sm-4"> 22 <input type="text" class="form-control" id="verifyCode" name="verifyCode" /> 23 </div> 24 </div> 25 </form> 26 </div> 27 <div class="modal-footer"> 28 <button type="button" class="btn btn-default" data-dismiss="modal">取消</button> 29 <button type="button" class="btn btn-primary" id="bindPhone">保存</button> 30 </div> 31 </div> 32 </div> 33 </div> 34 </#if>
原文地址:https://www.cnblogs.com/xuyou551/p/8118561.html
时间: 2024-10-22 11:32:54