注册页面怎么做密码强度提示？用 Zion 实现边输入、边校验

用户在注册页面设置密码，点击提交后才看到“密码不符合要求”，却不知道该改哪里：是长度不够，还是缺了数字？返回输入框重新填写，再提交一次，仍可能遇到同样的问题。

更清楚的做法，是把反馈放到填写过程中。用户每输入或删除一个字符，页面就重新判断：哪些要求已经满足，还有哪些需要补充。上方用进度条概括当前等级，下方逐条说明原因。

在 Zion 中，这套交互可以通过输入框、公式、页面变量和条件式容器搭建。即使没有接触过 Zion，也可以先从下面的使用过程理解它，再跟着配置步骤做一个可用的示例。

01

让用户知道，下一步应该改什么

这个示例检查五件事：至少 8 个字符、包含大写字母、包含小写字母、包含数字，以及包含英文字母和数字以外的字符。

输入框为空时，下方提示区域隐藏。开始输入后，页面显示等级、四段进度条和五条规则；满足的规则以更醒目的文字呈现。继续补充内容，进度条随之变化；删除字符后，已不再满足的规则也应恢复为未满足状态。

例如，输入 1Aa# 时，已经符合四种字符要求，但长度还不够。此时，“至少8个字符”仍未点亮，用户能直接看出需要继续补充。

这套组件适合放在用户注册、密码重置或账户设置页面。本文的“弱、一般、中等、强”表示满足示例规则的数量，方便演示界面反馈；满分并不等于密码难以猜测，也不代表账户已经安全。

02

先理解三个部分如何配合

整个实现可以拆成三个部分：

• 输入框提供当前内容：每次值变化，都触发一次重新计算。
• 页面变量记录得分：五条规则分别检查，每满足一条就加 1 分。
• 条件式容器决定显示内容：根据得分切换等级和进度条，根据单项检查结果切换规则文字样式。

条件式容器可以理解成一个按条件展示不同内容的区域。例如，分数为 3 时显示“一般”，为 5 时显示“强”。

计分和这些显示判断都在页面前端完成。这部分逻辑本身不需要新建数据表，也不需要把输入内容写入数据库。

03

第一步：准备输入框和计分变量

在工作页面中放置一个输入框，命名为“密码输入框”。如果已有注册或账户设置页面，可以使用现有组件；也可以先单独建立一个页面验证交互。

选中页面，在右侧“数据”选项卡中添加页面变量：

这个变量只记录通过了几条规则，取值范围为 0 到 5。

04

第二步：输入每次变化，都从零重新计分

选中“密码输入框”，在“值变化时”的行为中配置计算流程。

第一个动作必须是把 password_strength_level 设为 0。 然后依次检查五条规则，并累加本次得分。

这样，分数反映的是当前内容。比如用户刚才输入了数字，后来又把数字删掉，这一项就不应继续保留得分。

如果省略归零，下一次输入会在旧分数上继续增加，进度条就不能准确反映当前内容。

05

先配置一条规则

在归零动作之后添加一个“条件”节点，用高级公式 REGEX_MATCH 检查长度。

这个公式的作用是判断文本是否符合指定模式。按下面的方式配置：

配置项

在条件成立的分支中添加“设置变量”，将 password_strength_level 设为“当前 password_strength_level + 1”。加法的第一个值绑定页面变量，第二个值填 1，最终赋值目标仍为这个长整数变量。

06

再配置其余四条规则

沿用同样的“检查 → 成立时加 1”方式，分别替换正则表达式：

五条规则需要分别执行。一条未通过，仍要继续检查下一条；不要把它们配置成只会命中其中一个结果的互斥分支，也不要把后面的检查都放进第一条成立的分支里。

最后一条表达式的范围比日常所说的“特殊符号”更宽：空格、中文等也会匹配。如果业务只接受某些指定符号，需要调整表达式，并让提示文字与实际规则保持一致。

07

第三步：为空时隐藏提示，开始输入后再显示

