确认密码需用两个独立password输入框配合JavaScript手动比对，监听input或blur事件，用setCustomValidity设置校验结果，并注意inputmode和autocomplete属性优化体验。
用 input 的 type="password" 实现确认密码框
确认密码不是靠某个特殊属性自动完成的，必须用两个独立的 <input type="password">，再配合 JavaScript 手动比对值。浏览器不提供原生“确认密码”验证机制，required 或 pattern 也解决不了两次输入是否一致的问题。
监听 input 或 blur 事件做实时/失焦校验
推荐在第二个密码框（确认框）上监听 input 事件，每次用户输入就立刻比对；或者用 blur（失去焦点）更轻量，适合表单提交前最后一道检查。
常见错误是只在校验函数里读取一次 DOM 值却没更新，或把两个 input 的 value 拿反了：
- 确保两个
input都有id或其他可定位方式，比如id="pwd"和id="confirm-pwd" - 不要只依赖
pattern属性试图匹配前一个框的值——pattern是正则，不能动态引用另一字段 - 比对前先 trim()，避免空格导致误判
简单示例：
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
立即学习“前端免费学习笔记（深入）”；
<input type="password" id="pwd">
<input type="password" id="confirm-pwd">
<script>
const pwd = document.getElementById('pwd');
const confirmPwd = document.getElementById('confirm-pwd');
confirmPwd.addEventListener('input', () => {
if (pwd.value.trim() !== confirmPwd.value.trim()) {
confirmPwd.setCustomValidity('两次输入的密码不一致');
} else {
confirmPwd.setCustomValidity('');
}
});
</script>
用 setCustomValidity 配合 reportValidity 触发原生提示
直接修改 title 或插入 <span> 提示不够可靠，用户可能绕过；用 setCustomValidity 才能真正影响表单提交逻辑。
-
setCustomValidity('')表示校验通过，空字符串是关键，写成null或undefined不生效 - 调用
form.reportValidity()可主动触发所有字段的原生校验气泡（包括这个自定义错误） - 注意：如果第一个密码框本身没有
required，那即使它为空，确认框也可能“比对成功”，所以两个框都应加required
移动端键盘类型与无障碍支持别漏掉
单纯设 type="password" 在 iOS 上默认弹出数字键盘，影响字母密码输入。需要显式加 inputmode="text" 并配合 autocomplete="new-password" 提升体验：
-
inputmode="text"强制呼出全键盘（不是数字键盘） -
autocomplete="new-password"告诉浏览器这是新密码字段，避免 autofill 覆盖用户输入 - 两个密码框的
autocomplete值要不同：主密码用"new-password"，确认框建议用"off"或留空，否则某些浏览器会尝试填入相同值
容易被忽略的是：不加 inputmode 时，部分安卓键盘在连续输密码时会自动切换到符号页，打断输入节奏。
