必须用 input 事件实现实时密码强度检测，因其支持粘贴、自动填充等操作，配合防抖调用 zxcvbn 并结构化返回结果，再由外部更新 ui；submit 时需兜底校验并聚焦错误字段。
不能只靠 pattern 属性实现真正可用的密码强度检测——它不支持实时反馈、无法分项提示、在 Safari 等浏览器中对环视（(?=...)）支持极差，且校验失败时只显示模糊的“请与要求格式匹配”。
为什么必须用 input 事件而不是 pattern 或 blur
用户粘贴密码、用密码管理器填充、语音输入、中文输入法上屏，这些操作都触发 input 事件，但不会触发 blur 或 keyup；pattern 只在调用 checkValidity() 或表单提交时才运行，完全无法支撑“边输边提示”。常见错误包括：onchange 在移动端失焦延迟高，onpaste 单独监听又漏掉拖拽和自动填充。
- 给
<input type="password" id="pwd">绑定addEventListener('input', handler) - handler 内直接取
event.target.value，别用document.getElementById('pwd').value（框架下可能不同步） - 避免在 handler 中操作 DOM，只返回结构化结果，如
{ score: 2, missing: ['uppercase', 'symbol'] }
zxcvbn 是防 “Password123!” 的唯一实用方案
纯正则能告诉你“缺大写字母”，但拦不住语义弱口令。比如 Password123! 满足所有正则条件，zxcvbn 却返回 score: 1（弱），并给出 feedback.warning: "This is a top-10 common password" 和 feedback.suggestions: ["Add another word or two"]——这才是用户能立刻行动的提示。
- CDN 引入：
<script src="https://cdnjs.cloudflare.com/ajax/libs/zxcvbn/4.4.2/zxcvbn.js"></script> - 先用轻量正则筛掉空值、纯空格、长度 zxcvbn(password)，避免无效计算
- 不要每次
input都调：必须配合防抖（setTimeout+clearTimeout，延时 250ms），否则 iOS Safari 输入法候选框会卡顿
防抖不是可选项，是移动端输入法的刚需
在 iOS Safari 和 Chrome 移动版上，不加防抖的 input 事件会导致中文输入法候选框延迟、闪烁甚至崩溃——因为 zxcvbn 内部有词典加载和熵计算，高频调用直接阻塞渲染线程。
- 每次
input触发时，先clearTimeout(timeoutId) - 再
timeoutId = setTimeout(() => { /* 校验逻辑 */ }, 250) - 校验函数本身不读写 DOM，只返回对象；UI 更新由外部统一处理（比如改
textContent和className） - 额外监听
paste事件，并用setTimeout(() => {}, 0)补偿 Safari 对粘贴后input的延迟触发
提交前兜底校验必须可定位、可聚焦
submit 事件不是摆设，而是最后一道防线。仅在 submit 中调一次校验，若失败却不聚焦到密码框、不滚动到可视区域、不更新提示文案，用户根本不知道问题在哪。
- 在
submithandler 中调用最终校验，确认当前值是否真满足策略 - 若不满足，必须
event.preventDefault()，然后document.getElementById('pwd').focus() - 配合
element.scrollIntoView({ behavior: 'smooth', block: 'center' })防键盘遮挡 - 提示文案要具体：“需含至少一个符号”比“密码太弱”有用十倍；前端提示等级（如“强”）不等于后端接受，最终以接口返回的
message为准
真正的难点不在写正则或调 zxcvbn，而在于把校验结果映射成用户一眼能懂、且不会诱导其生成“Password123!”这类看似合规实则脆弱的密码——这需要你把后端策略（比如禁用字典词、允许空格、最小熵值）明确同步到前端，而不是凭感觉写几条 test()。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
