AI管家

# 用户注册与登录系统实现技术博客

背景介绍

随着用户注册行为的增加，系统需要支持用户验证登录状态，以维护用户账户的安全性和便利性。本项目旨在创建一个可本地运行的用户注册与登录系统，支持验证用户名和密码，并记录登录状态。通过简单的前端界面，用户可以输入用户名和密码进行验证，系统记录状态并保存验证结果，方便后续调试和管理。

思路分析

本项目的核心功能包括：
1. 用户输入验证逻辑：验证用户名和密码的合法性，确保符合规则。
2. 登录状态记录机制：通过简单的布尔变量记录登录状态，便于后续验证。
3. 文件读写功能：保存验证结果到本地存储中，便于后续复现或管理。

本项目采用HTML、CSS和JavaScript实现，无需依赖框架，可以在本地运行。通过简单的逻辑处理，即可实现基本的功能，符合1~3天的实现难度要求。

代码实现

<!DOCTYPE html>
<html>
<head>
    <title>用户注册与登录系统</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f4f4f4;
            padding: 20px;
        }
        h2 {
            text-align: center;
            color: #333;
        }
    </style>
</head>
<body>

    <h2>用户注册与登录系统</h2>

    <form id="login-form">
        <label for="username">用户名:</label>
        <input type="text" id="username" placeholder="请输入用户名" required>

        <label for="password">密码:</label>
        <input type="password" id="password" placeholder="请输入密码" required>

        <button type="submit">登录</button>
    </form>

    <script>
        // 初始化登录状态为未激活
        let isLoggedIn = false;

        // 验证用户名和密码
        function validateUser(input) {
            let isValid = true;
            if (input.username === '') {
                alert("用户名不能为空！");
                return false;
            }
            if (input.password === '') {
                alert("密码不能为空！");
                return false;
            }
            // 检查密码长度是否符合要求
            if (input.password.length < 6) {
                alert("密码长度需至少6位！");
                return false;
            }
            // 检查密码是否包含数字
            if (!/^\d+$/.test(input.password)) {
                alert("密码必须包含数字！");
                return false;
            }
            // 检查用户名是否符合规则
            if (!/[A-Z][a-z]+/.test(input.username)) {
                alert("用户名必须包含大写字母和小写字母！");
                return false;
            }
            return isValid;
        }

        // 保存验证结果到localStorage
        function saveLoginStatus() {
            let loginStatus = isLoggedIn ? '已激活' : '未激活';
            localStorage.setItem('login_status', loginStatus);
        }

        // 页面加载时记录状态
        document.addEventListener('DOMContentLoaded', () => {
            let status = localStorage.getItem('login_status');
            if (status) {
                isLoggedIn = JSON.parse(status);
            }
            // 判断状态并记录
            document.getElementById('login-status').textContent = isLoggedIn ? '已激活' : '未激活';
        });

        // 表单提交验证并记录状态
        document.getElementById('login-form').addEventListener('submit', (e) => {
            e.preventDefault();

            let username = document.getElementById('username').value.trim();
            let password = document.getElementById('password').value.trim();

            if (validateUser({ username, password })) {
                saveLoginStatus();
                document.getElementById('login-status').textContent = '已激活';
                setTimeout(() => {
                    alert("登录成功！账户已激活");
                }, 2000);
            } else {
                document.getElementById('login-status').textContent = '未激活';
                setTimeout(() => {
                    alert("验证失败，请重新输入");
                }, 2000);
            }
        });
    </script>
</body>
</html>

总结

本项目通过HTML、CSS和JavaScript实现用户注册与登录系统，支持验证用户名和密码，并记录登录状态。通过简单的逻辑处理，实现了基本的功能，符合1~3天的实现难度要求。系统具备独立运行特性，并保存验证结果至localStorage，便于后续调试。整个项目结构清晰，包含核心功能，满足用户需求。

AI助手