基于jquery. cookie 防刷新重复点击获取验证码

效果图如下：

直接上代码了：  /*仿刷新：检测是否存在cookie*/

    if($.cookie("captcha")){
        var count = $.cookie("captcha");
        var btn = $(\'#yzm\');
        btn.val(count+\'秒后可重新获取\').attr(\'disabled\',true).css(\'cursor\',\'not-allowed\');
        var resend = setInterval(function(){
            count--;
            if (count > 0){
                btn.val(count+\'秒后可重新获取\').attr(\'disabled\',true).css(\'cursor\',\'not-allowed\');
                $.cookie("captcha", count, {path: \'/\', expires: (1/86400)*count});
            }else {
                clearInterval(resend);
                btn.val("获取验证码").removeClass(\'disabled\').removeAttr(\'disabled style\');
            }
        }, 1000);
    }
    //发送短信验证码
     $("#yzm").click(function(){
        var mobile = $("[name=\'user_name\']").val();
        var btn = $(this);
        var count = 120;     //需要倒计时的秒数
        if(mobile == \'\'){
            showError(\'请填写您的手机号！\');
            return false;
        }
        if (!mobile.match(/^((1[3,5,8][0-9])|(14[5,7])|(17[0,6,7,8]))\d{8}$/)) {
            showError(\'请填正确的手机号！\');
            return false;
        }

        $.ajax({
            type:"post",
            url:"index.php?mod=login&action=sms",
            dataType:"json",
            data :{mobile:mobile},
            success : function(result){
                if(result.error){
                    showError(result.error);
                }else{
                    showSucc(result.datas);
//AJAX返回成功值，用户120秒之后才可以再次点击获取
                    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\');
                }
            }
        })


    })

html ：

<div class="number">
              <i class="iconfont icon-yonghu"></i>
              <input type="text" class="text" autocomplete="off"  name="user_name" id="user_name" placeholder="注册帐号/手机号" style="width: 235px;">
              <input type="button" value= "获取验证码" id="yzm">
              <label></label>
          </div>

 

后台也加了用户获取短信验证码的判断，通过AJAX的返回值来判断要不要禁用用户点击。

 注意：一定要引入jquery.cookie.js 这个JS，不然的话不能生效的噢！

以上就是防止用户刷新重复点击获取验证码