密码强度判断应先trim再校验，长度不足8直接判极弱；分小写、大写、数字、特殊字符、非字典词五项打分，每项1分；html用语义化class控制指示器；input事件防抖300ms；css用hsl适配暗色模式。
密码强度判断逻辑怎么写才靠谱
密码强度不是简单数字符+大小写个数，关键得看组合覆盖度和常见弱密码规避。主流做法是分项打分再汇总，每项达标给1分，总分0–4分对应「极弱→强」，比单纯用正则匹配更抗绕过。
常见错误是只校验字符类型存在性，比如 /[a-z]/.test(pwd) 但忽略长度不足或全为键盘邻键（如 qwerty）；更隐蔽的坑是没过滤空格开头/结尾，导致用户以为输对了，实际被 trim 后只剩2位。
- 必须先
pwd.trim()再判断，否则长度和内容校验全失效 - 长度检查放第一位：小于8直接判「极弱」，不继续后续逻辑
- 小写字母、大写字母、数字、特殊字符（如
!@#$%^&*()_+-=[]{}|;:,.?）各设独立标志位，用test()检查，别用includes()—— 后者对 Unicode 或代理对不友好 - 额外加1项「非字典词」检测：对长度≥6的密码，用简单规则排除
password、123456、admin等TOP 100弱密码（可本地数组，勿调API）
HTML结构怎么搭才能方便JS控制指示器状态
指示器本质是状态映射，HTML结构越扁平、class 越语义化，JS操作越稳。别用一堆 div 套嵌加内联样式，改用带明确状态名的 class 控制颜色和文字。
推荐结构：<div class="pwd-strength">
<span class="pwd-bar"></span><span class="pwd-text">请输入密码</span>
</div>，其中 pwd-bar 用 width 控制进度，pwd-text 用 class 切换文案和颜色（如 weak / medium / strong）。
- 不要给
pwd-bar设固定宽高，用max-width: 100%+height: 4px更适配响应式 - 所有状态 class（如
pwd-weak）统一定义在 CSS 里，JS 只负责增删 class，不拼接 style 字符串 - 避免用
title属性显示提示文字——移动端不触发，且无障碍支持差；改用aria-live="polite"配合pwd-text内容更新
实时检测时机与防抖怎么配才不卡顿又不漏判
监听 input 事件最准，但高频触发会拖慢输入体验，尤其在低端安卓机上。不能简单用 setTimeout 防抖，因为用户快速删完再重输时，旧定时器可能覆盖新结果。
正确做法：每次 input 触发时先清除上一个定时器，再设新定时器，延迟300ms执行检测。300ms 是权衡——短于200ms 用户感知不到反馈，长于500ms 显得滞后。
- 绑定事件用
addEventListener('input', handler, { passive: true })，避免默认行为干扰 - 检测函数开头加
if (!pwdInput.value.trim()) { clearStrength(); return; }，空值直接清空指示器，不走打分逻辑 - 别在检测中调用
alert()或console.log()—— 这些在循环触发下会明显卡顿 - 如果项目用了 Vue/React，把强度计算逻辑抽成纯函数，避免依赖响应式系统做中间态计算
CSS怎么写才能让指示器在暗色模式下也清晰可见
靠硬编码颜色（如 #ff4d4f）撑不了多远。现代方案是用 color-scheme: light dark + 自定义属性，让指示器随系统主题自动切换对比度。
核心技巧：用 hsl() 定义主色，通过调整亮度（l）适配背景。例如弱密码用 hsl(0, 100%, 50%)（红），强密码用 hsl(120, 100%, 40%)（深绿），再配合 background-color: hsl(0, 0%, 95%)（浅灰底）或 hsl(0, 0%, 15%)（深灰底）形成足够对比。
- 别用
opacity控制提示文字可见性——它会降低可访问性对比度，改用visibility: hidden或直接移除 DOM - 在
@media (prefers-color-scheme: dark)里重置pwd-bar的background和pwd-text的color，而不是靠 JS 判断 - 测试时真机打开暗色模式，别只信 Chrome DevTools 的模拟开关——有些安卓 WebView 不完全遵循该媒体查询
paste 事件，不触发 input。得额外监听 paste 并在 setTimeout 中延后执行检测，否则用户 Ctrl+V 后指示器不动。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
