应用场景

在开发“发送短信验证”功能时候，要解决一个问题，防止恶意或频繁发送短信验证码问题。一般原理是“当点击发送按钮时，发送ajax请求到服务器发送短信验证码，成功则把发送按钮设置为不可点击，并且调用定时器，按钮显示倒计时”。如果就这样不对倒计时存储做处理，那么当刷新页面，会出现倒计时失效，按钮可点击。提供以下解决方案：

• 利用COOKIE存储倒计时

• 利用HTML5的localStorage 存储倒计时

利用COOKIE存储倒计时

发送成功后把剩余倒计时存储到COOKIE，当页面刷新时，检查COOKIE 是否还存储着剩余倒计时？，如果有，发送按钮则保持倒计时状态，不可点击，否则发送按钮可点击。

HTML代码

<input type="button" id="btn" disabled="disabled" value="获取验证码">

JQuery代码

<script src="http:jquery.COOKIE.js" type="text/Javascript" charset="utf-8">script>


<script>
 $(function(){
 
 if($.COOKIE("total")!=undefined&&$.COOKIE("total")!='NaN'&&$.COOKIE("total")!='null'){//COOKIE存在倒计时
 
 timekeeping();
 
 }else{//COOKIE 没有倒计时
 
 $('#btn').attr("disabled", false);
 }
 
 function timekeeping(){
 //把按钮设置为不可以点击
 $('#btn').attr("disabled", true);
 var interval=setInterval(function(){//每秒读取一次COOKIE
 //从COOKIE 中读取剩余倒计时
 total=$.COOKIE("total");
 //在发送按钮显示剩余倒计时
 $('#btn').val('请等待'+total+'秒');
 //把剩余总倒计时减掉1
 total--;
 
 if(total==0){//剩余倒计时为零，则显示 重新发送，可点击
 //清除定时器
 clearInterval(interval);
 //删除COOKIE
 total=$.COOKIE("total",total, { expires: -1 });
 
 //显示重新发送
 $('#btn').val('重新发送');
 //把发送按钮设置为可点击
 $('#btn').attr("disabled", false);
 }else{//剩余倒计时不为零
 
 //重新写入总倒计时
 $.COOKIE("total",total);
 }
 
 },1000);
 
 }
 //绑定发送按钮
 $('#btn').click(function(event) {
 /* Act on the event */


 // alert($("#btn").val());

 //校验手机号码
 var phOne=$('#phone').val();
 var pre=/^[1][358][0-9]{9}$/;
 if(phOne==''){
 layer.open({
 content: '手机号码不能为空',
 time: 2
 });
 
 return this;
 }else{
 var pre=/^[1][358][0-9]{9}$/;
 if(!pre.test(phone)){
 layer.open({
 content: '手机号码格式有误！',
 time: 2
 });
 
 return this;
 }
 }


 $.ajax({
 url: '',//服务器发送短信
 type: 'GET',
 dataType: 'json',
 data: {phone: phone},
 })
 .done(function(re) {


 var str="发送短信验证码成功，请注意查看您的手机";
 // console.log(re);
 if(re){
 $.COOKIE("total",60);
 timekeeping();
 }else{
 
 switch (re[0]) {
 case '160038':
 
 str="短信验证码发送过频繁";
 break; 
 case '160034':
 
 str="号码黑名单";
 break; 
 case '160000':
 
 str="系统错误";
 break;
 case '000000':
 
 str="发送成功";
 break;
 case '112300':
 
 str="接收短信的手机号码为空";
 break; 
 case '160040':
 
 str="验证码超出发送上限";
 break;
 case '160042':
 
 str="号码格式有误";
 break; 
 
 default:
 str="发送验证码失败";
 break;
 }
 }
 

 layer.open({
 content: str,
 time: 2
 });
 
 
 })
 .fail(function() {
 console.log("error");
 })
 .always(function() {
 console.log("complete");
 });
 

 });
 })
script>