Jquery简单的发送验证码倒计时

最新推荐文章于 2024-07-20 21:16:51 发布

hua18123870251

最新推荐文章于 2024-07-20 21:16:51 发布

阅读量1.5k

点赞数 1

分类专栏：前端代码文章标签： jquery 验证码 ajax

本文链接：https://blog.csdn.net/hua18123870251/article/details/51075844

版权

前端代码专栏收录该内容

2 篇文章 0 订阅

订阅专栏

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:#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;
}