C# mvc js cookie 接收手机验证码并防止页面刷新后重复获取验证码

最新推荐文章于 2021-11-15 19:40:32 发布

hejisan

最新推荐文章于 2021-11-15 19:40:32 发布

阅读量1k

点赞数 1

文章标签：验证码手机 cookie c# mvc

本文链接：https://blog.csdn.net/hejisan/article/details/71513889

版权

@Config.GetMobileVerifyCodeInterval 变量用来保存多久可以重新获取，写在C#的配置文件中

首先再搞几个标签

<input type="text" class="code" name="verify" id="verify" placeholder="请输入手机验证码" required maxlength="6">
<input type="button" class="obtain generate_code" value=" 获取验证码">

控制cookie的js，用来在浏览器中保持计时：

 function addCookie(name, value, expiresHours) {
        var cookieString = name + "=" + escape(value);
        //判断是否设置过期时间,0代表关闭浏览器时失效
        if (expiresHours > 0) {
            var date = new Date();
            date.setTime(date.getTime() + expiresHours * 1000);
            cookieString = cookieString + ";expires=" + date.toUTCString();
        }
        document.cookie = cookieString;
    }
    //修改cookie的值
    function editCookie(name, value, expiresHours) {
        var cookieString = name + "=" + escape(value);
        if (expiresHours > 0) {
            var date = new Date();
            date.setTime(date.getTime() + expiresHours * 1000); //单位是毫秒
            cookieString = cookieString + ";expires=" + date.toGMTString();
        }
        document.cookie = cookieString;
    }
    //根据名字获取cookie的值
    function getCookieValue(name) {
        var strCookie = document.cookie;
        var arrCookie = strCookie.split("; ");
        for (var i = 0; i < arrCookie.length; i++) {
            var arr = arrCookie[i].split("=");
            if (arr[0] == name) {
                return unescape(arr[1]);
                break;
            } else {
                return "";
                break;
            }
        }

    }

重点来了：

    $(function () {
         @if(!String.IsNullOrEmpty(ViewBag.Message))
         {
            @Html.Raw("alert('" + @ViewBag.Message + "')");
         }
        var _generate_code = $(".generate_code");
        v = getCookieValue("secondsremained");//获取cookie值
        if (v > 0) {
            settime($(".generate_code"));//开始倒计时
        }

        $(".generate_code").click(function () {
            var disabled = $(".generate_code").attr("disabled");
            if (disabled) {
                return false;
            }
            if ($("#mobile").val() == "" || isNaN($("#mobile").val()) || $("#mobile").val().length != 11) {
                alert("请填写正确的手机号！");
                return false;
            }
            $.ajax({
                async: false,
                type: "GET",
                url: "/User/SMSReg",
                data: { 
                    mobile: $("#mobile").val().trim(),
                    type:"login"
                },
                dataType: "json",
                async: false,
                success: function (data) {
                    console.log(data);
                    if (data.Result != 0)
                    { alert(data.Message); }
                    else
                    {
                        addCookie("secondsremained", @Config.GetMobileVerifyCodeInterval, @Config.GetMobileVerifyCodeInterval);
                        settime();
                    }
                },
                error: function (err) {
                    console.log(err);
                }
            });
        });
        var countdown = @Config.GetMobileVerifyCodeInterval;
        function settime() {
            countdown = getCookieValue("secondsremained");
            if (countdown == 0) {
                _generate_code.attr("disabled", false);
                _generate_code.val("获取验证码");
                countdown = @Config.GetMobileVerifyCodeInterval;
                return false;
            } else {

                $(".generate_code").attr("disabled", true);
                _generate_code.val("重新发送(" + countdown + ")");
                countdown--;
                editCookie("secondsremained", countdown, countdown + 1);
            }
            setTimeout(function () {
                settime();
            }, 1000);
        }
    })