前端手机验证码cookie存储

 注册的时候经常会有手机验证码的输入这个环节，在第一次点击发送了验证码只后，比如倒计时只走了10秒钟，然后刷新的话，倒计时要还是存在的，这个时候就要有一个cookie的存在了。

html的代码

1 <input type="button" id="second" value="获取验证码"/>

js代码

  1 <!--逻辑功能代码 -->
  2     <script>
  3         //发送验证码时添加cookie
  4         function addCookie(name, value, expiresHours) {
  5             var cookieString = name + "=" + encodeURI(value);
  6             //判断是否设置过期时间,0代表关闭浏览器时失效
  7             if (expiresHours > 0) {
  8                 var date = new Date();
  9                 date.setTime(date.getTime() + expiresHours * 1000);
 10                 cookieString = cookieString + ";expires=" + date.toUTCString();
 11             }
 12             document.cookie = cookieString;
 13 
 14         }
 15         //修改cookie的值
 16         function editCookie(name, value, expiresHours) {
 17             var cookieString = name + "=" + encodeURI(value)
 18             if (expiresHours > 0) {
 19                 var date = new Date();
 20                 date.setTime(date.getTime() + expiresHours * 1000); //单位是毫秒
 21                 cookieString = cookieString + ";expires=" + date.toGMTString();
 22             }
 23             document.cookie = cookieString;
 24         }
 25         //根据名字获取cookie的值
 26         function getCookieValue(name) {
 27             var strCookie = document.cookie;
 28             var arrCookie = strCookie.split("; ");
 29             for (var i = 0; i < arrCookie.length; i++) {
 30                 var le = arrCookie.length -1;
 31                 var arr = arrCookie[i].split("=");
 32                 if (arr[0] == name) {
 33                     return decodeURI(arr[1]);
 34                     break;
 35                 } else {
 36                     return "";
 37                     break;
 38                 }
 39             }
 40         }
 41         $(function () {
 42             $("#second").click(function () {
 43                 sendCode($("#second"));
 44             });
 45             v = getCookieValue("secondsremained");//获取cookie值
 46             if (v > 0) {
 47                 settime($("#second"));//开始倒计时
 48             }
 49         })
 50         //发送验证码
 51         function sendCode(obj) {
 52             var phone_1 = $("#phone_1").val();
 53             var result = isPhoneNum(); //判断手机号码是不是正确的
 54             if (result) {
 55                 var code_1 = $('#code_1').val();
 56                 if (code_1) {
 57                     doPostBack('<?php echo url(U . 'index.php?a=index/User/sms'); ?>', backFunc1, {"phone_1": phone_1, "code": code_1});
 58                     addCookie("secondsremained", 60, 60);//添加cookie记录,有效时间60s
 59                     settime(obj);//开始倒计时
 60                 } else {
 61                     alert('请输入验证码！');
 62                     return false;
 63                 }
 64             }
 65         }
 66         //将手机利用ajax提交到后台的发短信接口
 67         function doPostBack(url, backFunc, queryParam) {
 68             $.ajax({
 69                 async: false,
 70                 cache: false,
 71                 type: 'POST',
 72                 url: url, // 请求的action路径
 73                 data: queryParam,
 74                 error: function () {// 请求失败处理函数
 75                 },
 76                 success: backFunc  //请求成功处理函数
 77             });
 78         }
 79         function backFunc1(data) {
 80            //请求成功的函数处理
 88         }
 89         //开始倒计时
 90         var countdown;
 91         function settime(obj) {
 92             countdown = getCookieValue("secondsremained");
 93             if (countdown == 0) {
 94                 obj.removeAttr("disabled"); //添加不可以再点击事件
 95                 obj.val("获取验证码");
 96                 return;
 97             } else {
 98                 obj.attr("disabled", true);
 99                 obj.val("重新发送(" + countdown + ")");
100                 countdown--;
101                 editCookie("secondsremained", countdown, countdown + 1);
102             }
103             setTimeout(function () {
104                 settime(obj)
105             }, 1000) //每1000毫秒执行一次
106         }
107         //校验手机号是否合法
108         function isPhoneNum() {
109             var phone_1 = $("#phone_1").val();
110             var myreg = /^1[34578]\d{9}$/;
111             if (!myreg.test(phone_1)) {
112                 alert('请输入有效的手机号码！');
113                 return false;
114             } else {
115                 return true;
116             }
117         }
118       
119         });
120     </script>

 

posted @ 2017-02-14 18:13  haonanElva  阅读(893)  评论(0)  编辑  收藏  举报