验证码 cookie倒计时

最新推荐文章于 2022-08-01 13:12:53 发布

shao_ss

最新推荐文章于 2022-08-01 13:12:53 发布

阅读量452

点赞数

<!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" />

<link rel="stylesheet" href="libs/assets/animate.css/animate.css" type="text/css" />
<link rel="stylesheet" href="libs/assets/font-awesome/css/font-awesome.min.css" type="text/css" />
<link rel="stylesheet" href="libs/assets/simple-line-icons/css/simple-line-icons.css" type="text/css" />
<link rel="stylesheet" href="libs/jquery/bootstrap/dist/css/bootstrap.css" type="text/css" />
<link rel="stylesheet" href="css/font.css" type="text/css" />
<link rel="stylesheet" href="css/app.css" type="text/css" />
<style>
body {margin:0 auto; padding 0 auto; font-family:'Microsoft YaHei',Tahoma,Verdana,'Simsun';}
</style>
</head>
<body style="width:1420px;overflow:auto;">

<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);" οnclick="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" οnclick="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>

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

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

<script src="libs/jquery/jquery/dist/jquery.js"></script>
<script src="js/jquery.cookie.js"></script>
<script src="libs/jquery/bootstrap/dist/js/bootstrap.js"></script>
<script type="text/javascript">

function preser(){

document.mainform.methods.value="update";
document.mainform.submit();
}

//开始倒计时
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毫秒执行一次
}

/**
*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){

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()
{

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>

shao_ss

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
验证码 cookie倒计时

body {margin:0 auto; padding 0 auto; font-family:'Microsoft YaHei',Tahoma,Verdana,'Simsun';}CCAUTOMAX 密码修改 "> 员工电话*
复制链接

扫一扫