背景介绍
随着应用需求的不断增长，验证登录功能成为系统核心功能之一。本项目采用HTML/CSS/JavaScript框架实现表单验证功能，通过本地存储保存用户数据，确保应用可运行且数据持久化。项目独立部署于本地服务器，无需依赖数据库或外部服务，实现轻量级部署。
思路分析
本项目的核心需求包括：
1. 用户输入验证：验证密码的正确性，确保输入符合系统规则；
2. 本地数据存储：通过localStorage保存用户信息，便于后续数据交互；
3. 界面交互：实现表单验证逻辑，显示验证结果。
本项目采用简单数据结构（如字典）保存用户信息，利用HTML/CSS结构化表单，通过JavaScript实现验证逻辑和数据存储。
代码实现
HTML表单验证
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>登录验证</title>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
padding: 20px;
}
h1 {
color: #333;
}
input, button {
width: 100%;
padding: 10px;
}
#result {
margin-top: 10px;
font-weight: bold;
}
</style>
</head>
<body>
<h1>登录验证</h1>
<form id="login-form" onsubmit="validateLogin()">
<label for="username">用户名:</label>
<input type="text" id="username" placeholder="admin" required>
<label for="password">密码:</label>
<input type="password" id="password" placeholder="123456" required>
<button type="submit">登录</button>
<p id="result"></p>
</form>
<script>
function validateLogin() {
const username = document.getElementById('username').value;
const password = document.getElementById('password').value;
if (username.trim() === 'admin' && password.trim() === '123456') {
alert('登录成功！当前用户状态为：');
document.getElementById('result').textContent = '成功';
localStorage.setItem('user', JSON.stringify({ username, password }));
} else {
alert('登录失败！密码错误');
document.getElementById('result').textContent = '错误';
localStorage.setItem('user', JSON.stringify({ username, password }));
}
}
</script>
</body>
</html>
JavaScript验证逻辑
function validateLogin() {
const username = document.getElementById('username').value;
const password = document.getElementById('password').value;
if (username.trim() === 'admin' && password.trim() === '123456') {
alert('登录成功！当前用户状态为：');
document.getElementById('result').textContent = '成功';
localStorage.setItem('user', JSON.stringify({ username, password }));
} else {
alert('登录失败！密码错误');
document.getElementById('result').textContent = '错误';
localStorage.setItem('user', JSON.stringify({ username, password }));
}
}
数据保存与读取
import pickle
def save_user_data(username, password):
with open('user_data.pickle', 'wb') as f:
pickle.dump({ 'username': username, 'password': password }, f)
def load_user_data():
try:
with open('user_data.pickle', 'rb') as f:
data = pickle.load(f)
return data
except Exception as e:
raise Exception("Failed to load user data")
# 示例
save_user_data('admin', '123456')
user_info = load_user_data()
print("用户信息:", user_info)
总结
本项目实现了用户输入验证、表单验证和本地数据存储功能，通过HTML/CSS结构化表单，结合JavaScript验证逻辑，将用户数据保存到本地存储。项目满足独立部署要求，核心功能实现完整，具备良好的可维护性和可扩展性。技术实现中，使用了文件读写（pickle）和数据结构（字典）作为本地存储机制，确保数据持久性。整个项目实现了轻量级Web应用的核心功能，适合作为中级开发者的参考案例。