javascript网页注册登录-网页设计-锦华智联科技

功能概述：我们将实现什么。
准备工作：创建 HTML 和 CSS 文件。
核心逻辑 - JavaScript：实现注册、登录、数据存储和验证。
完整代码示例：将所有部分整合在一起。
安全性和进阶提示：需要注意的重要事项。

功能概述

我们将创建一个包含以下功能的网页：

（图片来源网络，侵删）

注册页面：用户可以输入用户名、密码和确认密码进行注册。
登录页面：已注册的用户可以输入用户名和密码进行登录。
数据存储：使用浏览器的 localStorage 来存储用户信息（注意：这仅用于演示，不安全）。
页面切换：根据登录状态，在登录页面、注册页面和“欢迎”页面之间切换。
基本验证：检查输入是否为空、密码是否匹配、用户名是否已存在。

准备工作

我们需要创建三个文件：index.html、style.css 和 script.js。

`index.html`

这个文件将包含我们的页面结构,我们将使用一个容器来动态切换不同的视图（登录、注册、欢迎）。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">注册登录系统</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container" id="app">
        <!-- 登录表单 -->
        <div id="login-form" class="form-container">
            <h2>登录</h2>
            <form id="loginForm">
                <div class="input-group">
                    <label for="login-username">用户名</label>
                    <input type="text" id="login-username" required>
                </div>
                <div class="input-group">
                    <label for="login-password">密码</label>
                    <input type="password" id="login-password" required>
                </div>
                <button type="submit" class="btn">登录</button>
            </form>
            <p>还没有账号？ <a href="#" id="show-register">立即注册</a></p>
        </div>
        <!-- 注册表单 -->
        <div id="register-form" class="form-container" style="display: none;">
            <h2>注册</h2>
            <form id="registerForm">
                <div class="input-group">
                    <label for="reg-username">用户名</label>
                    <input type="text" id="reg-username" required>
                </div>
                <div class="input-group">
                    <label for="reg-password">密码</label>
                    <input type="password" id="reg-password" required>
                </div>
                <div class="input-group">
                    <label for="reg-confirm-password">确认密码</label>
                    <input type="password" id="reg-confirm-password" required>
                </div>
                <button type="submit" class="btn">注册</button>
            </form>
            <p>已有账号？ <a href="#" id="show-login">返回登录</a></p>
        </div>
        <!-- 欢迎页面 -->
        <div id="welcome-page" class="welcome-container" style="display: none;">
            <h2>欢迎, <span id="welcome-username"></span>!</h2>
            <p>你已成功登录。</p>
            <button id="logout-btn" class="btn">退出登录</button>
        </div>
    </div>
    <script src="script.js"></script>
</body>
</html>

`style.css`

这个文件负责美化我们的页面。

body {
    font-family: Arial, sans-serif;
    background-color: #f4f4f4;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
}
.container {
    background: white;
    padding: 2rem;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    width: 100%;
    max-width: 400px;
    text-align: center;
}
h2 {
    color: #333;
    margin-bottom: 1.5rem;
}
.input-group {
    margin-bottom: 1rem;
    text-align: left;
}
label {
    display: block;
    margin-bottom: 0.5rem;
    color: #555;
}
input[type="text"],
input[type="password"] {
    width: 100%;
    padding: 0.8rem;
    border: 1px solid #ddd;
    border-radius: 4px;
    box-sizing: border-box; /* Important for padding and width */
}
.btn {
    width: 100%;
    padding: 0.8rem;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 1rem;
    transition: background-color 0.3s ease;
}
.btn:hover {
    background-color: #0056b3;
}
p {
    margin-top: 1rem;
    color: #666;
}
a {
    color: #007bff;
    text-decoration: none;
    font-weight: bold;
}
a:hover {
    text-decoration: underline;
}
.welcome-container h2 {
    color: #28a745;
}

核心逻辑 - JavaScript (`script.js`)

这是实现所有功能的核心,我们将在这里处理表单提交、数据存储和页面切换。

（图片来源网络，侵删）

