表单是每个开发人员都会遇到的东西，无论是作为用户还是开发人员。它们在大多数网站上都是必不可少的，但它们的复杂性可能差别很大——从简单的 3 字段联系表单到 giga-monster-t-rex、具有 150 个字段的多页表单、动态验证和异步检查。
在这篇文章中，我们将探索如何使用 React Hook Form、Zod 和 Shadcn 创建一个适应性强、开发人员友好的解决方案，轻松处理各种表单需求。
这是我们将在这篇文章中开发的表单。我计划写另一篇关于表单高级使用的文章，后续将更加复杂，敬请期待？
让我们看看我们将用来构建和管理表单的堆栈。
这是一个示例片段，展示了 Shadcn 库中的表单字段：
<FormField
control={form.control}
name="name"
render={({ field }) => (
<FormItem>
<FormLabel>Name</FormLabel>
<FormControl>
<Input {...field} />
</FormControl>
<FormMessage />
</FormItem>
)}
/>
即使您更喜欢使用不同风格的堆栈，只要您坚持使用 React 和 RHF，这仍然是一个可以帮助您继续前进的有效示例。
我们将用来演示基本表单的应用程序是一个具有基本 CRUD 操作的管理面板。它将包括电子邮件和密码身份验证，并由两个页面组成：一个显示所有用户表的主屏幕，以及一个用户创建页面，这将是本文的重点。
我们的表单将包括验证，以确保用户在不满足指定要求的情况下无法提交表单（即创建新用户）。 User 对象是验证示例的绝佳候选者，因为它包含适合不同验证的各种数据类型：字符串、日期（例如出生日期）、电子邮件字符串和布尔值（例如高级用户状态）。完整的 Prisma 架构文件如下所示。
<FormField
control={form.control}
name="name"
render={({ field }) => (
<FormItem>
<FormLabel>Name</FormLabel>
<FormControl>
<Input {...field} />
</FormControl>
<FormMessage />
</FormItem>
)}
/>
为了快速启动我们的项目，我们将使用带有 TypeScript 的预定义 Wasp 模板，称为 todo-ts。该模板附带现成的组件和身份验证路由，包括登录和注册屏幕。它还提供了有关 Wasp 中 CRUD 操作如何工作的可靠示例，如果您是该框架的新手，它是理想的选择。此外，我们将利用新的 Wasp TypeScript SDK 来管理我们的配置，因为它提供了扩展的定制灵活性。
Wasp 团队正在努力创建这样的内容，更不用说构建一个现代的开源 React/NodeJS 框架了。
表达支持的最简单方法就是给 Wasp 仓库加注星标！ ？但如果您可以查看存储库（用于贡献，或只是测试产品），我们将不胜感激。点击下面的按钮给Wasp一颗星并表示您的支持！
⭐️ 谢谢您的支持？
为了使用表单，我们首先定义 Zod 验证模式。我们的表单具有三种数据类型：字符串、日期和布尔值。我们将对大多数字段应用验证：姓名是必需的，而电子邮件则使用内置的电子邮件验证。 Zod 通过针对不同类型（例如电子邮件、URL 和 UUID）的内置验证简化了常见字符串类型的验证，这对我们的电子邮件领域很有帮助。
对于额外的验证，日期不能设置为未来的日期，并且 premiumUser 字段只需为布尔值即可。 Zod 还提供默认的验证错误消息，但这些消息可以自定义。例如，我们可以指定名称：z.string().min(1, 'Name is required').
，而不是名称：z.string().min(1)
<FormField
control={form.control}
name="name"
render={({ field }) => (
<FormItem>
<FormLabel>Name</FormLabel>
<FormControl>
<Input {...field} />
</FormControl>
<FormMessage />
</FormItem>
)}
/>
我们的表单由 React Hook Form 中的 useForm 钩子管理，它提供了广泛的选项来处理和验证表单值、检查错误和管理表单状态。为了集成我们的 Zod 验证模式，我们将使用 Zod 解析器，允许 React Hook Form 应用我们之前定义的验证。
表单的defaultValues源自客户对象。由于该组件用于添加新客户和编辑现有客户，因此我们将传递必要的数据作为输入。对于新客户，使用一些合理的默认值；对于现有客户，从数据库中检索数据。除了设置默认值和确定是否调用 createCustomer 或 updateCustomer 之外，表单处理的所有其他方面都保持不变。
model Customer {
id Int @id @default(autoincrement())
name String
surname String
email String
dateOfBirth DateTime
premiumUser Boolean
}
最后一步是创建表单本身并将其组装到 TSX 文件中。如前所述，这个过程很简单。无论我们使用文本输入、日期选择器还是带有 Shadcn 控件的复选框，我们都遵循类似的结构：
const formSchema = z.object({
name: z.string().min(1, { message: 'Name is required' }),
surname: z.string().min(1, { message: 'Surname is required' }),
email: z.string().email({ message: 'Invalid email address' }),
dateOfBirth: z
.date()
.max(new Date(), { message: 'Date cannot be in the future' }),
premiumUser: z.boolean(),
});
如果您想查看完整的应用程序，请查看此处的 GitHub 存储库：GitHub Repo。我希望本文使表单的使用变得更加容易，如果您对更多与表单相关的内容感兴趣，请继续关注第二部分！在下一部分中，我们将深入研究高级模式和验证技术来增强您的应用程序。
如果您喜欢这篇文章，请考虑在 GitHub 上为 Wasp 加星标！您的支持帮助我们继续为每个人提供更轻松、更顺畅的 Web 开发。 ？
以上是使用 React Hook Form、Zod 和 Shadcn 轻松构建 React Form的详细内容。更多信息请关注PHP中文网其他相关文章！
