H5中密码一致性校验需用两个独立password输入框配合JavaScript实时比对：监听confirm-pwd的input事件，trim后比对pwd值，用setCustomValidity("")通过、非空字符串报错；两字段均required并设label；submit时checkValidity兜底；移动端推荐单框+明文切换。
在 H5 中校验两次密码是否一致，不能靠单个属性自动完成，必须用两个独立的 <input type="password"> 配合 JavaScript 主动比对。浏览器原生不支持“动态 pattern 引用另一字段值”，所以关键在监听、比对、反馈三步闭环。
用 input 事件实时比对并设自定义校验
推荐在确认密码框上监听 input 事件，每次按键都立刻检查，体验更及时：
- 两个输入框都要有明确的
id（如id="pwd"和id="confirm-pwd"） - 比对前务必调用
.trim()去除首尾空格，避免因误触空格导致失败 - 使用
setCustomValidity()设置错误提示，传空字符串表示通过 - 不要只写
setCustomValidity(null)或undefined，只有空字符串有效
确保两个字段都为必填且语义清晰
如果第一个密码为空，而确认框恰好也空着，"" === "" 会误判为“一致”。所以：
- 两个
<input>都要加required属性 - 用
<label for="xxx">明确关联文字说明，比如“新密码”和“确认新密码” - 可加
autocomplete="new-password"防止浏览器自动填充干扰校验
提交前再统一触发一次校验
仅靠实时监听还不够，用户可能绕过或快速跳过。应在表单 submit 事件中兜底：
- 调用
form.checkValidity()触发所有字段的原生验证（含你设的setCustomValidity） - 若返回
false，调用event.preventDefault()阻止提交 - 也可主动调用
form.reportValidity()弹出浏览器默认错误气泡，无需自己写提示框
移动端可考虑简化逻辑
根据 2026 年实际项目趋势，很多注册流程在移动端已取消二次输入，改用“显示密码”眼睛图标提升输入准确率：
- PC 端保留双密码输入 + 实时校验
- 移动端隐藏确认密码框，仅保留一个密码框 + 可切换明文查看
- 后端仍需做密码强度校验，不能因前端简化就降低安全要求