document.addEventListener('DOMContentLoaded', () => {
    // --- 获取 DOM 元素 ---
    const loginForm = document.getElementById('loginForm');
    const registerForm = document.getElementById('registerForm');
    const loginFormDiv = document.getElementById('login-form');
    const registerFormDiv = document.getElementById('register-form');
    const welcomePageDiv = document.getElementById('welcome-page');
    const showRegisterLink = document.getElementById('show-register');
    const showLoginLink = document.getElementById('show-login');
    const logoutBtn = document.getElementById('logout-btn');
    const welcomeUsernameSpan = document.getElementById('welcome-username');
    // --- 初始化：检查用户是否已登录 ---
    // 页面加载时，检查 localStorage 中是否有 token
    const token = localStorage.getItem('authToken');
    if (token) {
        // 如果有 token，显示欢迎页面
        const username = localStorage.getItem('currentUser');
        showWelcomePage(username);
    }
    // --- 页面切换函数 ---
    function showLoginForm() {
        loginFormDiv.style.display = 'block';
        registerFormDiv.style.display = 'none';
        welcomePageDiv.style.display = 'none';
    }
    function showRegisterForm() {
        loginFormDiv.style.display = 'none';
        registerFormDiv.style.display = 'block';
        welcomePageDiv.style.display = 'none';
    }
    function showWelcomePage(username) {
        loginFormDiv.style.display = 'none';
        registerFormDiv.style.display = 'none';
        welcomePageDiv.style.display = 'block';
        welcomeUsernameSpan.textContent = username;
    }
    // --- 事件监听器 ---
    // 注册链接点击事件
    showRegisterLink.addEventListener('click', (e) => {
        e.preventDefault(); // 阻止链接的默认跳转行为
        showRegisterForm();
    });
    // 登录链接点击事件
    showLoginLink.addEventListener('click', (e) => {
        e.preventDefault();
        showLoginForm();
    });
    // 退出登录按钮点击事件
    logoutBtn.addEventListener('click', () => {
        // 清除 localStorage 中的数据
        localStorage.removeItem('authToken');
        localStorage.removeItem('currentUser');
        // 显示登录表单
        showLoginForm();
        alert('你已成功退出登录。');
    });
    // --- 表单提交处理 ---
    // 注册表单提交
    registerForm.addEventListener('submit', (e) => {
        e.preventDefault();
        const username = document.getElementById('reg-username').value.trim();
        const password = document.getElementById('reg-password').value;
        const confirmPassword = document.getElementById('reg-confirm-password').value;
        // 基本验证
        if (!username || !password || !confirmPassword) {
            alert('所有字段都必须填写！');
            return;
        }
        if (password !== confirmPassword) {
            alert('两次输入的密码不一致！');
            return;
        }
        // 从 localStorage 获取现有用户列表（如果没有则为空数组）
        const users = JSON.parse(localStorage.getItem('users')) || [];
        // 检查用户名是否已存在
        if (users.some(user => user.username === username)) {
            alert('该用户名已被注册！');
            return;
        }
        // 添加新用户
        users.push({ username, password }); // **注意：密码是明文存储的，非常不安全！**
        // 保存更新后的用户列表到 localStorage
        localStorage.setItem('users', JSON.stringify(users));
        alert('注册成功！请登录。');
        // 清空表单并切换到登录页面
        registerForm.reset();
        showLoginForm();
    });
    // 登录表单提交
    loginForm.addEventListener('submit', (e) => {
        e.preventDefault();
        const username = document.getElementById('login-username').value.trim();
        const password = document.getElementById('login-password').value;
        // 基本验证
        if (!username || !password) {
            alert('用户名和密码不能为空！');
            return;
        }
        // 从 localStorage 获取用户列表
        const users = JSON.parse(localStorage.getItem('users')) || [];
        // 查找匹配的用户
        const user = users.find(u => u.username === username && u.password === password);
        if (user) {
            // 登录成功
            // 创建一个简单的 token (在实际项目中，这应该由服务器生成)
            const token = 'token_' + Date.now(); 
            // 保存 token 和当前用户名到 localStorage
            localStorage.setItem('authToken', token);
            localStorage.setItem('currentUser', username);
            alert('登录成功！');
            // 显示欢迎页面
            showWelcomePage(username);
        } else {
            // 登录失败
            alert('用户名或密码错误！');
        }
    });
});

完整代码示例

将上面的 HTML, CSS, JavaScript 代码分别保存到对应的文件中，然后用浏览器打开 index.html，你就可以看到一个可以工作的注册登录系统了。

工作流程：

打开 index.html，默认显示登录表单。
点击“立即注册”链接，切换到注册表单。
填写用户名、密码和确认密码，点击“注册”，如果用户名已存在或密码不匹配，会收到提示，成功后会自动跳转到登录页面。
在登录页面输入你刚刚注册的用户名和密码,点击“登录”，如果成功，会跳转到欢迎页面，并显示你的用户名。
点击“退出登录”按钮，会清除数据并返回登录页面。
刷新页面,你会发现你仍然处于登录状态，因为我们使用了 localStorage 来持久化登录信息。

安全性和进阶提示

⚠️ 重要警告： 这个示例使用了 localStorage 存储用户密码，并且是明文存储，这在真实世界中是极其危险的，任何可以访问你浏览器的人（或通过恶意脚本）都能看到所有用户的密码。

这是一个纯前端演示，绝对不能用于生产环境！

（图片来源网络，侵删）

进阶和安全的做法：

后端服务器：所有用户数据（密码必须加密后存储）和认证逻辑都应该放在后端服务器上（例如使用 Node.js, Python, Java, PHP 等）。
密码加密：在前端注册时，就应该使用像 bcrypt 或 Argon2 这样的强哈希算法对密码进行哈希处理，然后将哈希值发送给服务器存储。永远不要在数据库中存储明文密码。
真正的 Token：登录成功后，由服务器生成一个 JWT (JSON Web Token)，这个 token 包含用户信息和过期时间，客户端（浏览器）存储它，并在后续的请求中通过 HTTP Header (如 Authorization: Bearer <token>) 发送给服务器进行身份验证。
HTTPS：所有与服务器之间的通信都必须通过 HTTPS 协议进行加密，防止中间人攻击窃听你的 token 和数据。
防止 XSS 攻击：不要直接使用 innerHTML 来插入用户生成的内容，以防止跨站脚本攻击，使用 textContent 或 createElement 等安全的方法。

这个教程为你提供了一个使用原生 JavaScript 实现注册登录流程的绝佳起点，但请务必理解其局限性，并在构建真实应用时采用更安全的架构。

javascript网页注册登录

功能概述

准备工作

index.html

style.css

核心逻辑 - JavaScript (script.js)

完整代码示例

安全性和进阶提示

`index.html`

`style.css`

核心逻辑 - JavaScript (`script.js`)