密码强度校验（前端逻辑实现）

项目访问链接

https://zion.functorz.com/tool/NyndxPe9PM2/WEB?code=AQB2sE3YTM8lZ&ref=4857164 

简介

• 目标: 实现用户在输入密码时，界面能够实时响应并提供密码安全等级的可视化动态反馈。
• 适用场景: 用户注册、密码重置或账户安全设置页面。
• 核心逻辑: 利用页面变量存储密码强度的“分数值”。每次输入框内容发生变化时，先清空分数，再运行一系列 REGEX_MATCH（正则表达式匹配）节点。每满足一条规则，分数值加 1。最后，前端界面根据当前分数值，通过条件容器的灵活状态切换实现差异化渲染。

实现步骤

页面变量定义

1. 点击顶部导航栏进入 页面 模式，选中当前页面，并在右侧面板切换至 数据 选项卡。
2. 在变量管理区新建一个页面级本地状态变量，用于记录通过校验的规则数量。
   • 变量名: password_strength_level
   • 类型: 长整数
   • 默认值: 0

输入框行为流构建

在 密码输入框 组件上配置实时校验逻辑，确保用户的每次按键和删除操作都能即时重算分数。

• 触发时机: 值变化时

1. 设置变量: 在行为流的起始位置，添加 设置变量 节点，将 password_strength_level 重置为 0。此举可确保每次输入发生变动时，计分机制都从零开始重新累加。

2. 条件分支 (规则 1 校验): 添加 条件 分支节点，校验第一条核心规则（密码长度至少 8 位）。
   • 方法: 选择高级公式 REGEX_MATCH。
   • 文本: 绑定至当前组件的输入值 密码输入框/组件输出。
   • 正则表达式: ^.{8,}$
   • 结果类型: 布尔值

3. 设置变量 (累加分数): 当上述条件判定为“为真”时，在对应的成功分支下连接 设置变量 节点，使分数值递增 1。
   • 计算方法: 选用 + 运算符。
   • 数字 1: 页面 密码强度校验/变量/password_strength_level
   • 数字 2: 1
   • 结果类型: 长整数

4. 重复配置其余四项规则: 按照上述逻辑序列，依次复制并配置剩余 4 条安全规则。只要任何一条规则校验匹配成功，则执行变量自增 1：
   • 包含大写字母: [A-Z]
   • 包含小写字母: [a-z]
   • 包含数字: [0-9]
   • 包含特殊字符: [^A-Za-z0-9]

UI 搭建与交互

全局总控

为了在用户还未在输入框填写任何内容时，保持下方所有的进度条和规则文本完全处于隐藏状态，我们需要在外层包裹一个总控容器。

1. 主条件容器配置: 输入框正下方放置一个主条件容器，命名为 条件容器 密码强度规则。
2. 状态分支配置: 条件 输入非空 和 初始化。
3. 前置进入条件 (条件 输入非空):
   • 方法: 使用 TEXT_LEN 公式测算输入字符总长。
   • 文本: 绑定绑定 密码输入框/组件输出。
   • 比较操作符: 不等于 0。

配置完成后，只有当用户真正开始输入时，内层的密码强度校验反馈 UI 才会显示；若清空输入框，则自动回退到 初始化 状态。

Zion 提供了高自由度的视图渲染机制。以下通过两种独立的组件组合模式，来展示如何基于 password_strength_level 驱动界面状态流。

方法一：整体状态联动切换（基于“页面 密码强度校验”）

此方法适合一体化的布局。它将提示强度级别的文本和 4 根进度条作为一个完整的视觉块放入统一的条件容器中，由该容器集中判定并进行宏观的状态块切换。

1. 添加条件容器: 在主容器的 条件 输入非空 分支下，拖入新条件容器 条件容器 密码强度进度条。
2. 多状态规划: 点击配置，建立 条件“弱”、条件“一般”、条件“中等”、条件“强” 以及 初始化 五个平行分支。
3. 注入配置准入边界:
   • 条件“弱”: 当 password_strength_level 大于 0 且小于 3 时触发。
   • 条件“一般”: 当 password_strength_level 等于 3 时触发。
   • 条件“中等”: 当 password_strength_level 等于 4 时触发。
   • 条件“强”: 当 password_strength_level 等于 5 时触发。

4. 各分支独立UI设计: 分别选中每一个条件状态（例如 条件“一般” 分支），在内部手动拖放一个视图标题区和横向并排的 视图 进度条。为不同等级状态直接刷上独立的视觉色彩（例如：弱状态时仅第一根线条涂黑，一般状态时前两根线条涂黑）。

