使用JavaScript实现表单提交前邮箱一致性验证的问题排查

你的代码存在几个关键问题导致验证失效，逐一修正后就能实现预期效果：

问题分析 #

• 提交按钮未设置id="submit"，导致document.getElementById("submit")无法找到元素，事件绑定完全没生效
• 验证时错误获取了姓名输入框(first)，而非目标邮箱输入框(email)
• 直接比较两个DOM元素对象(email === confirm)，这永远不会相等，应该比较输入框的value属性值
• 监听按钮click事件不如监听表单的submit事件可靠（表单还能通过回车触发提交），且事件对象未正确传入函数

修正后的代码 #

HTML #

<form action="http://northcarolinatest.atwebpages.com/Form.html" method="POST" id="form" autocomplete="off">
  <label for="first">First Name:</label>
  <input type="text" name="first" id="first" placeholder="John" required>
  <br>
  <label for="last">Last Name:</label>
  <input type="text" name="last" id="last" placeholder="Doe" required>
  <br>
  <label for="email">Email Address:</label>
  <input type="email" name="email" id="email" placeholder="JohnDoe@gmail.com" required>
  <br>

  <label for="confirm">Confirm Email:</label>
  <input type="email" name="confirm" id="confirm" placeholder="JohnDoe@gmail.com" required>
  <br>

  <label for="question">Question:</label>
  <input type="text" name="question" id="question" placeholder="Where do I go to register to vote?" width="500px" required>
  <br>
  <input type="Submit" id="submit">
</form>

JavaScript #

// 监听表单submit事件，覆盖所有提交触发场景
document.getElementById("form").addEventListener("submit", checkEmail);

function checkEmail(event) {
  // 获取两个邮箱输入框的内容
  const emailValue = document.getElementById("email").value;
  const confirmValue = document.getElementById("confirm").value;

  if (emailValue !== confirmValue) {
    // 阻止表单提交
    event.preventDefault();
    alert("Make sure the emails match");
  }
  // 内容一致时无需额外处理，表单自动提交
}

说明 #

• 改用表单submit事件监听，避免遗漏回车提交等场景
• 直接对比输入框的value值，确保一致性判断准确
• 显式接收event参数，正确调用preventDefault()阻止提交

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