JavaScript实现页面登陆功能

java_de_road
于 2024-05-13 16:21:10 发布
阅读量347
点赞数 2
文章标签： javascript 开发语言 ecmascript
本文链接：https://blog.csdn.net/java_de_road/article/details/138808034
版权
学习记录
代码：
<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

	<title> 登录 </title>

	<link rel="stylesheet" href="style/css/base.css"  />
	<link rel="stylesheet" href="style/css/login.css"  />
	<link rel="stylesheet" href="style/layui/css/layui.css"  >
	<link rel="stylesheet" href="style/layer/skin/layer.css"  >
	<link rel="shortcut icon" href="style/images/OIP.jpg">

	<script  type="text/javascript" src="style/js/jquery-1.7.1.min.js"></script>
	<script  type="text/javascript" src="style/js/jquery.cookie.js"></script>
	<script  type="text/javascript" src="style/layui/layui.js"></script>
	<script  type="text/javascript" src="style/layer/layer.js"></script>

	<!-- 验证码 隐藏滚动条 -->
	<style>
		.imgcode{
			width: 95px;
			position: absolute;
			right: 0;
			top: 0px;
			cursor: pointer;
			height: 46px;
			font-size: 24px;
			text-align: center;
			line-height: 46px;
		}
		::-webkit-scrollbar{
			display:none;
		}
	</style>

</head>
<body  onload="changeImg()" onkeydown="keyLogin()">
<div id="content" class="content">


	<div class="banner-box">

		<form id="mainForm" class="main-form"  autocomplete="new form" >
			<div class="tab-title">
				<a class="linkABlue" id="toAccountLogin" href="login.html">账号登录</a>
				<span class="register-line"></span>
				<a class="linkAGray" id="toVCodeLogin" href="register.html">账号注册</a>
			</div>
			<div id="errorMsg" class="tip-box visiblility-hidden">
				<i class="err-ico"></i>
				<span class="tip-font" id="tipMsg">请填写完整的登录信息</span>
				<span id="closeErrorMsg" class="close-ico"></span>
			</div>

			<!-- 用户名 -->
			<div class="normalInput" id="cycode-box">
				<input class="ipt-account inp-focus" name="phone" id="phone" maxlength="50" placeholder="手机号" autocomplete="off"  onfocus="closeErrorMsg()" />
			</div>
			<!-- 密 码 -->
			<div class="normalInput ">
				<input type="password" class="inp-focus" name="password" id="password" maxlength="16" autocomplete="off"  placeholder="密码" onfocus="closeErrorMsg()"  />

			</div>
			<!-- 验证码 -->
			<div class="normalInput " id="cycode-box">
				<input class="ipt-account inp-focus" name="verify" id="verify" maxlength="50" placeholder="验证码" autocomplete="off"  onfocus="closeErrorMsg()" />
				<span id="code"  class="imgcode" ></span>
				<!-- <img src="test.jpg" class="imgcode" id="code"> -->
			</div>


			<!-- 记住登录信息 -->
			<div class="layui-form" >
				<input type="checkbox" name="remember" id="remember" lay-skin="primary" title="记住登录信息" checked >
				<b style="text-align: right">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
					字母均为小写</b>
			</div>
			<br/>

			<a id="login" class="fullBtnBlue">登录</a>
<!--			<div class="transferField">-->
<!--             <a class="go2forgetpwd linkABlue rememberFieldForA" >字母均为小写</a>-->
<!--            </div>-->
		</form>
	</div>
