Zod 插件

• 安装
• 使用
  • 用于表单验证
  • 除了 FormKit 验证
  • 设置表单错误

通过 @formkit/zod 包，您可以轻松地使用您的 Zod 模式验证您的 FormKit 表单。这提供了一种方便的方式来拥有同构类型，并确保您的前端和后端使用相同的验证规则。

当根据 Zod 模式进行验证时，所有验证错误都将映射到相应的输入，根据您的表单/输入的 validation-visibility 属性显示或隐藏，并在表单数据未通过 Zod 验证时阻止提交。

安装

Zod 插件旨在在 FormKit 表单上运行。您对插件的使用将是基于每个表单的，每个需要使用 Zod 模式进行验证的表单都将使用 createZodPlugin 函数创建插件的新实例。

使用

要使用 Zod 插件，我们需要从 @formkit/zod 导入 createZodPlugin 函数，调用 createZodPlugin 函数来创建我们的 zodPlugin 和 submitHandler，然后将它们都添加到我们的 FormKit 表单中。

createZodPlugin 函数接受两个参数：

• zodSchema：您希望用于验证表单的 Zod 模式。
• submitCallback：一旦您的表单通过验证，您希望运行的函数 - 这是您处理将数据发布到后端或其他提交相关任务的地方。您的表单数据将根据您的 Zod 模式提供完整的 TypeScript 支持。

createZodPlugin 将返回一个元组：

• zodPlugin：应用于目标表单的 plugins 属性的插件。
• submitHandler：应附加到表单的 @submit 操作的提交处理程序。当表单数据通过您提供的 Zod 模式的验证时，您的 submitCallback 将触发。

用于表单验证

这是使用 Zod 模式验证 FormKit 表单的示例。您的 FormKit 输入 name 必须与您的 Zod 模式的预期值匹配。

现在，您的 FormKit 表单将使用您的 Zod 模式进行验证 - 所有消息将与每个匹配的 FormKit 相邻，就像原生的 FormKit 验证一样！

除了 FormKit 验证

使用 Zod 验证您的表单并不意味着您必须放弃使用 FormKit 的内置验证消息。如果您向您的 FormKit 输入添加 FormKit 验证，那么只有在所有 FormKit 验证都已满足并且仍有未满足的 Zod 验证时，Zod 验证错误才会显示。

这有几个好处：

• 您可以使用 FormKit 的内置规则，如 confirm，这些规则在 Zod 中没有易于使用的等效项。
• 您的消息可以被翻译成 @formkit/i18n 中的许多现有语言，而无需您做任何额外的工作。
• 内置的 FormKit 验证消息被编写为对您的输入名称有上下文意识，并知道它们将直接附加到相应的输入 - 因此它们比其通用的 Zod 对应项更精确，更容易理解。

这是与之前相同的表单，但现在使用 FormKit 验证消息以及 Zod 模式验证。

设置表单错误

如果您需要在表单上设置错误，您可以使用 zodPlugin 提供的 node.setZodErrors 函数来实现。node.setZodErrors 函数接受一个 ZodError 对象，并将错误映射到每个输入。任何不匹配的错误将显示为表单级别的错误。