方法二：组件独立状态控制（基于“页面 密码强度校验（方法二）”）

为了避免在每个分支里重复复制多套大同小异的进度条线条组件，可通过“复制页面”对方法一进行改造：删掉宏观包裹的进度条总容器，把文本和 4 根小线条各自独立成轻量级的条件容器，各自单独判定、按需点亮。

1. 密码强度提示文本解耦:
   • 将承载强度文案（如弱、一般、中等、强）的文字块用一个名为 条件容器 强度 的独立容器包裹。
   • 其弹窗内的条件边界逻辑与方法一完全相同（即大于 0 且小于 3 进入 条件“弱”，以此类推），用来动态控制文字组件的内容。

2. 独立指示条条件配置:
   • 4 根小线条分别对应 条件容器 进度条“弱”、条件容器 进度条“一般”、条件容器 进度条“中等” 以及 条件容器 进度条“强”。
   • 每个线条内部均只需规划两个最简分支：激活高亮状态 条件1 和默认置灰状态 初始化。
   • 第一根线条激活条件: 当 password_strength_level 大于 0 时进入 条件1（图示配置）。
   • 第二根线条激活条件: 当 password_strength_level 大于 2 时进入 条件1。
   • 第三根线条激活条件: 当 password_strength_level 大于 3 时进入 条件1。
   • 第四根线条激活条件: 当 password_strength_level 大于 4 时进入 条件1。

3. 视觉渲染:
   • 选中任一指示条在 条件1 分支下的单线条组件，在右侧样式面板中，将其 背景颜色 修改为深色调（如暗石灰 #6B7280），并设置圆角为 3px，高度设定为 6px。
   • 切换到对应的 初始化 分支，将其 背景颜色 涂抹为浅灰色（如 #F3F3F3），形成未激活的视觉对比。

校验规则列表的联动变色反馈

除了进度条的涨落，下方排列的五条具体文本规则同样需要具备单独通过即时变黑或变绿的反馈。

1. 将每一条校验标准文本组件（如“至少8个字符”）外层用独立的条件容器进行包装（如 条件容器 规则1）。
2. 在容器内部配置 条件 规则满足 和 初始化 两个状态分支。
3. 单条公式绑定逻辑: 打开配置，无需依赖全局变量，直接在 条件 规则满足 的条件中置入独立的 REGEX_MATCH 行内判定表达式（例如规则1绑定：REGEX_MATCH(密码输入框/组件输出, "^.{8,}$") 为真）。
4. 在 条件 规则满足 状态下，将内层文本组件的样式字重调粗，颜色由淡灰切为深黑。

验证

点击预览，在输入框中依次输入特定字符组合进行测试。

Step 1: 验证空输入完全隐藏

• 操作: 保持密码输入栏完全处于置空状态。
• 预期结果: 最外层 条件容器 密码强度规则 稳固停留在 初始化 状态。页面画布上不显示任何与进度条、文字级别提示或规则检测相关的 UI 元素。

Step 2: 字符逐字递进式录入校验

依次在框内键入文本序列（1 -> A -> a -> # -> 1111），观察底层前端状态机与 UI 视图的阶梯式响应：

• 动作 1: 录入首个字符 1
  • 预期结果: 外层总控容器检测到长度大于 0，瞬间将主界面显示渲染。此时仅满足“包含数字”一条准则，password_strength_level 变更为 1。上方的状态文字切换为 弱，第一根进度条小方块被激活点亮。
• 动作 2: 继续追加录入大写字母 A (当前总内容: 1A)
  • 预期结果: 命中“包含大写字母”规则。计分累加升级至 2。提示文本依旧展示为 弱，由于分数值未跨越临界值阈值（方法二中第二条杠需要分数大过2），因此此时依旧保持只有第一格进度条单点亮起。
• 动作 3: 继续追加录入小写字母 a (当前总内容: 1Aa)
  • 预期结果: 命中“包含小写字母”逻辑。分数值刷新为 3。界面文本提示立刻动态跳转响应为 一般 ，且此时前两根进度条杠同时被着色激活。
• 动作 4: 继续追加录入特殊符号 # (当前总内容: 1Aa#)
  • 预期结果: 满足“包含特殊字符”校验。累计分数跨入 4。界面文案递进演变为 中等。前三根进度条横条全部点亮。下方列表对应的各条文案同时转为高亮粗体。
• 动作 5: 连续追加 1111 补齐长度缺陷，使其达到并超越 8 位长度 (当前总内容: 1Aa#1111)
  • 预期结果: 最后一项规则“至少8个字符”解锁。核心页面变量触及满分上限 5。强度状态变为 强，4 档指示条进度条完全填满点亮。