</div>
<script type="text/javascript">
	//一加载就执行填充信息  用于记住登录信息
	// $(document).ready(function(){
	// 	if($.cookie("phone") !== ''){
	// 		$("#phone").val($.cookie("phone"));
	// 	}
	// })


	//不加这个复选框样式不会改变
	layui.use('form', function(){
		var form = layui.form; //只有执行了这一步，部分表单元素才会自动修饰成功
	});


	//回车登录
	function keyLogin(){
		if (event.keyCode==13){ //回车键的键值为13
			//document.getElementById("login").click(); //调用登录按钮的登录事件
			//或者使用jquery实现
			$("#login").click();
		}
	}

	//用于验证码
	var code;//声明一个变量用于存储生成的验证码
	document.getElementById("code").onclick=changeImg;
	function changeImg(){
		//alert("换图片");
		var arrays=['1','2','3','4','5','6','7','8','9','0',
			'a','b','c','d','e','f','g','h','i','j',
			'k','l','m','n','o','p','q','r','s','t',
			'u','v','w','x','y','z',
			'A','B','C','D','E','F','G','H','I','J',
			'K','L','M','N','O','P','Q','R','S','T',
			'U','V','W','X','Y','Z','#','/','@','$',
			'%','^','&','*'];
		code='';//重新初始化验证码
		//alert(arrays.length);
		//随机从数组中获取四个元素组成验证码
		for(var i=0;i<4;i++){
			//随机获取一个数组的下标
			var r=parseInt(Math.random()*arrays.length);
			code+=arrays[r];
			//alert(arrays[r]);
		}
		//alert(code);
		document.getElementById('code').innerHTML=code;//将验证码写入指定区域
	}

	//点击登录事件
	$("#login").click(function(){
		var phone = $("#phone").val();
		var password = $("#password").val();
		var verify = $("#verify").val();
		if( phone==="" || password==="" || verify===""){
			var obj = document.getElementById("errorMsg");
			$("#tipMsg").html("请填写完整的登录信息！");
			obj.setAttribute("class", "tip-box visiblility-show");
			return ;
		}
		//验证码不对
		//console.log(code.toLowerCase(),verify)
		if( code.toLowerCase()!==verify){
			//提示错误信息
			var obj = document.getElementById("errorMsg");
			//修改提示文字
			$("#tipMsg").html("请填写正确的验证码！");
			obj.setAttribute("class", "tip-box visiblility-show");
			return ;
		}

		//发送ajax请求
		$.ajax({
			type: 'POST',
			url: '/users/loginPP',
			data: JSON.stringify({ phone: phone, password: password }),
			dataType: 'JSON',
			contentType: 'application/json',
			success: function(data){
				//如果密码错误，则把cookie中的password清空同时表单内容设置为空,同时清空验证码，刷新验证码
				if(data === true){

					// 判断是否勾选记住登录信息
					if ($("#remember").prop("checked")) {
						// 记录信息
						var phone = $("#phone").val();
						//var password = $("#password").val();
						$.cookie("phone", phone);
						//$.cookie("password", password, { expires: 7 }); // 存储一个带7天期限的cookie
					} else {
						// 保留之前的登录信息
						var rememberedPhone = $.cookie("phone");
						var rememberedPassword = $.cookie("password");
						if (rememberedPhone) {
							// 将之前记录的电话号码和密码重新设置到输入框中
							$("#phone").val(rememberedPhone);
							//$("#password").val(rememberedPassword);
						}
					}

					document.querySelector('#login').style.pointerEvents = 'none';
				const login = document.querySelector('#login')
				let i = 3
					login.innerHTML = `登陆成功，页面将于${i}秒后跳转`
				let n = setInterval(function (){
					i--;
					login.innerHTML = `登陆成功，页面将于${i}秒后跳转`;
					$.ajax({
						type: 'POST',
						url: '/users/loginPP',
						data: JSON.stringify({password: password, phone: phone }),
						dataType: 'JSON',
						contentType: 'application/json',}
					)
					if (i===0) {
						clearInterval(n);
						login.innerHTML = `登陆`
						window.location.href = 'reload.html';
					}
				},1000)

				}else{ //登录成功跳转页面

					//$("#phone").val("")
					//$.cookie("phone","")
					//$("#password").val("");
					//$.cookie("password", "");
					//$("#verify").val("")
					changeImg();
					alert("用户名或密码错误");
					password = ''
				}
			},
		});


	});

	//点击错误信息关闭按钮
	$("#closeErrorMsg").click(function(){
		var obj = document.getElementById("errorMsg");
		obj.setAttribute("class", "tip-box visiblility-hidden");
	});

	//关闭错误提示
	function closeErrorMsg(){
		var obj = document.getElementById("errorMsg");
		obj.setAttribute("class", "tip-box visiblility-hidden");
	};

	//验证码提示

	console.log("" +
			"\n" +
			"" +
			"       　  　▃▆█▇▄▖\n" +
			"　 　 　 ▟◤▖　　　◥█▎\n" +
			"   　 ◢◤　 ▐　　　 　▐▉\n" +
			"　 ▗◤　　　▂　▗▖　　▕█▎\n" +
			"　◤　▗▅▖◥▄　▀◣　　█▊\n" +
			"▐　▕▎◥▖◣◤　　　　◢██\n" +
			"█◣　◥▅█▀　　　　▐██◤\n" +
			"▐█▙▂　　     　◢██◤\n" +
			"◥██◣　　　　◢▄◤\n" +
			" 　　▀██▅▇▀\n" +
			"\n" +
			"\n" +
			" ")
</script>


</body>
</html>