本文详解如何正确比较两个邮箱输入框的值，并仅在不匹配时触发 alert 提示，避免误报；核心在于获取 input 元素的 value 属性而非 dom 对象本身。
本文详解如何正确比较两个邮箱输入框的值，并仅在不匹配时触发 alert 提示，避免误报；核心在于获取 input 元素的 value 属性而非 dom 对象本身。
在网页表单验证中，常见的“邮箱与确认邮箱是否一致”校验，常因 JavaScript 获取值的方式错误导致逻辑失效。你当前代码的问题在于：
let email = document.getElementById("email");
let confirmation = document.getElementById("confirmation");
if (email != confirmation) { ... }
这里 email 和 confirmation 是两个 DOM 元素对象（如 <input id="email">），它们永远不相等（即使内容相同），因此 if 条件恒为 true，造成“每次点击都弹窗”的错误行为。
✅ 正确做法是：比较元素的 .value 属性，即用户实际输入的字符串内容：
function alertBox() {
const emailInput = document.getElementById("email");
const confirmInput = document.getElementById("confirmation");
if (emailInput.value !== confirmInput.value) {
alert("Email addresses do not match. Please try again.");
}
}
? 提示：使用严格相等
!==替代!=，可避免隐式类型转换带来的意外结果（例如空字符串""与0的误判）。
完整 HTML 结构保持不变，但建议为表单添加 onsubmit="return false" 防止意外提交（尽管无 action，部分浏览器仍可能刷新页面），并优化按钮语义：
? 注意事项：
- 添加
type="email"可启用浏览器原生邮箱格式校验（如含@符号）； -
required属性确保字段非空，提升基础体验； -
type="button"明确声明按钮不触发表单提交，比默认submit更安全； - 若后续需扩展功能（如高亮错误字段、阻止提交），建议改用事件监听器替代内联
onclick，例如：document.querySelector('button').addEventListener('click', alertBox);
该方案简洁、可靠，完全满足课程要求：纯前端校验、仅在邮箱不一致时提示、不向服务器提交表单。
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
