做一个用户注册和登录的页面的代码
时间: 2024-06-03 19:08:34 浏览: 5
以下是一个简单的用户注册和登录页面的代码,使用HTML和JavaScript构建:
<!DOCTYPE html>
<html>
<head>
<title>User Registration and Login</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
form {
display: flex;
flex-direction: column;
align-items: center;
margin-top: 50px;
}
input[type="text"], input[type="password"] {
font-size: 1.2rem;
padding: 10px;
border-radius: 5px;
border: none;
margin-bottom: 20px;
}
input[type="submit"] {
font-size: 1.2rem;
padding: 10px 20px;
border-radius: 5px;
border: none;
background-color: #007bff;
color: #fff;
cursor: pointer;
}
.message {
font-size: 1.2rem;
color: red;
margin-top: 20px;
}
</style>
</head>
<body>
<h1>User Registration and Login</h1>
<h2>Register</h2>
<form id="registerForm">
<label for="registerUsername">Username</label>
<input type="text" id="registerUsername" required>
<label for="registerPassword">Password</label>
<input type="password" id="registerPassword" required>
<input type="submit" value="Register">
</form>
<div id="registerMessage" class="message"></div>
<h2>Login</h2>
<form id="loginForm">
<label for="loginUsername">Username</label>
<input type="text" id="loginUsername" required>
<label for="loginPassword">Password</label>
<input type="password" id="loginPassword" required>
<input type="submit" value="Login">
</form>
<div id="loginMessage" class="message"></div>
<script>
// User registration
document.getElementById("registerForm").addEventListener("submit", function(event) {
event.preventDefault();
var username = document.getElementById("registerUsername").value;
var password = document.getElementById("registerPassword").value;
var registerMessage = document.getElementById("registerMessage");
// Check if username and password are not empty
if (username.trim() === "" || password.trim() === "") {
registerMessage.textContent = "Username and password are required.";
return;
}
// Check if username already exists
if (localStorage.getItem(username) !== null) {
registerMessage.textContent = "Username is already taken.";
return;
}
// Register user
localStorage.setItem(username, password);
registerMessage.textContent = "User registered successfully.";
document.getElementById("registerForm").reset();
});
// User login
document.getElementById("loginForm").addEventListener("submit", function(event) {
event.preventDefault();
var username = document.getElementById("loginUsername").value;
var password = document.getElementById("loginPassword").value;
var loginMessage = document.getElementById("loginMessage");
// Check if username and password are not empty
if (username.trim() === "" || password.trim() === "") {
loginMessage.textContent = "Username and password are required.";
return;
}
// Check if username exists and password matches
if (localStorage.getItem(username) === null || localStorage.getItem(username) !== password) {
loginMessage.textContent = "Invalid username or password.";
return;
}
// Login user
loginMessage.textContent = "User logged in successfully.";
document.getElementById("loginForm").reset();
});
</script>
</body>
</html>
该代码使用localStorage来存储用户信息。在注册时,代码检查用户名和密码是否为空,以及用户名是否已经存在。如果都符合要求,代码将在localStorage中创建一个新的键值对,其中键是用户名,值是密码。在登录时,代码检查用户名和密码是否为空,并检查用户名是否存在,并且密码是否与存储的密码匹配。如果一切正常,代码将显示成功的登录消息。