Zod 插件

• 安装
• 使用
  • 用于表单验证
  • 除了 FormKit 验证

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

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

安装

要在 FormKit 中使用这个插件，请安装 @formkit/zod：

yarn add @formkit/zod

安装了 @formkit/zod 包之后，你需要在每个表单的基础上注册插件，并且每个需要使用 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 模式验证。