需求：
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>