onblur比oninput更适合密码确认校验，因其在用户离开字段时触发，避免“输入即报错”；需配合trim、严格相等比较及submit事件二次校验，并兼顾移动端onchange补充和autocomplete影响。
为什么 onblur 比 oninput 更适合密码确认校验
直接监听 oninput 会导致“输入即报错”，用户刚敲第一个字母，confirmPassword 还空着，就立刻标红——体验差，且干扰输入节奏。真实场景中，一致性检查应在用户完成填写、离开字段时触发，也就是 onblur 最自然。
注意：不能只靠前端校验，后端必须重复验证；但前端即时反馈能减少无效提交。
-
onblur触发时机明确：用户点别处、Tab 切出、鼠标移出再点击等都会触发 - 若用
oninput，需加防抖（如setTimeout延迟 300ms），否则频繁 DOM 操作影响性能 - 移动端软键盘收起不总触发
onblur，建议额外监听onchange作为补充（尤其 iOS Safari）
如何用原生 JS 比较两个 input[type="password"] 的值
核心就是取值、比字符串、设样式。重点不是“相等与否”，而是“什么时候取、怎么取、取完怎么反馈”。
常见错误是直接比较 DOM 元素对象或没 trim 空格：
立即学习“前端免费学习笔记（深入）”；
- 务必用
.value取字符串值，不是.innerText或.textContent - 密码字段可能含首尾空格（比如用户误触空格键），应统一用
.trim() - 区分大小写：密码通常区分大小写，不要加
.toLowerCase() - 避免用
==，一律用===防止类型隐式转换
示例片段：
document.getElementById('confirmPassword').addEventListener('blur', function() {
const pwd = document.getElementById('password').value.trim();
const confirm = this.value.trim();
const errorEl = document.getElementById('confirmError');
if (pwd !== confirm) {
errorEl.textContent = '两次输入的密码不一致';
errorEl.style.display = 'block';
} else {
errorEl.style.display = 'none';
}
});
表单提交前必须再次校验 submit 事件
用户可能跳过 onblur（比如直接点提交按钮），也可能绕过 JS（禁用脚本或调试器改 DOM），所以 submit 事件里必须重做一次判断。
- 在
form.addEventListener('submit', ...)中调用相同逻辑，不要依赖之前缓存的结果 - 校验失败时必须
event.preventDefault()，否则表单仍会提交 - 可复用已有函数，避免逻辑分散，例如封装为
validatePasswordMatch() - 如果用了
required属性，注意它只检查非空，不检查一致性
兼容性与移动端特殊处理
Android 键盘切换字段有时不触发 onblur，iOS 在某些版本中 onblur 和 onchange 顺序不稳定。这不是 bug，是输入法行为差异。
- 给
confirmPassword同时绑定onblur和onchange，任一触发都执行校验 - 避免用
focusout替代onblur：前者冒泡，后者更可靠 - 不要依赖
input事件监听剪贴板粘贴——用户可能右键粘贴，但onpaste才是正确钩子 - 部分国产浏览器对
type="password"的value读取有延迟，确保 DOM 已就绪再绑定事件
真正容易被忽略的是：密码字段的 autocomplete="new-password" 属性会影响自动填充行为，可能导致两次填入不同值而不触发校验——测试时务必手动输入，而非依赖浏览器填充。
