背景介绍
设计一个简易的网页登录界面，支持用户输入用户名和密码，验证信息是否有效。项目核心目标在于实现文件读写功能和前端验证逻辑，确保用户信息的持久性存储。通过localStorage实现信息保存，无需依赖外部服务，便于本地运行。
思路分析
- 文件读写与数据处理：使用
localStorage存储用户信息，方便后续读取。 - HTML/CSS/JavaScript：实现表单验证逻辑，判断输入是否为空或不符合格式。
- 本地运行：项目可在本地服务器运行，无需依赖外部服务或框架。
代码实现
HTML 文件结构
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>登录验证</title>
</head>
<body>
<h2>登录验证</h2>
<form id="loginForm">
<label for="username">用户名:</label>
<input type="text" id="username" name="username" placeholder="请输入用户名" required>
<label for="password">密码:</label>
<input type="password" id="password" name="password" placeholder="请输入密码" required>
<button type="submit">登录</button>
</form>
<div id="result" class="result">
<table border="1">
<tr>
<th>信息验证</th>
<th>成功</th>
<th>失败</th>
</tr>
<tr>
<td>用户名正确</td>
<td>✅</td>
<td>❌</td>
</tr>
</table>
</div>
</body>
</html>
JavaScript 实现验证逻辑
window.addEventListener('DOMContentLoaded', function () {
const username = localStorage.getItem('login', 'username');
const password = localStorage.getItem('login', 'password');
document.getElementById('result').innerHTML = `
| 信息验证 | 成功 | 失败 |
|----------|------|------|
| 用户名正确 | ✅ | ❌ |
`;
// 验证逻辑
const usernameInput = document.getElementById('username');
const passwordInput = document.getElementById('password');
// 验证用户名
if (usernameInput.value.trim() === '') {
alert('用户名不能为空！');
usernameInput.value = '';
}
// 验证密码
if (passwordInput.value.trim().length < 8) {
alert('密码长度不足！请至少8位字符');
passwordInput.value = '';
}
// 保存数据
localStorage.setItem('login', `用户名 ${usernameInput.value} 密码 ${passwordInput.value}`);
// 显示验证结果
document.getElementById('result').innerHTML = `
| 信息验证 | 成功 | 失败 |
|----------|------|------|
| 用户名正确 | ✅ | ❌ |
`;
});
总结
本项目通过localStorage实现用户信息的持久化存储，验证逻辑确保用户输入信息的有效性，最终实现简易登录验证功能。代码可运行本地服务器，验证结果以表格形式展示，确保用户体验简洁且高效。