點選忘記密碼，顯示重置密碼的方式(二)
阿新 • • 發佈：2018-12-15
當點選忘記密碼時，會在下面彈出一個可以找回密碼的方式面板。比在下面直接扔出一個，通過手機號找回，通過郵箱找回，聯絡管理員找回強太多了。
一 引入相關的頁面
<!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" style="display: none;"> <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(); });
三 重啟伺服器，進行相關的驗證
移動時:
