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

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

定义元素并监听输入变化

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

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

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

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

DeepBI DHTML 页面生成器

生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur

下载

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

封装可视化反馈 UI

在 Shadow DOM 中插入进度条（

）和文字提示（），通过 CSS 变量动态控制颜色与宽度：

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

支持外部配置与事件通知

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

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