JS函数无法验证HTML表单邮箱匹配问题求助

核心错误分析 #

• 混淆DOM元素与输入值：你最初直接获取了输入框的.value，导致变量存储的是字符串而非DOM元素——字符串没有addEventListener和.style属性，这是代码失效、VS Code无代码提示的根本原因。
• 变量大小写不统一：代码里混用了cemail和cEmail，JS是大小写敏感的，cEmail会被判定为未定义变量。
• 事件绑定对象错误：试图给字符串绑定change事件，完全不符合语法规则。

修复后的完整代码 #

HTML（仅修正拼写错误：Confrim → Confirm） #

<form id="userInfo">
    <label for="fname">First Name:</label>
    <input type="text" id="fname" name="fname" placeholder="John"><br>
    <label for="lname">Last Name:</label>
    <input type="text" id="lname" name="lname" placeholder="Doe"><br>
    <label for="email">Email:</label>
    <input type="text" id="email" name="email" placeholder="abc123@gmail.com"><br>
    <label for="cemail">Confirm Email:</label>
    <input type="text" id="cemail" name="cemail" placeholder="abc123@gmail.com"><br>
    <label for="question">Write Question:</label>
    <textarea id="question" name="question" placeholder="My question is..."></textarea><br>
    <input type="submit" value="Submit">
</form>

JavaScript（修复所有逻辑错误） #

// 确保DOM加载完成后执行代码，避免null引用
document.addEventListener('DOMContentLoaded', function() {
    // 先获取DOM元素，而非直接取value
    const emailInput = document.querySelector("#email");
    const cemailInput = document.querySelector("#cemail");

    // 给确认邮箱输入框绑定change事件
    cemailInput.addEventListener("change", checkEmailMatch);

    function checkEmailMatch() {
        // 实时获取当前输入值并去除首尾空格
        const emailValue = emailInput.value.trim();
        const cemailValue = cemailInput.value.trim();

        if (emailValue === cemailValue) {
            emailInput.style.backgroundColor = "green";
            cemailInput.style.backgroundColor = "green";
        } else {
            emailInput.style.backgroundColor = "red";
            cemailInput.style.backgroundColor = "red";
        }
    }
});

补充说明 #

• 代码提示恢复：现在变量存储的是标准HTML输入元素，VS Code会自动识别类型，.value、.style等属性的代码提示会正常显示。
• 可选优化：如果想要实时验证（用户输入时立刻反馈），可以把事件从change换成input。

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