针对用户在个人中心绑定手机认证的一些js代码。

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

需求：

1：手机号码校验（格式的校验，手机号码是否已经绑定过）---未实现

2：填完手机号码，点击发送验证码，手机会收到一条信息

3：发送验证码按钮不可用，变成重新发送的倒计时

1）：60秒以后又可以发送

2）：前台页面刷新，点击发送验证码按钮，只要不到时间60s，仍然不能发送，前台提示发送频繁

4：输入收到的手机验证码

5：点击确定，验证验证码正确，绑定手机

1）：验证码错误，无法绑定

2）：绑定的手机号必须和发送验证码的手机号相同

3）：验证码本身设置过期时间一般5分钟

js代码：

$(function(){
//如果没绑定手机才会出现这些代码
<#if !userinfo.isBindPhone>
//给点击绑定手机添加时间
$("#btn_showBindPhone").click(function(){
$("#bindPhoneModal").modal("show");
}) //点击发送按钮的倒计时处理
$("#sendVerifyCode").click(function(){
var phonenumber=$("#phoneNumber").val();
var _me=$(this);
if(phonenumber){
_me.attr("disabled",true);
var time=60;
$.ajax({
dataType:"json",
type:"POST",
url:"/sendVerifyCode.do",
data:{phoneNumber:phonenumber},
success:function(data){
if(data.success){
//发送成功,开始倒计时处理
var timer=window.setInterval(function(){
time--;
if(time>0){
_me.text(time+"秒后重新发送!");
}else{
//清除计时器
window.clearInterval(timer);
_me.text("重新发送验证码");
_me.attr("disabled",false);
}
},1000);
}else{
//发送失败,提示错误信息
$.messager.popup(data.msg);
_me.attr("disabled",false);//重置按钮为可用
}
}
});
}
}); //提交绑定手机按钮响应事件
$("#bindPhone").click(function(){
$("#bindForm").ajaxSubmit(function(data){
if(data.success){
$.messager.confirm("提示","绑定手机成功!",function(){
//绑定成功，重新加载页面
window.location.reload();
});
}else{
$.messager.popup(data.msg);
}
});
})
});
</#if>

模态框:

<#if !userinfo.isBindPhone>

<div class="modal fade" id="bindPhoneModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="exampleModalLabel">绑定手机</h4>
</div>
<div class="modal-body">
<form class="form-horizontal" id="bindForm" method="post" action="/bindPhone.do">
<div class="form-group">
<label for="phoneNumber" class="col-sm-2 control-label">手机号:</label>
<div class="col-sm-4">
<input type="text" class="form-control" id="phoneNumber" name="phoneNumber" />
<button id="sendVerifyCode" class="btn btn-primary" type="button">发送验证码</button>
</div>
</div>
<div class="form-group">
<label for="verifyCode" class="col-sm-2 control-label">验证码:</label>
<div class="col-sm-4">
<input type="text" class="form-control" id="verifyCode" name="verifyCode" />
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
<button type="button" class="btn btn-primary" id="bindPhone">保存</button>
</div>
</div>
</div>
</div>
</#if>