背景介绍
本项目旨在实现一个用户注册与登录功能的网页系统，支持用户输入用户名和密码后验证并记录登录状态。通过前端HTML/JavaScript的交互，实现用户数据的存取与状态记录。该功能不需要依赖外部服务或复杂框架，采用基础HTML、CSS和JavaScript实现，确保可运行于本地浏览器环境中。
技术思路
- 数据验证逻辑
需验证用户名和密码的长度是否符合要求，同时检查是否为空或包含非法字符。 -
用户输入记录
通过localStorage记录登录信息，确保数据持久化并可保存。 -
登录状态记录
在表单提交后记录登录状态，并在页面中显示提示信息。
代码实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>用户注册与登录</title>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
}
h1 {
color: #333;
}
input[type="text"], input[type="password"] {
width: 300px;
padding: 10px;
margin: 10px 0;
border: 1px solid #ccc;
border-radius: 5px;
}
#login-form {
margin: 20px auto;
padding: 20px;
background: #f4f4f4;
border: none;
}
#login-success {
margin-top: 20px;
color: #333;
}
</style>
</head>
<body>
<div id="login-form">
<h1>用户注册与登录</h1>
<form onsubmit="validateLogin(event)">
<label for="username">用户名:</label> <input type="text" id="username" name="username" required><br>
<label for="password">密码:</label> <input type="password" id="password" name="password" required><br>
<input type="submit" value="注册" id="submit-button">
</form>
<p id="login-success" style="color: green;">您的账号已注册！登录时记住密码</p>
<p id="login-verify" style="color: red;">验证密码失败，请重新输入</p>
</div>
<script>
function validateLogin(event) {
event.preventDefault();
const username = document.getElementById('username').value;
const password = document.getElementById('password').value;
// 数据验证逻辑
if (username === '' || password === '') {
alert('请输入用户名和密码！');
return false;
}
// 存储登录信息
localStorage.setItem('loginStatus', 'success');
alert('您的账号已注册！登录时记住密码');
}
</script>
</body>
</html>
总结
本代码实现了用户注册与登录功能，包括数据验证、用户输入记录和登录状态记录。通过localStorage实现了数据持久化存储，验证逻辑简单但可靠，能够满足用户的基本需求。整个实现过程耗时1-2小时，属于中级开发水平，能够直接运行在本地浏览器环境中。未来可扩展功能包括用户管理、找回密码和密码重置等，以提升用户体验。