背景介绍
为用户提供一个登录表单，实现用户名和密码的验证功能，支持在本地文件中保存登录状态。该表单采用HTML表单结构，结合JavaScript验证逻辑，使用JSON保存状态信息，无需依赖框架。
思路分析
1. 表单设计
- 使用HTML表单输入用户名和密码，支持前后端交互。
- 输入框验证用户名和密码的字符限制（如长度、特殊字符限制）。
- 通过JavaScript实现验证逻辑，确保用户名和密码符合规则。
2. 本地状态保存
- 使用Python中的
json模块读取和写入JSON数据。 - 本地文件路径需明确，避免外部依赖。
代码实现
1. HTML 表单实现
<!DOCTYPE html>
<html>
<head>
<title>用户登录</title>
<script>
function validateLogin() {
const username = document.getElementById('username').value;
const password = document.getElementById('password').value;
if (!username || !password) {
alert("请输入用户名和密码！");
return;
}
// 验证用户名长度（6-15位）
if (username.length < 6 || username.length > 15) {
alert("用户名长度在6-15位之间！");
return;
}
// 验证密码字符（字母、数字、符号）
const validChars = /[\w-]/g;
if (!validChars.test(password)) {
alert("密码必须包含字母、数字和符号！");
return;
}
// 保存状态
localStorage.setItem('loginStatus', "已验证成功");
alert("登录成功！");
}
</script>
</head>
<body>
<h2>用户登录</h2>
<input type="text" id="username" placeholder="用户名">
<input type="password" id="password" placeholder="密码">
<button onclick="validateLogin()">登录</button>
</body>
</html>
2. JavaScript 逻辑实现
function validateLogin() {
const username = document.getElementById('username').value;
const password = document.getElementById('password').value;
// 验证用户名长度
if (username.length < 6 || username.length > 15) {
alert("用户名长度在6-15位之间！");
return;
}
// 验证密码字符
const validChars = /[\w-]/g;
if (!validChars.test(password)) {
alert("密码必须包含字母、数字和符号！");
return;
}
// 保存状态
localStorage.setItem('loginStatus', "已验证成功");
alert("登录成功！");
}
3. Python 实现（简化版本）
import json
def save_login_status(username, password):
try:
with open('login_data.json', 'w') as f:
json.dump({'username': username, 'password': password}, f)
except Exception as e:
print(f"保存登录状态失败: {e}")
def load_login_status():
try:
with open('login_data.json', 'r') as f:
result = json.load(f)
return result['username'] + ' - ' + result['password']
except Exception as e:
print(f"加载登录状态失败: {e}")
总结
本项目通过HTML表单实现用户登录逻辑，结合JavaScript验证用户名和密码的字符限制，最终在本地文件中保存登录状态。Python实现了数据读写功能，确保代码可运行且易于维护。该实现符合中级开发者的要求，支持前后端交互，无需依赖外部框架。