驗證碼 cookie倒計時

時間 2019-11-12

原文原文鏈接

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title></title>
<meta name="description" content="Angularjs, Html5, Music, Landing, 4 in 1 ui kits package" />
<meta name="keywords" content="AngularJS, angular, bootstrap, admin, dashboard, panel, app, charts, components,flat, responsive, layout, kit, ui, route, web, app, widgets" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />javascript

<div style=" background:#666;width:100%;height:50px;color:#fff;font-size:24px;line-height: 50px;padding-left: 20px">CCAUTOMAX</div>
<div class="app app-header-fixed " id="gai" style="margin: 0;padding: 0; background:#fff; width:100%;height:800px; " >
<div class="col-sm-6" style="width:700px;margin:0px 300px; padding-top:30px;height:100%">
<div class="panel panel-default">
<div class="panel-heading font-bold" style="font-size:18px">密碼修改</div>
<div class="panel-body">
<form class="bs-example form-horizontal" action="forget.php" name="mainform" method="post">

<input type="hidden" name="methods" id="methods" value="">
<input type="hidden" name="staff_brand_id" id="staff_brand_id" value="<{$brandid}>">

<div class="form-group">
<label class="col-lg-3 control-label">員工電話<span style="color:red">*</span></label>
<div class="col-lg-7">
<input type="text" class="form-control" id="staff_phone" name="staff_phone" value="<{$arr.staff_phone}>" placeholder="請輸入手機號碼" style="width:70%; float:left;ime-mode: disabled;" required="required">
<span class="btn w-xs btn-default" style="display:block; width:28%;float:right"><a href="javascript:void(0);" onclick="javascript:sendValidAjax();" id="valid_html">發送驗證碼</a></span>

</div>
</div>
<{if $systemMsg.staff_phone neq ''}>
<div class="form-group">
<label class="col-lg-3 control-label"></label><div class="col-lg-7" style="color:red;"> <{$systemMsg.staff_phone}></div>
</div>
<{/if}>

<div class="form-group">
<label class="col-lg-3 control-label">驗證碼<span style="color:red">*</span></label>
<div class="col-lg-7">
<input type="text" placeholder="驗證碼" class="form-control" autocomplete="off" name="validnumber" id="validnumber" style="width:70%; float:left;ime-mode: disabled;" value="" required="required">

</div>
</div>

<{if $systemMsg.validnumber!=''}>
<div class="form-group">
<label class="col-lg-3 control-label"></label><div class="col-lg-7" style="color:red;"> <{$systemMsg.validnumber}></div>
</div>
<{/if}>

<div class="form-group">
<label class="col-lg-3 control-label">新密碼<span style="color:red">*</span></label>
<div class="col-lg-7">
<input type="password" class="form-control" required="required" name="staff_passwd" value="" placeholder="請輸入密碼">
</div>
</div>
<div class="form-group">
<label class="col-lg-3 control-label"></label>
<div class="col-lg-7" >
<span style=" float:left;color:#777;font-size:12px;"> 密碼爲6~16位，且必須由大寫字母、小寫字母、數字組成</span>
</div>
</div>
<{if $systemMsg.staff_passwd neq ''}>
<div class="form-group">
<label class="col-lg-3 control-label"></label><div class="col-lg-7" style="color:red;"> <{$systemMsg.staff_passwd}></div>
</div>
<{/if}>
<div class="form-group">
<label class="col-lg-3 control-label">確認密碼<span style="color:red">*</span></label>
<div class="col-lg-7">
<input type="password" class="form-control" required="required" name="staff_passwd_ag" value="" placeholder="請確認密碼">
</div>
</div>
<{if $systemMsg.staff_passwd_ag neq ''}>
<div class="form-group">
<label class="col-lg-3 control-label"></label><div class="col-lg-7" style="color:red;"> <{$systemMsg.staff_passwd_ag}></div>
</div>
<{/if}>

<div class="form-group">
<div class="col-lg-offset-3 col-lg-7">
<input type="button" onclick="preser()" class="btn btn-sm btn-info" value="提交" />
<a class="btn w-xs btn-default" href="http://automax.junhang-sh.com/login.php" style=" width:50px; height:31px;font-size:12px">返回</a>
</div>
</div>

</form>
</div>
</div>
</div>

</div>css

<div style="height:50px;width:100%;line-height:50px;margin-top:20px;">html

<span style="float:left;margin-left:30px;">© 2017 Copyright.</span>
</div>java

//開始倒計時
var countdown;
var valid_send_flag=true;
function settime(obj) {
//var obj=document.getElementById("valid_html");
countdown=getCookieValue("secondsremained");
if (countdown == 0) {

obj.innerHTML="發送驗證碼";
valid_send_flag=true;
return;
} else {
if(countdown==undefined){
obj.innerHTML="發送驗證碼";
valid_send_flag=true;
return;
}
obj.innerHTML=countdown + "s後再發送";
countdown--;
editCookie("secondsremained",countdown,countdown+1);
}

setTimeout(function() { settime(obj) },1000) //每1000毫秒執行一次
}web

/**
*cookie
* */
///發送驗證碼時添加cookie
function addCookie(name,value,expiresHours){
//判斷是否設置過時時間,0表明關閉瀏覽器時失效
if(expiresHours>0){
var date=new Date();
date.setTime(date.getTime()+expiresHours*1000);
$.cookie(name, escape(value), {expires: date});
}else{
$.cookie(name, escape(value));
}
}
//修改cookie的值
function editCookie(name,value,expiresHours){
if(expiresHours>0){
var date=new Date();
date.setTime(date.getTime()+expiresHours*1000); //單位是毫秒
$.cookie(name, escape(value), {expires: date});
} else{
$.cookie(name, escape(value));
}
}
//根據名字獲取cookie的值
function getCookieValue(name){
return $.cookie(name);
}
/**
* 校驗手機
*/
function checkPhone() {
var errorFlag = true;
var errorMessage = "";
var value = $("#staff_phone").val();
if(value.length>0){

var myReg = /^(((13[0-9]{1})|(14[5-9]{1})|(15[0-9]{1})|(17[0-9]{1})|(18[0-9]{1}))+\d{8})$/;
if (!myReg.test(value)) {
errorFlag = false;
errorMessage = "手機格式不正確";
}

}else{
errorFlag = false;
errorMessage = "手機格式不正確";
}
if(!errorFlag){bootstrap

alert(errorMessage);
}
return errorFlag;
}
function checkValidNumber() {
var errorFlag = true;
var errorMessage = "";
var value = $("#validnumber").val();
if (!$.isEmptyObject(value)) {

var myReg = /^\d*$/;
if (!myReg.test(value)) {
errorFlag = false;
errorMessage = "驗證碼不正確";
}

}else{
errorFlag = false;
errorMessage = "驗證碼不正確";
}
if(!errorFlag){
alert(errorMessage);
}
return errorFlag;
}瀏覽器

function sendValidAjax()
{cookie

if(!valid_send_flag)return;
if(!checkPhone()) return;
valid_send_flag=false;

v = getCookieValue("secondsremained");//獲取cookie值
if(v>0){
settime(document.getElementById("valid_html"));//開始倒計時
}else{
$.post('forget.php',{methods:"sendvalid",phone:$("#staff_phone").val()}, function(data){
var data=JSON.parse(data);

if(data!=''){

if(data == 1)
{
valid_send_flag=false;
addCookie("secondsremained",60,60);//添加cookie記錄,有效時間60s
settime(document.getElementById("valid_html"));//開始倒計時
}else{
alert(data);
valid_send_flag=true;
}
return;
}
});

}

}

</script>

</body></html>