密码确认需独立type="password"字段并手动校验：监听input事件、trim()去空格、非空+相等双重判断；前后端均须校验，后端不可信任前端数据，且不回显密码。
密码确认字段必须用 type="password" 且独立声明
浏览器不会自动校验两个密码是否一致，type="password" 只是遮掩输入内容，不带逻辑约束。必须手动添加第二个 <input>，不能复用同一个字段或靠 JS 动态切换 type —— 否则会丢失焦点、触发输入法重置，甚至在 iOS 上导致软键盘异常。
常见错误是写成：
<input type="password" name="pwd"><input type="password" name="pwd_confirm">
这看似合理，但缺少验证绑定和语义关联。正确做法是明确命名、加 required、并用 id/for 关联 <label></label>，方便屏幕阅读器识别。
前端校验必须监听 input 事件而非 submit
等表单提交时再比对，用户已经点了按钮，体验割裂。应该在用户输完确认密码的瞬间就反馈结果，避免无效提交。
关键点：
-
input事件比blur更及时，能实时响应粘贴、自动填充等操作 - 比较前先 trim()，防止空格干扰（比如用户粘贴时带了末尾空格）
- 不要只依赖
===，要同时检查两个字段值是否非空，否则会出现“空值 === 空值 → 校验通过”的逻辑漏洞
示例片段：
const pwd = document.getElementById('pwd');
const pwdConfirm = document.getElementById('pwd_confirm');
pwdConfirm.addEventListener('input', () => {
const ok = pwd.value.trim() && pwdConfirm.value.trim() && pwd.value === pwdConfirm.value;
pwdConfirm.setCustomValidity(ok ? '' : '两次输入的密码不一致');
});
后端必须重新校验，且不能信任前端传来的 pwd_confirm 字段
前端校验纯属用户体验优化，绕过它只要禁用 JS 或改发请求就能跳过。后端收到 pwd 和 pwd_confirm 后，必须做相同逻辑：非空判断 + 字符串相等，并立即返回错误（如 HTTP 400），不进入密码哈希流程。
容易被忽略的细节：
- 如果用框架（如 Express + body-parser），确保
pwd_confirm确实被解析进req.body，某些配置会默认过滤重复字段名 - 校验失败时，不要清空原始
pwd值再返回页面 —— 否则用户得重输一遍，应保留已输入内容 - 密码字段永远不回显到 HTML 模板里（包括错误提示页），防止意外泄露
用 pattern 和 title 提升首次输入引导性
单纯靠 JS 校验不够友好。可以在确认密码字段上加基础约束，比如要求长度匹配主密码字段（虽然不能动态绑定，但可设为最小长度）：
<input type="password" id="pwd_confirm" name="pwd_confirm" pattern=".{8,}" title="请再次输入至少 8 位密码" required>
注意：pattern 是正则，不是 JS 表达式；title 是鼠标悬停提示，也是移动端长按时的辅助说明。别指望它替代 JS 校验，但它能让用户在输入第一字符时就意识到规则。
真正难处理的是密码强度不一致场景（比如主密码含大小写数字，确认密码全小写）—— 这类逻辑只能放在后端统一判定，前端最多展示「密码强度不足」的泛化提示，避免暴露具体规则被暴力试探。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
