将HTML输入内容存储到JavaScript数组并实现登录验证

嘿，我给你整了个完整的实现代码，完全符合你的需求——注册信息存JavaScript数组，登录时验证匹配。直接复制就能跑，我还加了基础的表单校验和用户名重复检测，更贴近实际场景~

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>登录注册示例</title>
    <style>
        .form-container {
            margin: 20px;
            padding: 20px;
            border: 1px solid #ccc;
            width: 300px;
            border-radius: 8px;
        }
        .form-group {
            margin-bottom: 15px;
        }
        label {
            display: block;
            margin-bottom: 5px;
        }
        input {
            width: 100%;
            padding: 8px;
            box-sizing: border-box;
        }
        button {
            padding: 8px 16px;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <div class="form-container">
        <h3>注册</h3>
        <form id="registerForm">
            <div class="form-group">
                <label for="regUsername">用户名:</label>
                <input type="text" id="regUsername" required>
            </div>
            <div class="form-group">
                <label for="regPassword">密码:</label>
                <input type="password" id="regPassword" required>
            </div>
            <button type="submit">注册</button>
        </form>
    </div>

    <div class="form-container">
        <h3>登录</h3>
        <form id="loginForm">
            <div class="form-group">
                <label for="loginUsername">用户名:</label>
                <input type="text" id="loginUsername" required>
            </div>
            <div class="form-group">
                <label for="loginPassword">密码:</label>
                <input type="password" id="loginPassword" required>
            </div>
            <button type="submit">登录</button>
        </form>
    </div>

    <script>
        // 存储用户信息的全局数组
        const users = [];

        // 注册表单提交逻辑
        document.getElementById('registerForm').addEventListener('submit', function(e) {
            e.preventDefault(); // 阻止表单默认跳转
            
            const username = document.getElementById('regUsername').value;
            const password = document.getElementById('regPassword').value;

            // 检查用户名是否已存在
            const userExists = users.some(user => user.username === username);
            if (userExists) {
                alert('该用户名已被占用，请换一个！');
                return;
            }

            // 把新用户存入数组
            users.push({ username, password });
            alert('注册成功！');
            this.reset(); // 清空注册表单
        });

        // 登录表单验证逻辑
        document.getElementById('loginForm').addEventListener('submit', function(e) {
            e.preventDefault();
            
            const username = document.getElementById('loginUsername').value;
            const password = document.getElementById('loginPassword').value;

            // 在数组中查找用户名+密码匹配的用户
            const matchedUser = users.find(user => user.username === username && user.password === password);

            if (matchedUser) {
                alert(`登录成功！欢迎回来，${username}！`);
                this.reset();
            } else {
                alert('用户名或密码错误，请重试！');
            }
        });
    </script>
</body>
</html>

核心逻辑拆解 #

• 用户存储：用全局数组users保存注册用户，每个元素是包含username和password的对象
• 注册流程：
  1. 获取表单输入值，先校验用户名是否重复
  2. 校验通过后把用户信息推入数组，提示成功并清空表单
• 登录流程：
  1. 获取登录输入值，遍历数组查找匹配项
  2. 根据匹配结果给出对应提示，成功后清空登录表单

直接把代码保存成HTML文件就能在浏览器里测试啦，注册几个用户后就能体验完整的登录验证流程~

内容的提问来源于stack exchange，提问作者Hemath