Jquery简单的发送验证码倒计时
2016-04-06 16:13
585 查看
Jquery简单的发送验证码倒计时
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="@{'/public/stylesheets/main/accountSet.css'}">
<script type="text/javascript" src="../../public/javascripts/jquery-2.0.js"></script>
<script type="text/javascript" src="@{'/public/javascripts/common.js'}"></script>
</head>
<body>
<div class="padding3040">
<div class="safe_inputw">
<span class="safe_que">电子邮箱：</span>
<input type="text" placeholder="请输入您的邮箱" id="email" onblur="checkEmail()">
<p id="emailMsg" class="safe_inputerror_display" style="margin-left:96px;"></p>
</div>
<div class="safe_inputw">
<span class="safe_que">邮箱验证码：</span>
<input type="text" placeholder="请输入验证码" onblur="checkCode();" id="code" style="width:100px;">
<input type="button" id="btn" onclick="getCheckCode();" class="safe_button" value="获取验证码" style="width:120px;">
<p id="codeMsg" class="safe_inputerror_display" style="margin-left:96px;"></p>
</div>
</div>
<a id="activeEmail" onclick="emailSubmit();" class="zrh_safe_button margin-left250">提交</a>
<p id="errorMsg" class="safe_inputerror_display" style="margin-left:96px;"></p>
<!-- 邮箱认证弹窗 结束-->
</body>
<script type="text/javascript">
function checkEmail(){
var _input=$("#email");
var _val=$.trim(_input.val());
var _tips=$("#emailMsg");
_tips.html("");
if(_val==""){
_tips.removeClass().addClass("safe_inputerror");
_tips.html("请输入邮箱");
return false;
}
if (!_val.isEmail()) {
_tips.removeClass().addClass("safe_inputerror");
_tips.html("请输入正确的邮箱");
return false;
}
_tips.removeClass().addClass("safe_inputerror_display");//成功标识
return true;
}
function checkCode(){
var _input=$("#code");
var _val=$.trim(_input.val());
var _tips=$("#codeMsg");
_tips.html("");
if(_val==""){
_tips.removeClass().addClass("safe_inputerror");
_tips.html("请输入验证码");
return false;
}
_tips.removeClass().addClass("safe_inputerror_display");//成功标识
return true;
}
function getCheckCode(){
if(checkEmail()){
var _tips=$("#errorMsg");
var email = $("#email").val().trim();
var verifyMobile = #{jsAction @front.account.LoginAndRegisterAction.verifyEmail(':email')/}
$.post(verifyMobile({email:email}),function(data){
var arr = eval(data);
if(arr.error.code < 0)
{
_tips.removeClass().addClass("safe_inputerror");
_tips.html(arr.error.msg);
return;
}
else
{
disableButtonByClock(60);
}
});
}
}
//发送短信倒计时代码
function disableButtonByClock(seconds){
$("#btn").removeClass().addClass("safe_button_before").attr("disabled",true);
$("#btn").val("重新发送"+seconds+"s"); //让该按钮显示剩下多少时间才可以启用
var time=parseInt(seconds); //将传入的参数转为整型数字
if(time==0){
$("#btn").val("获取验证码");
$("#btn").removeClass().addClass("safe_button").attr("disabled",false);
}else{
setTimeout("disableButtonByClock("+(time-1)+")",1000); //1秒以后 再次调用本身这个方法
}
}
</script>
</html>css
*{margin:0;padding:0;font-family:'Microsoft Yahei';}
ul li{list-style:none;}
.padding3040{padding:30px 40px;}
.displaynone{display:none;}
.text-center{text-align:center;color:#595758;}
.zrh_safe_button{background:#00a9ea;color:#fff;display:inline-block;
border-radius:5px;font:normal 16px/40px 'Microsoft Yahei';
width:120px;height:40px;text-align:center;cursor: pointer;}
.disabled{background:#999 !important;color:#fff !important;}
.margin-top20{margin-top:20px;}
.zrh_safe_button:hover{
background: -moz-linear-gradient(top, #549cde 0%, #00a9ea 100%);
background: -webkit-linear-gradient(top, #549cde 0%,#00a9ea 100%);
background: -ms-linear-gradient(top, #549cde 0%,#00a9ea 100%);
background: linear-gradient(top, #549cde 0%,#00a9ea 100%); }
/*安全问题*/
.zrh_safeQ_ul{}
.zrh_safeQ_ul li{font:normal 14px/40px 'Microsoft Yahei';color:#595758;
padding-left:90px;}
.zrh_safeQ_ulspan{color:red;}
.margin-left70{margin:20px 0 0 98px;}
.zrh_safeQ_ul li input{width:200px;height:36px;padding-left:5px;
border:1px solid #dcdcdc;background:#fff;}
.zrh_safeQ_ul select{width:207px;height:30px;*width:207px;_width:207px;
border:1px solid #dcdcdc;background:#fff;}
.safe_que{width: 100px;display:inline-block;text-align:right;}
.zrh_safe_smallfont{font:normal 13px/30px 'Microsoft Yahei';
color:#888;margin-left:5px;}
.zrh_safe_smallfont:hover{color:#00a9ea;}
.margin-left250{margin-left:240px;}
.margin-top120{margin-top:110px;}
.zrh_loginPassword_ul li{font:normal 14px/40px 'Microsoft Yahei';color:
10386
#595758;
padding-left:70px;margin-top:10px;}
.zrh_loginPassword_ul li span{width:100px;text-align:right;display:inline-block;}
.zrh_loginPassword_ul li input{width:250px;height:36px;padding-left:5px;
border:1px solid #dcdcdc;background:#fff;}
.zrh_bindMoblie_ul{width:100%;height:80px;background:#ff9900}
.zrh_bindMoblie_ul li{float:left;width:100px;background:pink;
font:normal 14px/40px 'Microsoft Yahei';text-align:center;}
.zrh_bindMoblie_ul li div{width:40px;height:40px;background:#00a9ea;color:#fff;
-webkit-border-radius:20px;-moz-border-radius:20px;
-moz-border-radius: 20px 20px 20px 20px;border-radius: 20px 20px 20px 20px}
.zrh_bindMoblie_ul li p{}
/*验证手机*/
.safet_wrap{width:338px;height:40px;margin:20px auto 10px;_margin-left:120px;}
.safet_wrap img{width:338px;height:40px;}
.safet_em{width:500px;height:30px;margin:10px 0 0 96px;}
.safet_em em{width:146px;display:inline-block;
font:normal 14px/30px 'Microsoft Yahei';color:#888;}
.safet_em .safet_emon{color:#333;}
.safe_inputw{margin:20px 0 10px 100px;
font:normal 14px/36px 'Microsoft Yahei';}
.mgLeft{margin:20px 0 10px 80px;}
.queWidth{ width: 120px; }
.safe_inputw label{width:80px;display:inline-block;
text-align:right;padding-right:14px;}
.safe_inputw input{width:200px;height:36px;padding-left:10px;
border:1px solid #dcdcdc;background:#fff;}
.safe_inputerror{padding-left:30px;margin-left:85px;width:200px;height:34px;
font:normal 13px/34px 'Microsoft Yahei';color:#666;
background:url(../../images/main/part/icon_error_s.png) no-repeat 8px 8px;}
.safe_inputerror_display{padding-left:30px;margin-left:85px;width:200px;height:34px;
font:normal 13px/34px 'Microsoft Yahei';color:#666;
background:url(../../images/main/part/icon_error_s.png) no-repeat 8px 8px;display:none}
.safe_inputw .safe_button{width:120px;height:35px;background:#fff;
border:1px solid #dcdcdc;background:#f3f3f3;text-align:center;
box-shadow:0px 3px 0px #00a8ea;
-webkit-box-shadow:0px 3px 0px #00a8ea;
-moz-box-shadow:0px 3px 0px #00a8ea;
margin-left:5px;vertical-align:top;
cursor:pointer;}
.safe_inputw .safe_button:hover{height:37px;
box-shadow:0px 1px 0px #00a8ea;}
.safe_inputw .safe_button_before{text-align:center;
width:120px;height:35px;margin-left:5px;vertical-align:top;
cursor:pointer;font:normal 14px/35px 'Microsoft Yahei';
background:#999;color:#fff;}
.safe_success{width:400px;margin:60px auto;}
.safe_successMG{margin:20px auto;}
.safe_sucimg{float:left; margin-left: 50px;}
.safe_sucp{font:normal 20px/42px 'Microsoft Yahei';vertical-align:top;
display:inline-block;padding-left:20px;color:#888;}
.color42C175{color:#42C175;font:normal 16px/40px Arial;margin-left:60px;}
.color777{color:#777;font:normal 14px/40px Arial;margin-left:60px;}
/*添加银行卡*/
.safe_inputw select{height:36px;line-height:36px;min-width: 100px;*width:120px;}
.safe_inputw input{line-height:36px;border:1px solid #dcdcdc;background:#fff;}
/*找回密码*/
.findPassWarp{ width: 100%; text-align: center; }
.findPassWarp .okbtn{width: 100px;
height: 30px;
background: #00a8ea;
border-radius: 5px;
text-align: center;
font-size: 16px;
color: #fff;
line-height: 30px;
margin: 0 auto;
display: block;
text-decoration: none;
}
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- JQuery1——基础（$对象，选择器，对象转换）
- JavaScript演示排序算法
- 2015-2016网页设计趋势分析 Web Design of Trends
- jQuery Ajax 跨域调用
- 移动端的长按事件
- jquery教程靠边站，一分钱不花让你免费学会jquery
- JQuery+Strusts1.x无刷新登录
- java自动生成验证码插件-kaptcha
- Ajax
- $.ajax()方法详解
- jQuery ajax - ajax() 方法
- JavaScript 各种遍历方式详解
- 数组方法汇总
- 解决Ajax悬停效果,无法遮蔽FLASH的问题
- 再谈Jquery Ajax方法传递到action(补充)
- jQuery Html控件基本操作(日常收集整理)
- jQuery插件实现文字无缝向上滚动效果代码
- jQuery菜单插件用法实例