JavaScript处理HTML表单提交：登录页面刷新及函数未执行问题

核心问题分析 #

1. Verify函数未执行：仅定义了函数但未触发调用，导致表单提交的监听逻辑根本没生效。
2. HTML ID重复：用户名的<label>和<input>共用uname作为ID，会导致getElementById无法正确获取输入框元素。
3. 验证逻辑错误：使用||（或）判断，实际需求是用户名和密码都为admin才判定成功，应改用&&（与）。
4. 表单默认提交行为：未拦截时页面会刷新，这是表单的默认行为，e.preventDefault()需在生效的监听逻辑中执行。

修正后的代码 #

HTML代码（修复ID重复） #

<form action="" id="loginForm">
    <div class="container">
        <label for="uname"><b>Username</b></label>
        <input type="text" placeholder="Enter username" id="uname" required>

        <label for="pword"><b>Password</b></label>
        <input type="password" placeholder="Enter password" id="pword" required>

        <button type="submit">Login</button>
        <label>
            <input type="checkbox" checked="checked" name="remember"> Remember me?
        </label>
    </div>

    <div class="container" style="background-color: #f1f1f1;">
        <button type="button" class="cancelBtn">Cancel</button>
        <span class="forgot">Forgot <a href="#">password?</a></span>
    </div>
</form>

JavaScript代码（简化逻辑+确保执行） #

// 等待DOM加载完成后绑定事件，避免找不到元素
document.addEventListener('DOMContentLoaded', function() {
    const loginForm = document.getElementById("loginForm");
    const validUsername = "admin";
    const validPassword = "admin";

    loginForm.addEventListener("submit", function(e) {
        // 阻止表单默认提交刷新行为
        e.preventDefault();

        const username = document.getElementById("uname").value;
        const password = document.getElementById("pword").value;

        // 验证用户名和密码同时匹配
        if (username === validUsername && password === validPassword) {
            alert("Success");
        } else {
            alert("Fail");
        }
    });
});

关键说明 #

• 用DOMContentLoaded确保DOM元素加载完成后再绑定事件，避免因元素未加载导致的获取失败。
• 移除冗余的Verify函数，直接在DOM就绪后绑定监听，无需手动调用，逻辑更简洁。
• 修正ID重复问题，保证输入框能被正确获取。
• 将逻辑判断从||改为&&，符合“两者均为admin才成功”的需求。

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