✎修改上方代码，下方实时预览修改左侧代码，右侧实时更新
🧪实时检查密码规则并显示强度。
演示了什么：这个 Demo 让你亲眼看到密码从“很弱”到“安全”的判断过程：每输入一个字符，规则清单、分数和进度条都会同步变化。它强调的不是绝对安全算法，而是前端如何把校验反馈做得即时、清晰、可访问。
关键实现：
testPassword(value) 把大小写、数字、符号、长度四条规则集中返回，为什么这样写：规则和渲染解耦，后续新增规则时不必到处改 DOM 代码。input.addEventListener('input', update) 使用 input 而不是 keyup，因为粘贴、移动端输入法、自动填充也会触发它，实时校验更完整。.bar 只过渡 width 和 background-color，js 也只改这两项；这样视觉反馈足够明显，同时避免频繁改动复杂布局。动手改一改：
symbol:/[!@#$%^&*]/，加入 ? 或 _，再输入这些字符，观察“特殊符号”规则立即通过。length:value.length >= 8 改成 >= 12，再输入 8 位密码，观察强度分数下降，理解产品规则如何影响反馈。