本文详解如何通过监听表单的 submit 事件，在用户点击提交时实时比对两个邮箱输入框的值，并在不匹配时阻止提交、弹出提示，避免因粗心导致的邮箱错误。

本文详解如何通过监听表单的 `submit` 事件，在用户点击提交时实时比对两个邮箱输入框的值，并在不匹配时阻止提交、弹出提示，避免因粗心导致的邮箱错误。

在 Web 表单开发中，邮箱二次确认（如“邮箱”与“确认邮箱”）是常见且关键的校验环节。若仅监听按钮点击事件（如 click），极易因表单可通过回车键提交、无障碍访问或程序化触发而失效；正确做法是监听

元素自身的 submit 事件

——它能捕获所有合法提交途径，确保校验逻辑无遗漏。

以下是修复后的完整实现方案：

Java JDK 25

Java JDK 25 来自 OpenJDK 官方归档，版本为 JDK 25，本条下载地址已指向官方 Windows x64 zip 安装包直链，适合调试旧项目或兼容旧版 Java 运行环境。

下载

✅ 正确监听 submit 事件并阻止默认行为

Email Address:
Confirm Email:

document.getElementById("form").addEventListener("submit", function (event) {
  const emailInput = document.getElementById("email");     // 注意：原 HTML 中 ID 是 "email"，非 "first"
  const confirmInput = document.getElementById("confirm");

  // 获取实际输入的字符串值（.value），而非 DOM 元素本身
  if (emailInput.value.trim() === confirmInput.value.trim()) {
    // 邮箱一致，允许提交
    return; // 默认行为（提交）将正常执行
  } else {
    // 邮箱不一致，阻止提交并提示用户
    event.preventDefault();
    alert("Make sure the emails match");
  }
});

⚠️ 关键修正说明

• 事件目标错误：原代码监听了 #submit 按钮的 click，但该按钮在 HTML 中并未设置 id="submit"，且即使存在，也无法覆盖回车提交等场景。应监听 #form 的 submit 事件。
• 值比较错误：email === confirm 比较的是两个 DOM 元素对象引用，恒为 false。必须使用 .value 获取输入内容，并建议 .trim() 去除首尾空格，避免空格导致误判。
• 事件参数缺失：checkEmail() 函数未声明 event 参数，导致 event.preventDefault() 报错。箭头函数或普通函数均需显式接收事件对象。
• HTML 小修正： 应写作 （小写），确保语义规范；同时注意字段 ID 与 JS 中引用一致（如邮箱字段 ID 是 "email"，不是 "first"）。

✅ 进阶建议（提升用户体验）

• 替换 alert() 为更友好的内联提示（如红色文字、边框高亮）：

  confirmInput.style.borderColor = "red";
  confirmInput.setCustomValidity("Emails do not match");

• 结合 setCustomValidity() 利用浏览器原生验证 API，使表单在 checkValidity() 调用时返回 false，并支持 :invalid CSS 伪类样式。
• 添加防抖或实时校验（如 blur 或 input 事件），即时反馈，减少提交失败率。

正确绑定 submit 事件、严谨取值、合理阻止默认行为，是实现可靠前端表单校验的核心三要素。务必以表单元素为监听主体，而非提交按钮——这是健壮性与可访问性的双重保障。

Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南