背景介绍
随着用户需求的增长，实现用户认证功能是Web应用的核心模块之一。本项目旨在通过简单但功能强大的方式，模拟用户注册与登录流程，帮助用户验证输入信息并展示结果。项目采用HTML/CSS/JavaScript实现，结合文件操作和状态管理，确保代码可运行并具备良好的学习价值。
思路分析
本项目的核心知识点包括：
- 数据验证逻辑：验证输入用户名和密码的格式合法性。
- 状态管理：通过文件操作或局部存储管理用户信息。
- 网络请求模拟：模拟用户登录逻辑，处理返回结果并显示反馈信息。
代码实现遵循模块化设计原则，通过HTML表单处理用户输入，结合JavaScript验证密码，最后通过本地文件保存数据并展示结果。
代码实现
1. 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 {
width: 300px;
padding: 10px;
margin: 10px 0;
box-sizing: border-box;
}
button {
padding: 10px 20px;
cursor: pointer;
font-size: 16px;
}
#result {
margin-top: 20px;
}
</style>
</head>
<body>
<h1>用户注册与登录</h1>
<form id="login-form">
<input type="text" id="username" placeholder="用户名" required>
<input type="password" id="password" placeholder="密码" required>
<button type="submit">注册</button>
<p id="result" style="color: #333;">用户名：empty ✅</p>
</form>
<script>
// 从文件读取用户信息
const users = JSON.parse(localStorage.getItem('users') || '{}');
// 注册处理逻辑
const username = document.getElementById('username');
const password = document.getElementById('password');
username.addEventListener('input', () => {
const usernameValue = username.value.trim();
if (usernameValue.length < 3) {
alert('用户名需至少3位字符');
return;
}
username.value = usernameValue;
});
password.addEventListener('input', () => {
const passwordValue = password.value.trim();
if (passwordValue.length < 6) {
alert('密码需至少6位字符');
return;
}
password.value = passwordValue;
});
// 发送请求模拟登录逻辑
function submitForm() {
const username = document.getElementById('username').value;
const password = document.getElementById('password').value;
if (username && password) {
// 本地存储用户信息
localStorage.setItem('users', JSON.stringify({ username, password }));
alert(`用户名：${username} ✅ 密码正确`);
document.getElementById('result').textContent = `用户名：${username} ✅`;
} else {
alert('用户名或密码错误');
document.getElementById('result').textContent = '用户名：empty ✅';
}
}
// 表单提交
document.getElementById('login-form').addEventListener('submit', (e) => {
e.preventDefault();
submitForm();
});
</script>
</body>
</html>
2. 示例实现代码
代码实现
import os
# 本地存储用户信息
users = {}
# 注册处理逻辑
def register(username, password):
if username and password:
users[username] = password
os._mkdir('userdata', 0755) # 创建临时目录
with open(f'userdata/{username}.txt', 'w') as f:
f.write(f"{username}:{password}")
return True
else:
return False
# 登录验证逻辑
def login(username, password):
if username in users:
return username == password
return False
# 示例使用
if __name__ == "__main__":
print("注册用户：")
username_input = input("用户名: ")
password_input = input("密码: ")
print("登录验证: ")
print("用户名: {} ✅".format(username_input))
print("密码正确: {} ✅".format(password_input))
3. 总结
本项目通过Python实现了一个用户注册与登录功能，结合HTML/CSS/JS处理表单输入，并利用本地文件存储用户信息。核心知识点包括数据验证逻辑、状态管理以及网络请求模拟。项目可运行于本地环境，适合中级程序员在1~3天内完成，同时提升了安全意识和学习价值。通过简单的代码实现，能够有效验证用户认证逻辑，并增强对编程实践的理解。