介绍
当我开始编程时，我需要用纯 javascript 编写大量代码来从表单收集数据。从那时起，web 开发已经发展得如此之快，以至于今天我们有了抽象了大部分工作的库，从而促进了表单数据的管理。
在本文中，我将向您展示如何使用 react hook form 来处理表单数据，并使用 zod 以高效且有组织的方式验证这些数据。
我很着急，请给我完整的代码
它在你手里：
import { label } from '@/components/ui/label';import { input } from '@/components/ui/input';import { button } from '@/components/ui/button';import { gamepad, gamepad2 } from 'lucide-react';import { useform } from 'react-hook-form';import { z } from 'zod';import { zodresolver } from '@hookform/resolvers/zod';import { toast, toaster } from 'sonner';const signupform = z .object({ name: z .string() .min(2, { message: 'nome deve ter ao menos 2 caracteres' }) .max(50, { message: 'nome deve ter no máximo 50 caracteres' }), email: z.string().email().max(100, { message: 'e-mail deve ter no máximo 100 caracteres' }), password: z.string().max(100, { message: 'senha deve ter no máximo 100 caracteres' }), confirm: z.string(), }) .refine((data) => data.password === data.confirm, { message: 'senhas não conferem!', path: ['confirm'], });type signupform = z.infer;export function app() { const { handlesubmit, register, reset, formstate: { issubmitting, errors }, } = useform({ resolver: zodresolver(signupform), }); async function handlesignup(data: signupform) { console.log(data); await new promise((resolve) => { settimeout(resolve, 2000); }); reset(); toast.success('conta criada com sucesso!'); } return ( gamers.shop crie sua conta
{errors.name && {errors.name.message}} {} {errors.email && {errors.email.message}} {errors.password && {errors.password.message}} {errors.confirm && {errors.confirm.message}} 教程
构建表格
首先，我创建了一个包含四个字段的表单：姓名、电子邮件、密码和密码确认。为了方便接口的开发，我使用了shadcn、tailwind和lucide-react。使用 css 类可能看起来有点冗长，但它们有助于保持一致的设计。
我在此表单中创建了 4 个字段：姓名、电子邮件、密码和确认。我需要以某种方式验证它们。由于此示例用于解释 zod 的使用，因此我避免使用本机 html 属性（必需、最大长度等）。
使用 zod 进行数据验证
为了确保在字段中输入的数据正确，我使用 zod 创建了一个验证模式。该架构定义了每个字段的限制并自定义错误消息：
import { z } from 'zod';const signupformschema = z .object({ name: z .string() .min(2, { message: 'nome deve ter ao menos 2 caracteres' }) .max(50, { message: 'nome deve ter no máximo 50 caracteres' }), email: z.string().email().max(100, { message: 'e-mail deve ter no máximo 100 caracteres' }), password: z.string().max(100, { message: 'senha deve ter no máximo 100 caracteres' }), confirm: z.string(), }) .refine((data) => data.password === data.confirm, { message: 'senhas não conferem!', path: ['confirm'], });
此架构定义了每个字段所需的类型和验证。使用 .refine() 方法来确保“密码”和“确认”字段中输入的密码相同。
.refine((data) => data.password === data.confirm, { message: 'senhas não conferem!', path: ['confirm'],});
与 react hook form 和 zod resolver 集成
react hook form 是一个表单库，它通过减少不必要的重新渲染和简化数据操作来提高性能。我使用 useform() 来配置表单，通过 zodresolver 传递验证架构：
import { zodresolver } from '@hookform/resolvers/zod';import { useform } from 'react-hook-form';type signupform = z.infer;const { handlesubmit, register, reset, formstate: { issubmitting, errors }, } = useform({ resolver: zodresolver(signupformschema), });
我在 useform() 中使用的函数和变量是：
handlesubmit：处理表单提交。register：将表单字段绑定到react hook form数据管理。重置：重置表单。issubmitting：表示表单是否正在提交。错误：存储每个字段的验证错误。### 表单提交功能为了模拟表单提交，我创建了handlesignup函数，它添加了一个等待时间来查看issubmitting状态并用toast显示成功消息：
async function handlesignup(data: signupform) { console.log(data); await new promise((resolve) => { settimeout(resolve, 2000); }); reset(); toast.success('conta criada com sucesso!');}
然后我将函数添加到表单中：
最后，我使用寄存器来命名哪个字段属于哪个属性，并显示错误（如果存在）：
{errors.name && {errors.name.message}}
结果如下所示：
最后的考虑因素
在本文中，我展示了一种集成 react hook form 和 zod 来验证不受控制的表单的简单方法。该库还可以使用受控组件，因此请查阅文档以探索更多选项。
以上就是使用 React Hook Form + Zod 构建表单的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1496410.html
微信扫一扫 
支付宝扫一扫 
