使用状态机验证表单域

问题描述

这是我第一次使用状态机，对我在实现主题时可以定义的可能状态感到有些困惑。 附言（这个问题是关于如何从问题中推断状态，而不是关于如何在代码中实际实现它。我知道并使用过 xstate lib）。

场景很简单，一个密码字段，验证规则很少。

我想出的状态是

• 默认（当表单加载或按下重置按钮时）
• 已填充（这应该是一个状态吗？）
• 有效（日期存在且满足所有规则）
• 无效（数据存在但不符合规则）

根据当前状态显示错误消息。

例如，在默认状态下，用户还没有输入任何数据，所以逻辑上它是无效状态。

但我们不想在打开表单后立即向用户显示错误（那会很糟糕，对吧？）

所以我专门为此添加了一个状态。

这样对吗？ 是否可以进一步简化或者是否存在我遗漏的状态？

其次，似乎有任意状态 喜欢

• 验证
• 提交

这些也应该处于混合状态吗？ 不过对我来说，它们看起来像是状态。

最后，我们可以说

• 提交也是一种状态？
• 由于 API 调用错误，提交后无效（可能是 API 团队添加了我们不知道的新规则）。

百万美元的问题，

• 我是否正在考虑以这种方式实施验证的正确方向？
• 是否有任何我遗漏或过度的状态？

解决方法

您可能已经解决了这个问题，但以防万一其他人遇到这个问题并且可以使用一些指针 - 我发现诀窍是要记住，即使是简单的元素通常也有多个并行状态，例如可以禁用按钮并同时显示加载微调器，可以打开菜单并获取数据，头像可以显示占位符并同时获取图像等。

对于你的例子，我会这样看：

字段级别

如果从密码字段的角度考虑，它实际上同时具有多个并行状态：

1. 互动
2. 有效性
3. 可见性

三个状态同时存在，并且有多个子状态

互动

这可能应该反映默认输入事件并具有匹配的状态事件（例如 onChange -> 设置为已更改）：

• 模糊
• 专注
• 改变了
• ...

有效性

可能只有两种状态，如果您需要异步验证（例如，如果您需要检查电子邮件是否已存在），则可能是三种状态。对于您只需使用的密码字段：

• 有效
• 无效
• 验证（可选）

可见性

直接：

• 可见
• 隐藏

---

表单级别

您可能最终会得到两个主要状态和多个子状态：

1. 表格
2. 错误

表格

1. 空闲
2. 编辑
3. 验证
4. 提交

错误

这可以转化为您在例如时显示的警报。帐户已存在或无法验证登录详细信息：

1. 无效
2. 活跃

---

您的表单状态机将基本上处理输入、验证、提交和表单错误，并将状态传达给各个现场机器（现场错误消息等）。或者，您可以将验证规则传递给现场机器，它们可以对即更改事件执行现场级验证。可见性之类的事情与表单无关，因此您可以在字段状态机中管理状态。

我认为您在正确的轨道上，您只是想得太有顺序了，而没有考虑并行状态。只需退后一步，查看表单并从 UI 的角度考虑其中可能发生的所有变化。