【HTML+CSS+JS】简单的登录注册验证-Toy模板网

这篇具有很好参考价值的文章主要介绍了【HTML+CSS+JS】简单的登录注册验证。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

简单的小说明

本文是基于https://blog.csdn.net/NpcCat/article/details/106434653?spm=1001.2014.3001.5501的基础上的优化
有私信希望我做登录的用户名密码验证和登录后的页面跳转，这里用JS简单实现一下
还有很多额外的可以做的优化如输入信息格式的验证、查询用户名是否重复等都可以在取到用户输入的信息后通过一些简单的方法实现，百度上的大佬们也很多方法，这里就不进一步细化了。

效果

【HTML+CSS+JS】简单的登录注册验证文章来源地址https://www.toymoban.com/news/detail-504547.html

源码

HTML

登录注册.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>login</title>
		<link rel="stylesheet" type="text/css" href="pageChange.css" />
		<script src="pageChange.js"></script>
		<script src="Click.js"></script>
	</head>
	<body>
		<div class="control">
			<div class="item">
				<div class="active">登录</div><div>注册</div>
			</div>
			<div class="content">
				<div style="display: block;">
					<p>账号</p>
					<input type="text" placeholder="username" id="login-username"/>
					<p>密码</p>
					<input type="password" placeholder="password" id="login-password"/>
					<br/>
					<input type="submit" value="登录" onclick="login()"/>
				</div>
				<div>
					<p>用户名</p>
					<input type="text" placeholder="username" id="register-username"/>
					<p>密码</p>
					<input type="password" placeholder="password" id="register-password"/>
					<p>邮箱</p>
					<input type="text" placeholder="email" id="register-email"/>
					<br/>
					<input type="submit" value="登录" onclick="register()"/>
				</div>
			</div>
		</div>
	</body>
</html>

loginSuccess.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<h1>login Success</h1>
	</body>
</html>

CSS

*{
	margin: 0;
	padding: 0;
}
body{
	background: #f3f3f3;
}
.control{
	width: 340px;
	background: white;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	border-radius: 5px;
}
.item{
	width: 340px;
	height: 60px;
	background: #eeeeee;
}
.item div{
	width: 170px;
	height: 60px;
	display: inline-block;
	color: black;
	font-size: 18px;
	text-align: center;
	line-height: 60px;
	cursor: pointer;
}
.content{
	width: 100%;
}
.content div{
	margin: 20px 30px;
	display: none;
	text-align: left;
}
p{
	color: #4a4a4a;
	margin-top: 30px;
	margin-bottom: 6px;
	font-size: 15px;
}
.content input[type="text"], .content input[type="password"]{
	width: 100%;
	height: 40px;
	border-radius: 3px;
	border: 1px solid #adadad;
	padding: 0 10px;
	box-sizing: border-box;
}
.content input[type="submit"]{
	margin-top: 40px;
	width: 100%;
	height: 40px;
	border-radius: 5px;
	color: white;
	border: 1px solid #adadad;
	background: #00dd60;
	cursor: pointer;
	letter-spacing: 4px;
	margin-bottom: 40px;
}
.active{
	background: white;
}
.item div:hover{
	background: #f6f6f6;
}

JS

pageChange.js

window.onload = function(){
	var item = document.getElementsByClassName("item");
	var it = item[0].getElementsByTagName("div");
	
	var content = document.getElementsByClassName("content");
	var con = content[0].getElementsByTagName("div");
	
	for(let i=0;i<it.length;i++){
		it[i].onclick = function(){
			for(let j=0;j<it.length;j++){
				it[j].className = '';
				con[j].style.display = "none";
			}
			this.className = "active";
			it[i].index=i;
			con[i].style.display = "block";
		}
	}
}

Click.js

var user = new Map([["123","123"]])

function login(){
	var username = document.getElementById("login-username").value;
	var password = document.getElementById("login-password").value;
	
	if(user.get(username)==password){
		window.location.href="loginSuccess.html";
	}else{
		alert("用户名或密码错误");
	}
}

function register(){
	var username = document.getElementById("register-username").value;
	var password = document.getElementById("register-password").value;
	
	user.set(username,password);
	alert("注册成功，请登录");
	document.getElementById("register-username").value="";
	document.getElementById("register-password").value="";
	document.getElementById("register-email").value="";
}