html登录注册页面js代码
时间: 2023-07-25 20:40:00 浏览: 60
以下是一个简单的 HTML 登录注册页面的基本结构和 JavaScript 代码实现:
HTML 结构:
```
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Login & Register Page</title>
</head>
<body>
<h1>Login</h1>
<form id="loginForm">
<label for="username">Username:</label>
<input type="text" id="username" name="username" required>
<br><br>
<label for="password">Password:</label>
<input type="password" id="password" name="password" required>
<br><br>
<button type="submit">Login</button>
</form>
<h1>Register</h1>
<form id="registerForm">
<label for="newUsername">Username:</label>
<input type="text" id="newUsername" name="newUsername" required>
<br><br>
<label for="newPassword">Password:</label>
<input type="password" id="newPassword" name="newPassword" required>
<br><br>
<button type="submit">Register</button>
</form>
<script src="login-register.js"></script>
</body>
</html>
```
JavaScript 代码:
```
// 获取表单元素
const loginForm = document.getElementById("loginForm");
const registerForm = document.getElementById("registerForm");
// 添加事件监听器
loginForm.addEventListener("submit", loginUser);
registerForm.addEventListener("submit", registerUser);
// 定义登录函数
function loginUser(event) {
event.preventDefault(); // 防止表单提交
// 获取用户名和密码
const username = document.getElementById("username").value;
const password = document.getElementById("password").value;
// 判断用户名和密码是否为空
if (username.trim() === "" || password.trim() === "") {
alert("Please enter both username and password.");
return;
}
// TODO: 发送登录请求到后端,验证用户信息是否正确
// ...
// 登录成功,跳转到首页
alert("Login successful!");
window.location.href = "index.html";
}
// 定义注册函数
function registerUser(event) {
event.preventDefault(); // 防止表单提交
// 获取用户名和密码
const newUsername = document.getElementById("newUsername").value;
const newPassword = document.getElementById("newPassword").value;
// 判断用户名和密码是否为空
if (newUsername.trim() === "" || newPassword.trim() === "") {
alert("Please enter both username and password.");
return;
}
// TODO: 发送注册请求到后端,创建新用户
// ...
// 注册成功,跳转到登录页面
alert("Registration successful! Please login.");
window.location.href = "login.html";
}
```
以上代码是一个简单的 HTML 登录注册页面的实现,其中包括获取表单元素、添加事件监听器、定义登录和注册函数等。注意,这只是一个示例代码,实际开发中需要根据具体情况进行修改和完善。