正文
前端手机验证码cookie存储
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
注册的时候经常会有手机验证码的输入这个环节，在第一次点击发送了验证码只后，比如倒计时只走了10秒钟，然后刷新的话，倒计时要还是存在的，这个时候就要有一个cookie的存在了。
html的代码
<input type="button" id="second" value="获取验证码"/>
js代码
<!--逻辑功能代码 -->
<script>
//发送验证码时添加cookie
function addCookie(name, value, expiresHours) {
var cookieString = name + "=" + encodeURI(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 + "=" + encodeURI(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 le = arrCookie.length -1;
var arr = arrCookie[i].split("=");
if (arr[0] == name) {
return decodeURI(arr[1]);
break;
} else {
return "";
break;
}
}
}
$(function () {
$("#second").click(function () {
sendCode($("#second"));
});
v = getCookieValue("secondsremained");//获取cookie值
if (v > 0) {
settime($("#second"));//开始倒计时
}
})
//发送验证码
function sendCode(obj) {
var phone_1 = $("#phone_1").val();
var result = isPhoneNum(); //判断手机号码是不是正确的
if (result) {
var code_1 = $('#code_1').val();
if (code_1) {
doPostBack('<?php echo url(U . 'index.php?a=index/User/sms'); ?>', backFunc1, {"phone_1": phone_1, "code": code_1});
addCookie("secondsremained", 60, 60);//添加cookie记录,有效时间60s
settime(obj);//开始倒计时
} else {
alert('请输入验证码！');
return false;
}
}
}
//将手机利用ajax提交到后台的发短信接口
function doPostBack(url, backFunc, queryParam) {
$.ajax({
async: false,
cache: false,
type: 'POST',
url: url, // 请求的action路径
data: queryParam,
error: function () {// 请求失败处理函数
},
success: backFunc //请求成功处理函数
});
}
function backFunc1(data) {
//请求成功的函数处理
}
//开始倒计时
var countdown;
function settime(obj) {
countdown = getCookieValue("secondsremained");
if (countdown == 0) {
obj.removeAttr("disabled"); //添加不可以再点击事件
obj.val("获取验证码");
return;
} else {
obj.attr("disabled", true);
obj.val("重新发送(" + countdown + ")");
countdown--;
editCookie("secondsremained", countdown, countdown + 1);
}
setTimeout(function () {
settime(obj)
}, 1000) //每1000毫秒执行一次
}
//校验手机号是否合法
function isPhoneNum() {
var phone_1 = $("#phone_1").val();
var myreg = /^1[34578]\d{9}$/;
if (!myreg.test(phone_1)) {
alert('请输入有效的手机号码！');
return false;
} else {
return true;
}
} });
</script>
