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

最新推荐文章于 2023-04-22 18:29:42 发布

原创最新推荐文章于 2023-04-22 18:29:42 发布 · 2.8k 阅读

4 ·

CC 4.0 BY-SA版权

转载请注明出处(两个蝴蝶飞)

JS前端小方法专栏收录该内容

27 篇文章

订阅专栏

本文介绍了一个登录页面的设计，包括使用Bootstrap样式表和字体图标增强用户体验的方法。特别关注了忘记密码功能的实现，通过点击按钮动态显示找回密码选项，如电话和QQ联系方式，提升了用户交互体验。

上一章简单介绍了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" 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();
});

三重启服务器，进行相关的验证

移动时:
在这里插入图片描述
点击时:

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

一 引入相关的页面

二 引入相关的JS验证

三 重启服务器，进行相关的验证

一引入相关的页面

二引入相关的JS验证

三重启服务器，进行相关的验证