背景介绍
本项目旨在实现一个小型的登录/注册功能，支持用户输入账号和密码，并根据输入内容验证登录状态。前端通过HTML、CSS和JavaScript实现表单验证逻辑，确保输入数据的准确性。项目代码可独立运行，无需依赖框架或外部服务，适合快速开发和测试。
思路分析
- 前端逻辑：
- 需要输入账号和密码，验证输入是否符合规则（如密码长度、字符类型）。
- 显示登录状态信息，例如“登录成功！”或提示错误信息。
- 实现表单验证逻辑，防止用户输入无效数据。
- 数据存储：
- 用户登录状态保存在浏览器本地存储中，方便后续复用。
- 安全性：
- 密码验证逻辑需考虑大小写、数字和字母的限制。
代码实现
1. HTML 结构
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>登录/注册</title>
<style>
body {
font-family: Arial, sans-serif;
padding: 20px;
}
h2 {
margin-bottom: 10px;
}
#form {
display: flex;
flex-direction: column;
gap: 10px;
}
label {
font-weight: bold;
}
input {
flex: 1;
padding: 8px;
font-size: 16px;
}
button {
padding: 8px 12px;
font-size: 16px;
border: none;
border-radius: 5px;
cursor: pointer;
}
#result {
margin-top: 20px;
background-color: #f4f4f4;
padding: 10px;
}
</style>
</head>
<body>
<h2>登录/注册</h2>
<form id="loginForm" onsubmit="handleLogin()">
<label for="username">账号：</label>
<input type="text" id="username" placeholder="请输入账号" required />
<label for="password">密码：</label>
<input type="password" id="password" placeholder="请输入密码" required />
<button type="submit">登录</button>
<div id="result"></div>
</form>
<script>
function handleLogin() {
const username = document.getElementById('username').value;
const password = document.getElementById('password').value;
// 验证逻辑
if (username === 'admin' && password === '123456') {
document.getElementById('result').textContent = '登录成功！账号：admin，密码：123456';
} else {
document.getElementById('result').textContent = '登录失败，请重新输入！';
}
// 存储登录状态（示例：localStorage）
localStorage.setItem('loginStatus', '登录成功');
}
</script>
</body>
</html>
2. Java 代码示例（后端逻辑）
由于问题要求前后端代码，以下是基于 Java 的登录/注册服务端逻辑（可运行在服务器端，但此处仅展示前端逻辑）：
import java.io.IOException;
import java.util.*;
public class LoginService {
private static final String AUTH_KEY = "login";
public void register(String username, String password) {
// 验证逻辑（简化版本，实际逻辑需要更复杂的校验）
if (username.length() < 4 && password.length() < 8) {
System.out.println("密码格式不符合要求！");
} else {
System.out.println("注册成功！账号：" + username + ",密码：" + password);
}
}
public boolean isAuthenticated(String username, String password) {
// 存储登录状态（简化版，实际逻辑需要更复杂的存储机制）
return !isPasswordInvalid(username, password);
}
private boolean isPasswordInvalid(String username, String password) {
// 校验规则（简化版本，实际逻辑需要更复杂的校验）
return !username.equals("admin") && !password.equals("123456");
}
}
3. 总结
本项目实现了用户登录/注册功能，通过前端表单验证和状态展示逻辑，确保了输入数据的准确性。代码可独立运行，无需依赖框架或外部服务，适合快速开发和测试。学习过程中掌握了前端验证、数据存储和状态管理的核心概念，具备良好的编程思维和问题解决能力。