最可靠校验时机是blur和submit事件，需每次重新读取dom值并调用setcustomvalidity；oninput实时校验体验差，required/pattern无法跨字段比对，必须用js封装validatepasswordmatch函数并trim后比对。
用 setCustomValidity 配合 blur 和 submit 事件校验最可靠
只靠 oninput 实时比对会频繁报错，用户刚输第一个字符就提示“不一致”，体验极差。核心校验时机应放在用户完成输入后的自然节点：blur（离开确认密码框时）和 submit（点击提交时）。这两个事件覆盖了绝大多数操作路径，包括 Tab 切出、鼠标点别处、直接点按钮提交，甚至部分 JS 被禁用的情况。
必须在两个事件里都调用 setCustomValidity()，且每次都要重新读取 DOM 值——不能缓存上次比对结果。常见错误是只在 blur 里设个全局变量 isMatch，然后在 submit 里直接判断它，这完全不可靠：用户可能跳过 blur，也可能用 DevTools 改 DOM 值绕过。
-
blur用于即时反馈，提升交互感；submit是兜底，必须拦截无效提交 - 移动端需额外监听
change：iOS Safari 软键盘收起有时不触发blur，change更稳定 - 每次比对后，无论成功或失败，都必须调用
setCustomValidity("")或setCustomValidity("错误信息")，否则上次错误会残留
为什么不能只用 required 或 pattern
required 只检查字段是否为空，pattern 只校验单个字段的格式（比如密码强度），它们都不具备跨字段比对能力。HTML5 原生验证 API 本身不提供“两字段值相等”这种约束，必须靠 JavaScript 补足。
试图用两个 input 共享同一个 name 并依赖浏览器自动比对，是无效的——浏览器不会比较值，只会把两个值都当作同名参数提交给后端。
-
type="password"不参与一致性判断，仅控制输入掩码 -
minlength/maxlength可用于单字段长度控制，但无法防止“abc123”和“abc456”这种形式上合法、实质不一致的输入 - 想靠 CSS 伪类（如
:valid）驱动样式变化，前提是字段本身已通过setCustomValidity设置了有效状态
validatePasswordMatch() 函数该怎么写
封装成独立函数便于复用，但关键点在于：每次调用都应重新获取值、trim 后比对、并同步设置 setCustomValidity。不要传入预读的值，也不要依赖闭包变量。
function validatePasswordMatch() {
const pwd = document.getElementById('password').value.trim();
const confirm = document.getElementById('confirm-password').value.trim();
const input = document.getElementById('confirm-password');
if (pwd === confirm && pwd !== '') {
input.setCustomValidity('');
} else {
input.setCustomValidity('两次输入的密码不一致');
}
}
- 必须用
.trim()去除首尾空格，避免因空格导致误判 - 比对前检查
pwd !== ''，否则空密码 + 空确认也会被判定为“一致”，不符合业务意图 - 只对确认密码框调用
setCustomValidity，主密码框无需设，否则会影响其他校验逻辑（如minlength） - 该函数可在
blur、change、submit三处直接调用，无需修改
提交时还要手动调用 checkValidity() 吗
不用。只要确认密码框正确设置了 setCustomValidity，浏览器原生表单验证机制就会自动在 submit 时触发整体校验，并阻止提交。但你仍需在 submit 事件处理器中显式调用 event.preventDefault() —— 仅当校验失败时才需要，否则表单会照常提交。
更稳妥的做法是在 submit 处理器中先调用 validatePasswordMatch()，再根据 form.checkValidity() 返回值决定是否放行。这样能确保所有字段（包括其他 required、pattern 等）一并校验，而不是只盯住密码一致性。
- 不要省略
event.preventDefault()，否则校验失败时表单仍会提交 - 如果用了
form.addEventListener('submit', ...)，注意事件委托下要确保绑定的是实际<form></form>元素，不是按钮 - 服务端永远要重新校验密码一致性——前端校验只是体验优化，不是安全防线
blur 或 submit 回调里反复调用 document.getElementById()。性能损耗小，但可读性和维护性差，也容易因元素 ID 变更导致静默失败。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
