本文讲解如何正确使用 javascript 比较两个邮箱输入框的值，并仅在不匹配时触发 alert 提示，避免误判——关键在于获取 input 元素的 value 属性而非 dom 对象本身。
本文讲解如何正确使用 javascript 比较两个邮箱输入框的值，并仅在不匹配时触发 alert 提示，避免误判——关键在于获取 input 元素的 value 属性而非 dom 对象本身。
在表单验证中，常见需求是检查“邮箱”与“确认邮箱”是否一致。初学者常犯的错误是直接比较 DOM 元素对象（如 email !== confirmation），这永远返回 true，因为两个 HTMLInputElement 实例内存地址不同，与用户输入内容无关——导致无论输入是否相同，都会弹出警告。
✅ 正确做法是访问元素的 .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.");
}
}注意：我们使用 const 声明变量更符合现代 JavaScript 实践；emailInput.value 和 confirmInput.value 返回的是字符串，空输入时为 ""，可自然参与字符串比较。
? 补充建议（提升健壮性）：
立即学习“Java免费学习笔记（深入）”；
-
去除首尾空格：用户可能无意中输入空格，建议使用
.trim()：if (emailInput.value.trim() !== confirmInput.value.trim()) { ... } -
忽略大小写（可选）：邮箱通常不区分大小写，可统一转小写：
if (emailInput.value.trim().toLowerCase() !== confirmInput.value.trim().toLowerCase()) { ... } -
防空提交：若任一字段为空，也可单独提示（本题未要求，但生产环境推荐）：
if (!emailInput.value.trim() || !confirmInput.value.trim()) { alert("Please fill in both email fields."); return; }
最后，确保 HTML 结构完整且按钮调用无误。无需修改 <form></form> 的 method 或添加 action，因题目明确要求“不提交至服务器”，纯前端校验即可：
<form method="POST">
<p>
<label for="email">Email Address:</label>
<input type="email" name="email" id="email" required>
</p>
<p>
<label for="confirmation">Confirm Email:</label>
<input type="email" name="confirmation" id="confirmation" required>
</p>
<p>
<textarea placeholder="Ask question here" id="textarea"></textarea>
</p>
</form>
<button onclick="alertBox()">Submit</button>? 小结：DOM 元素 ≠ 元素值；验证表单内容，永远操作 .value；使用 ===/!== 替代 ==/!= 避免隐式类型转换；简单、精准、可维护，才是合格的前端验证逻辑。
