应使用 input 事件实时校验密码一致性，空值时跳过提示，成功/失败均需更新反馈；需补充 change/paste 监听以兼容自动填充，且服务端必须二次校验。
用 JavaScript 监听 input 事件实时比对两个密码字段
核心判断逻辑很简单：拿到 password 和 confirm_password 两个 <input> 的 .value，字符串全等即可。但关键在「什么时候校验」和「怎么反馈」。blur 太滞后，input 事件最实用——用户每敲一个键就触发，能即时提示错误。
常见错误是只在校验失败时加提示，却忘了成功时清除提示或还原样式。更隐蔽的问题是没处理空值：两个都为空时，不应报“不一致”，而应视为未填写，避免干扰用户输入流程。
const pwd = document.getElementById('password');
const confirm = document.getElementById('confirm_password');
const msg = document.getElementById('confirm_msg');
<p>confirm.addEventListener('input', () => {
if (confirm.value === '' && pwd.value === '') return;
if (confirm.value === pwd.value) {
msg.textContent = '✅ 密码一致';
msg.style.color = 'green';
} else {
msg.textContent = '❌ 密码不一致';
msg.style.color = 'red';
}
});</p>
为什么不能只靠 required 或 pattern 属性
required 只管非空，pattern 只能单字段正则校验（比如至少8位、含数字），它们都无法跨字段比对。HTML5 原生没有 matches 或 equalTo 这类属性，硬加 pattern=".+" 对确认框毫无意义。
有人试图用 setCustomValidity() 配合 submit 事件做一次性校验，但问题在于：用户填完密码后直接点提交，中间没有任何提示，体验断层。而且如果表单有其他校验（如邮箱格式），submit 时混在一起报错，用户很难定位是密码不一致还是邮箱写错了。
- 浏览器原生校验不支持字段间依赖关系
-
setCustomValidity('')必须在每次输入后手动调用，否则旧错误会残留 - 移动端软键盘频繁弹出/收起时，
blur不可靠，input更稳
防止绕过校验的边界情况
用户可能复制粘贴、拖拽填入、用密码管理器自动填充，这些操作不一定触发 input。所以得监听 change 和 paste 作为补充，但注意别重复绑定——input 在大多数现代浏览器中已覆盖粘贴行为，真正需要补的是 Safari 对自动填充的响应延迟。
更关键的是服务端绝不信任前端校验。哪怕前端显示“✅ 一致”，后端仍要二次比对 password 和 confirm_password 字段值，且必须在哈希存储前完成——否则攻击者绕过 JS 就能提交任意两个不同密码。
- 自动填充后，Safari 可能延迟触发
input，加个setTimeout(() => { /* 校验 */ }, 100)容错 - 不要禁用右键或
contextmenu事件来防粘贴——徒增 accessibility 问题，且无效 - 如果使用框架（如 React），记得用
useEffect或watch响应值变化，而非直接绑 DOM 事件
样式反馈要明确作用域，避免误判
只改提示文字颜色远远不够。用户扫一眼可能忽略红字，尤其在表单字段密集时。建议同时操作关联的 <input> 元素：confirm_password 输入框加红色边框，password 字段旁加小图标，或者用 aria-live="polite" 让读屏器可感知状态变化。
切忌全局提示（比如顶部弹 toast）。用户正在填第 5 个字段，突然顶部冒个“密码不一致”，他得抬头、定位、再低头找哪错了——这违背表单就近反馈原则。错误信息必须紧贴被校验的字段下方或右侧。
另外，别用纯图标（如 ❌）替代文字。无障碍要求至少提供文本替代，<span role="alert">密码不一致</span> 是更稳妥的选择。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
