第一步:准备按钮
<input type="button" id="getVerifyCode" value="获取验证码" /><em>如未收到,请重新获取。</em>
第二步:准备必要的样式css
<style type="text/css">
#getVerifyCode{cursor: pointer; outline: none;}
</style>
$("#getVerifyCode").click(function(){
var phone = $("#txtLoginName").val();
if(phone.length == 0){
alert("请填入手机号码");
return false;
}
if(!(/^1[34578]\d{9}$/.test(phone))){
alert("手机号码有误,请重填");
return false;
}
var btn = $(this);
var count = 60;
var resend = setInterval(function(){
count--;
if (count > 0){
btn.val(count+"秒后可重新获取");
$.cookie("captcha", count, {path: '/', expires: (1/86400)*count});
}else {
clearInterval(resend);
btn.val("获取验证码").removeAttr('disabled style');
}
}, 1000);
btn.attr('disabled',true).css('cursor','not-allowed');
$.ajax({
type: "POST",
url: "${pageContext.request.contextPath}/user/getVerifyCodeByPhone",
data: {phone:phone},
dataType: "json",
success: function(data){
if(data.status == 500){
}else{
alert("网络异常,请稍后重试");
}
}
});
});
第四步:测试结果