Introducing KickStart — AI generated FormKit forms in seconds. Generate from a screenshot, edit with drag-and-drop or conversational AI, copy & paste as components or schema!
Try for free
通过 @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 验证一样!
使用 Zod 来验证你的表单并不意味着你必须放弃使用 FormKit 的内置验证消息。如果你在 FormKit 输入中添加了 FormKit 验证,那么只有在所有 FormKit 验证都满足并且仍有未满足的 Zod 验证时,Zod 验证错误才会显示。
这有几个好处:
confirm
,这些在 Zod 中没有易于使用的等价物。@formkit/i18n
中的许多现有语言之一,而无需你额外努力。这是之前相同的表单,但现在使用 FormKit 验证消息以及 Zod 模式验证。