原生HTML无法真正校验两次密码一致性，仅能通过type="password"和表单属性提供基础提示；必须用JavaScript监听input事件、缓存DOM引用、空值不提示、区分大小写比对，并在提交前终审防绕过。
怎么用原生 HTML 实现两次输入密码比对
纯 HTML 无法真正“校验”一致性——它只能靠 type="password" 和表单约束做基础提示，真验证必须交由 JavaScript。浏览器内置的 pattern 或 required 都不关心两个字段是否相等。
常见错误现象：input[type="password"] 没绑定事件，点提交时毫无反应；或只比对了值但没同步反馈（比如没清空第二次输入框、没加红框提示）。
使用场景：注册页、修改密码页这类需要用户重复确认的环节。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- HTML 层只负责结构清晰：给两个
<input>分别设id="password"和id="confirm-password"，便于 JS 获取 - 不要依赖
name相同来“自动关联”，容易混淆，也不利于后续取值 - 避免在
onchange或onblur中直接弹alert()，体验差且移动端不友好 - 推荐监听
input事件（实时响应），而非change（失焦才触发）
JavaScript 怎么安全比对两个密码字段
比对逻辑本身很简单，但关键在“何时比”和“比完怎么反馈”。很多人写成一提交就报错，其实应该边输边提示，降低用户挫败感。
性能影响几乎为零，但要注意 DOM 查询频率——别在每次 input 里反复调用 document.getElementById()，提前缓存引用。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 用
addEventListener('input', ...)绑定到确认密码框，避免监听两个输入框造成冗余 - 比对前先检查两个字段是否非空，空值时不标红也不报错（否则用户刚点进来就看到红框）
- 区分大小写比对：
passwordValue === confirmPasswordValue，别用==或忽略空格 - 比对失败时，给确认框加
class="error"并更新旁边提示文案，比如<span class="hint">两次输入不一致</span>
为什么不能只靠 form 的 novalidate 或 checkValidity()
novalidate 是关掉浏览器默认校验（比如邮箱格式），但它根本不认识“两个密码要一样”这个规则；checkValidity() 只能查单个字段是否满足 required、pattern 等，没法跨字段联动。
错误做法：给确认密码框加 pattern="(?=.*[a-z])" 这类正则，以为能控制一致性——实际只是重复校验强度，和“跟第一次是否相同”完全无关。
兼容性注意：所有现代浏览器都支持 input 事件和 setCustomValidity()，但如果你用 setCustomValidity('') 清除错误状态，记得在比对通过后立刻调用，否则错误提示会残留。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 不要试图用
setCustomValidity()在确认框上伪造“一致性错误”，它只对本字段生效，且会干扰原生提示样式 - 若需统一错误展示，用自定义 DOM 元素（如
<div class="form-error"></div>）更可控 - 提交前仍需再比对一次，防止用户绕过实时校验（比如剪切粘贴后删掉一个字符）
移动端输入时容易被忽略的细节
iOS Safari 和 Android Chrome 对 type="password" 的软键盘行为不同，有些机型会在第二次输入时自动填充第一个密码——这会导致用户没输就“看似一致”，但其实不是本人操作。
更隐蔽的问题：部分安卓输入法在切换输入框时会触发两次 input 事件，导致比对逻辑误判。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 在比对前加个简单防抖（
setTimeout+clearTimeout），延迟 100ms 再执行，避开输入法抖动 - 禁止自动填充：给两个密码框都加
autocomplete="new-password"（注意不是off，那个已不被支持） - 不要隐藏确认密码框的“显示密码”按钮（
type="text"切换），移动端用户常因看不清而输错