在输入框下方添加“条件容器 密码强度规则”，作为整个反馈区域的外层容器。

设置两个状态：

• 条件 输入非空：放置等级、进度条和规则列表。
• 初始化：保留为空，不放反馈组件。

“条件 输入非空”的进入条件使用 TEXT_LEN 计算“密码输入框 → 组件输出”的长度，再判断结果不等于 0。

这样，用户尚未填写时，页面保持简洁；清空输入框后，反馈区域也会隐藏。

08

第四步：让等级文字与进度条跟随得分变化

示例将五项得分对应到四个等级：

这里有两种配置方法，可以根据自己页面的维护方式选择一种。

09

方法一：整块切换，分别配置四套等级画面

在外层容器的“条件 输入非空”中，添加“条件容器 密码强度进度条”，建立“弱”“一般”“中等”“强”和“初始化”五个分支。

四个等级的条件分别是：

• 弱：得分大于 0，并且小于 3。
• 一般：得分等于 3。
• 中等：得分等于 4。
• 强：得分等于 5。

在每个等级分支里放置文字和四段横条，设置该等级应点亮的数量。比如“一般”分支显示“一般”，前两段深色，后两段浅色。

这种方式能直接看到每个等级的完整布局，适合不同等级还需要搭配不同提示或图标的页面。修改统一样式时，需要同步检查各个分支。

10

方法二：文字和横条分别判断，减少重复布局

如果四个等级的布局基本一致，可以把等级文字和四段横条拆开控制。

首先，用“条件容器 强度”包裹等级文字，按照上表配置四个等级分支。

接着，为四段横条分别建立条件容器。每个容器只需要“条件1”和“初始化”两个状态：前者放深色横条，后者放浅色横条。

例如得分为 4 时，前三段条件成立，第四段保持浅色。配置统一的高度、圆角和间距，就能得到一条连贯的等级指示条。

这种方式适合主要改变文字和点亮数量的布局。两种方法使用同一套计分规则，只是组织界面组件的方式不同。

如果通过复制页面来搭建第二种方法，要检查公式和变量引用是否指向新页面及其输入框，避免界面还在读取原页面的值。

11

第五步：逐条告诉用户，哪些要求已经满足

总分能概括进度，但不能告诉用户缺了什么。下方的规则列表需要独立判断。

以“至少8个字符”为例，在文字外层添加“条件容器 规则1”，包含两个分支：

• 条件 规则满足：用 REGEX_MATCH 检查当前输入是否符合 ^.{8,}$，成立时展示深色、加粗的文字。
• 初始化：展示浅色文字，表示尚未满足。

其他四项使用各自的正则表达式，按相同方式配置。

单条规则直接检查输入内容，不根据总分猜测是否通过。 同样是 3 分，不同输入可能满足完全不同的三项要求。

12

在预览中，检查增加、删除和清空三种操作

完成配置后，可以使用下面的测试序列检查。每一行表示输入框当时的完整内容，不是互不相关的单个字符。

然后反向删除字符，确认得分和点亮数量能随之降低；最后清空输入，确认提示区域消失。也可以一次粘贴完整的测试字符串，检查是否得到相同结果。

这组字符串仅用于演示计分，不是实际密码建议。

13

把它接到自己的注册或账户设置页面

这套实现解决的是“用户填写时，如何及时、具体地反馈规则”。它没有实现注册提交、密码修改或服务端校验。

用于真实业务时，需要将界面反馈与实际密码策略对齐，并在服务端执行最终校验。示例输入框为方便演示使用明文显示；正式的密码输入场景应配置密码遮挡，避免直接展示用户输入。

如果你第一次使用 Zion，可以先注册并建立一个练习页面，用一个输入框跑通“输入变化 → 重新计分 → 提示更新”。理解这条路径后，再把它放进自己的注册页面。

已经在使用 Zion，也可以从现有的密码输入框开始，补上计分变量和规则提示，让用户在提交前就知道还有哪项需要调整。