点击忘记密码，显示重置密码的方式(五)

网络安全芝麻鱼 lv.1

发布时间：2022-11-14 14:46:28 351

相关标签： # css# html# jquery# bootstrap# webkit

上一章简单介绍了Cookie.js实现保存用户名和密码操作(四),如果没有看过，请观看上一章

当点击忘记密码时，会在下面弹出一个可以找回密码的方式面板。比在下面直接扔出一个，通过手机号找回，通过邮箱找回，联系管理员找回强太多了。

一引入相关的页面

<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>登录页面 </title>
<!--Bootstrap Stylesheet [ REQUIRED ]-->
<link href="plugins/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link href="plugins/bootstrap/css/bootstrap-theme.min.css"
  rel="stylesheet">
<link href="plugins/animate-css/animate.min.css" rel="stylesheet">
<link href="plugins/font-awesome/css/font-awesome.min.css"
  rel="stylesheet">
<link rel="shortcut icon" href="img/wkapp.png">
</head>
<body>
  <div class="container">
    <div class="row">
      <div class="col-sm-4 col-sm-offset-8" style="margin-top: 100px;padding-right:0;">
        <form class="form-horizontal" id="loginForm">
          <!-- <div class="tab-content"> -->
            <div class="" id="upTab">
              <div class="form-group">
                <input type="text" class="form-control" id="userName"
                  placeholder="用户名" name="userName"> <i class="fa fa-user"></i>
              </div>
              <div class="form-group help">
                <input type="password" class="form-control" id="userPW"
                  placeholder="密　码" name="userPW"> <i class="fa fa-lock"></i>
                  <!-- 忘记密码是这样显示的. 有一个data-toggle -->
                   <a title="忘记密码" id="forgetBtn" href="#"
                  class="fa fa-question-circle" data-toggle="tooltip"></a>
              </div>
              <div class="form-group">
                <div class="main-checkbox">
                  <input type="checkbox" value="None" id="remember" name="check"
                    checked="checked" /> <label for="remember"></label>
                </div>
                <label class="text" for="remember">记住我</label>
                <button type="button" class="btn btn-default" id="login">登录</button>
              </div>
              <!-- 忘记密码时，点击会显示这个  forgetPnl  刚开始默认为display:none 不显示-->
              <div class="form-group" id="forgetPnl" >
                <div class="form-inline" role="form">
                  <div class="input-group mar-rgt">
                    <div class="input-group">
                      <img alt="" src="img/login/phone.png">
                    </div>
                    <div class="input-group">
                      <div class="text-login">021-62226122</div>
                    </div>
                  </div>
                  <div class="input-group mar-lft">
                    <div class="input-group">
                      <img alt="" src="img/login/qq.png">
                    </div>
                    <div class="input-group">
                      <a
                        href="tencent://message/?uin=1290513799&Exe=QQ&Site=Simplelife&Menu=ye">
                        <span class="text-login">联系作者</span>
                      </a>
                    </div>
                  </div>
                </div>
              </div>
            </div>
        </form>
      </div>
    </div>
  </div>
  <script src="plugins/jquery/jquery-2.1.1.min.js"></script>
  <script src="plugins/jquery/jquery.cookie.js"></script>
  <script src="plugins/bootstrap/js/bootstrap.min.js"></script>
  <script src="login.js"></script>
</body>
</html>

二引入相关的JS验证

鼠标移动到忘记密码问号时，显示相应的title信息

/**
 * 忘记密码悬浮事件
 */
$("#forgetBtn").on('mouseover',function(){
  //让文字显示
  $(this).tooltip('show');
})

鼠标点击忘记密码时，让面板重复的显示和隐藏

$("#forgetBtn").click(function() {
  $(".fa-caret-right").toggleClass(".fa-caret-right fa-rotate-90");
  //让面板下拉显示
  $("#forgetPnl").slideToggle();
});