免费WordPress环境下基于HTML、JS、CSS实现带重置密码的会员登录页

针对免费WordPress无法使用后端语言和插件的限制，以下是基于HTML/CSS/JavaScript的完整解决方案，先修正你原代码的问题，再添加重置密码功能：

原代码问题修正 #

1. 语法错误：Admin对象定义缺少=，正确写法是var Admin = {...}
2. 对象字面量this无效：不能在对象字面量里用this引用自身属性，Fullname和Greeting需要单独处理
3. 类名拼写错误：密码输入框的singInInput应为signInInput
4. 表单默认提交行为：点击登录按钮会触发页面刷新，需用event.preventDefault()阻止
5. 无效ID命名：元素ID不能包含空格，incorrect Password改为error-message

完整实现代码 #

<!DOCTYPE html>
<html>
<head>
    <style>
        .auth-container {
            max-width: 400px;
            margin: 2rem auto;
            padding: 2rem;
            border: 1px solid #eee;
            border-radius: 8px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }
        .form-group {
            margin-bottom: 1.5rem;
        }
        .signInLabel {
            display: block;
            margin-bottom: 0.5rem;
            font-weight: 500;
        }
        .signInInput {
            width: 100%;
            padding: 0.8rem;
            border: 1px solid #ddd;
            border-radius: 4px;
            box-sizing: border-box;
        }
        .btn {
            padding: 0.8rem 1.5rem;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-weight: 500;
        }
        .btn-primary {
            background-color: #0073aa;
            color: white;
            width: 100%;
        }
        .btn-secondary {
            background-color: #f0f0f0;
            color: #333;
            margin-top: 0.5rem;
        }
        .error-message {
            color: #dc3232;
            margin-top: 1rem;
            text-align: center;
        }
        .hidden {
            display: none;
        }
        .link-text {
            color: #0073aa;
            cursor: pointer;
            text-decoration: underline;
            font-size: 0.9rem;
            display: block;
            text-align: center;
            margin-top: 1rem;
        }
    </style>
</head>
<body>
    <div class="auth-container">
        <h1 style="text-align: center;">会员登录</h1>
        <!-- 登录表单 -->
        <form id="login-form">
            <div class="form-group">
                <label for="username" class="signInLabel">用户名</label>
                <input type="text" name="Uname" placeholder="输入用户名" id="username" class="signInInput" required/>
            </div>
            <div class="form-group">
                <label for="password" class="signInLabel">密码</label>
                <input type="password" name="Pword" placeholder="输入密码" id="password" class="signInInput" required/>
            </div>
            <button type="submit" id="signInSubmit" class="btn btn-primary">登录</button>
            <p id="error-message" class="error-message"></p>
            <span id="forgot-password-link" class="link-text">忘记密码？</span>
        </form>

        <!-- 重置密码表单 -->
        <form id="reset-form" class="hidden">
            <h2 style="text-align: center;">重置密码</h2>
            <div class="form-group">
                <label for="reset-username" class="signInLabel">用户名</label>
                <input type="text" name="resetUname" placeholder="输入用户名" id="reset-username" class="signInInput" required/>
            </div>
            <div class="form-group">
                <label for="new-password" class="signInLabel">新密码</label>
                <input type="password" name="newPword" placeholder="输入新密码" id="new-password" class="signInInput" required/>
            </div>
            <div class="form-group">
                <label for="confirm-password" class="signInLabel">确认新密码</label>
                <input type="password" name="confirmPword" placeholder="确认新密码" id="confirm-password" class="signInInput" required/>
            </div>
            <button type="submit" id="reset-submit" class="btn btn-primary">重置密码</button>
            <button type="button" id="back-to-login" class="btn btn-secondary">返回登录</button>
            <p id="reset-error-message" class="error-message"></p>
        </form>
    </div>

    <script type="text/javascript">
        // 初始化用户数据（第一次加载时存入localStorage）
        document.addEventListener('DOMContentLoaded', function() {
            if (!localStorage.getItem('members')) {
                const initialMembers = [
                    {
                        FirstName: "Admin",
                        LastName: "1010",
                        Fullname: "Admin1010",
                        Greeting: "Welcome Back Admin1010",
                        id: "00001",
                        Username: "Admin",
                        Password: "1010"
                    }
                    // 可以在这里添加更多初始会员
                ];
                localStorage.setItem('members', JSON.stringify(initialMembers));
            }
        });

        // 登录验证
        document.getElementById('login-form').addEventListener('submit', function(e) {
            e.preventDefault(); // 阻止表单默认提交
            const username = document.getElementById('username').value.trim();
            const password = document.getElementById('password').value.trim();
            const errorElement = document.getElementById('error-message');
            const members = JSON.parse(localStorage.getItem('members'));
            
            const user = members.find(m => m.Username === username);
            
            if (user && user.Password === password) {
                errorElement.textContent = '';
                alert(user.Greeting); // 这里可以替换为跳转到会员页面的逻辑
                // 示例：window.location.href = '/member-page';
            } else {
                errorElement.textContent = '用户名或密码错误';
            }
        });

        // 切换到重置密码表单
        document.getElementById('forgot-password-link').addEventListener('click', function() {
            document.getElementById('login-form').classList.add('hidden');
            document.getElementById('reset-form').classList.remove('hidden');
        });

        // 返回登录表单
        document.getElementById('back-to-login').addEventListener('click', function() {
            document.getElementById('reset-form').classList.add('hidden');
            document.getElementById('login-form').classList.remove('hidden');
            document.getElementById('reset-error-message').textContent = '';
        });

        // 重置密码逻辑
        document.getElementById('reset-form').addEventListener('submit', function(e) {
            e.preventDefault();
            const resetUsername = document.getElementById('reset-username').value.trim();
            const newPassword = document.getElementById('new-password').value.trim();
            const confirmPassword = document.getElementById('confirm-password').value.trim();
            const errorElement = document.getElementById('reset-error-message');
            const members = JSON.parse(localStorage.getItem('members'));
            
            // 验证密码一致
            if (newPassword !== confirmPassword) {
                errorElement.textContent = '两次输入的密码不一致';
                return;
            }
            
            // 查找用户
            const userIndex = members.findIndex(m => m.Username === resetUsername);
            if (userIndex === -1) {
                errorElement.textContent = '该用户名不存在';
                return;
            }
            
            // 更新密码
            members[userIndex].Password = newPassword;
            localStorage.setItem('members', JSON.stringify(members));
            errorElement.textContent = '密码重置成功，请返回登录';
            // 清空表单
            document.getElementById('reset-form').reset();
        });
    </script>
</body>
</html>

关键功能说明 #

• 用户数据持久化：用localStorage存储会员信息，页面刷新后数据不会丢失，也支持重置密码后的更新
• 登录验证：匹配用户名和密码，给出明确的错误提示
• 重置密码流程：验证用户名存在、两次密码输入一致后，更新存储的密码
• UI优化：添加基础样式，表单切换流畅，符合用户体验
• 无后端依赖：完全基于前端技术实现，适配免费WordPress环境

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