自定义元素如何实现密码强度校验的输入组件

密码强度校验输入组件通过自定义元素<password-input>实现，继承HTMLInputElement，集成多维度评分规则、Shadow DOM可视化反馈及属性配置与事件通知机制。

自定义元素实现密码强度校验输入组件，核心是封装一个带实时反馈的 <password-input> 自定义标签，内部集成规则判断、状态更新和 UI 提示逻辑，不依赖外部框架。

定义元素并监听输入变化

用 customElements.define() 注册类，继承 HTMLInputElement，确保原生表单行为（如 value、required、name）正常工作。在 connectedCallback 中绑定 input 和 blur 事件，触发校验：

1. 每次输入时调用校验函数，避免防抖干扰即时反馈
2. 使用 setCustomValidity() 配合 reportValidity() 触发原生验证提示
3. 监听 focus 和 blur 控制提示区域显隐

内置多级强度规则与评分机制

密码强度不靠单一正则，而是分维度打分：长度 ≥8（1分）、含小写字母（1分）、含大写字母（1分）、含数字（1分）、含特殊字符（1分）。总分 0–5，对应「极弱→强」五档：

1. 得分 ≤2：标红，提示“需增加复杂度”
2. 得分 3–4：橙色，提示“建议添加大小写字母或符号”
3. 得分 5：绿色，显示“安全”
4. 空值或长度为 0 时隐藏所有提示，避免干扰

封装可视化反馈 UI

在 Shadow DOM 中插入进度条（<div class="strength-bar">）和文字提示（<span class="hint">），通过 CSS 变量动态控制颜色与宽度：

1. 用 --strength-color 和 --strength-width 控制样式，便于主题切换
2. 进度条宽度 = 得分 × 20%，避免硬编码像素值
3. 文字提示内容随得分实时更新，不使用 i18n 硬编码，留出 slot 或属性扩展空间

支持外部配置与事件通知

提供 min-length、require-uppercase 等布尔/数值属性，允许业务侧覆盖默认规则。同时派发 strength-change 自定义事件，携带 {score, level, valid} 数据：

1. 表单提交前可监听该事件做最终拦截
2. 配合 form.addEventListener('submit', ...) 阻止弱密码提交
3. 属性变更时重跑校验（监听 attributeChangedCallback）