<link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="jumbotron"> <div class="row"> <div class="hidden-xs col-sm-7 col-md-7 col-lg-7 login-pic"> <img alt="pic" src="" /> </div> <div class="col-xs-12 col-sm-5 col-md-5 col-lg-5"> <div class="panel panel-info panel-login"> <div class="panel-heading"> <h3 class="panel-title">立即登录</h3> </div> <div class="panel-body"> <div class="form-horizontal"> <!-- Text input--> <div class="form-group"> <div class="col-md-offset-1 col-md-10"> <input id="group_name" name="group_name" type="text" placeholder="集团主账号" class="form-control input-md" required=""> </div> </div> <!-- Text input--> <div class="form-group"> <div class="col-md-offset-1 col-md-6"> <input id="group_subname" name="group_subname" type="text" placeholder="集团子账号/手机号" class="form-control input-md" required=""> </div> <div class="col-md-2"> <button class="btn btn-warning" id="send_pwd">获取动态密码</button> </div> </div> <!-- Password input--> <div class="form-group"> <div class="col-md-offset-1 col-md-10"> <input id="login_pwd" name="login_pwd" type="password" placeholder="请输入登陆密码" class="form-control input-md" required=""> </div> </div> <div class="common-reg"> <!-- Auth code input--> <div class="form-group"> <div class="col-md-offset-1 col-xs-5"> <input id="login_auth" name="login_auth" type="text" placeholder="请输入验证码" class="form-control input-md" required=""> </div> <div class="col-xs-6"> <img alt="动态验证码" class="auth-img" src=""/> </div> </div> </div> <!-- Button --> <div class="form-group"> <div class="col-md-offset-1 col-md-10"> <button id="login_sub" name="login_sub" class="btn btn-warning btn-lg btn-block">登录</button> </div> </div> <div class="form-group"> <div class="col-xs-offset-8 col-xs-3"> <a class="btn btn-link">忘记密码？</a> </div> </div> </div> </div> </div> </div> </div> </div> </div>

$('.common-reg').hide(); $('#group_subname').on('blur', function (e) { var v = $(this).val(); if (isNaN(v)) { $('.common-reg').show(400); $('#login_pwd').focus(); } else { $('.common-reg').hide(400); } }); $('#send_pwd').on('click', function (e) { if ($(this).attr('disabled')) return; var $b = $(this), c = 5; $b.text('59秒后重发'); $b.attr('disabled', true); var it = setInterval(function () { c -= 1; if (c <= 0) { $b.removeAttr('disabled'); $b.text('获取动态密码'); clearInterval(it); return; } $b.text(c + '秒后重发'); }, 1000); });