React Academy · Aula

Validação de esquema com Zod

Integre @hookform/resolvers e esquemas Zod para validar formulários com segurança de tipos.

Validação de esquema com Zod é uma aula grátis de React Academy no CoddyKit. Esta é a aula 3 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de React Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de React Academy inclui 4 aulas no total.

Boas-vindas

Nesta lição, você integrará o React Hook Form a esquemas Zod por meio de @hookform/resolvers para obter validação segura quanto aos tipos, usando uma única fonte de verdade tanto para o formulário quanto para os tipos TypeScript.

Por que usar validação por esquema?

Definir regras de validação diretamente em register() torna o código extenso e difícil de reutilizar. Um esquema Zod define ALL as validações em um único lugar, infere automaticamente os tipos TypeScript e pode ser compartilhado entre o front-end e o back-end.

Instalação

Instale o Zod e o pacote resolvedor do RHF.

npm install zod @hookform/resolvers

Definindo um esquema Zod

Use z.object() para definir a estrutura do formulário. Cada campo usa um tipo Zod com métodos de validação encadeados.

import { z } from 'zod';

const loginSchema = z.object({
  email: z.string().email('Invalid email'),
  password: z.string().min(8, 'At least 8 characters'),
});

Inferindo tipos TypeScript

Use z.infer para derivar automaticamente o tipo TypeScript do seu esquema Zod. Não é necessária uma interface separada.

type LoginForm = z.infer<typeof loginSchema>;
// { email: string; password: string }

Conectando ao useForm por meio do resolver

Passe zodResolver(schema) para a opção resolver de useForm. O RHF usará o Zod para validar o formulário em vez de regras definidas diretamente no código.

import { zodResolver } from '@hookform/resolvers/zod';

const { register, handleSubmit, formState } = useForm<LoginForm>({
  resolver: zodResolver(loginSchema),
});

Chega de regras diretamente no código

Com zodResolver, você não precisa mais passar regras para register(). Basta chamar register('fieldName') sem um segundo argumento. O Zod cuida de toda a validação.

<input {...register('email')} />
{errors.email && <p>{errors.email.message}</p>}

Validações complexas com Zod

O Zod oferece validações poderosas: url(), uuid(), regex(), refine() para lógica personalizada e superRefine() para validação entre campos.

const schema = z.object({
  url: z.string().url('Must be a valid URL'),
  confirmPassword: z.string(),
}).refine(
  data => data.password === data.confirmPassword,
  { message: 'Passwords must match', path: ['confirmPassword'] }
);

Validação entre campos

O refine() ou superRefine() do Zod pode acessar todos os valores dos campos, permitindo regras entre campos, como a de que a data final deve ser posterior à data inicial.

const schema = z.object({
  start: z.string(),
  end: z.string(),
}).refine(d => d.end > d.start, {
  message: 'End must be after start',
  path: ['end'],
});

Compartilhando schemas com o backend

Em um projeto TypeScript de ponta a ponta, exporte o schema do Zod a partir de um módulo compartilhado. Use-o tanto no formulário React quanto no manipulador de API do Node.js/Next.js para manter a validação consistente.

// shared/schemas.ts
export const loginSchema = z.object({ ... });

// frontend — import and use as resolver
// backend — import and call .parse() on request body

Verificação rápida

Qual é a principal vantagem de usar z.infer para o tipo do formulário em TypeScript?

Recapitulação

Defina um schema do Zod, infira o tipo TypeScript com z.infer, passe zodResolver para useForm e remova as regras de validação inseridas diretamente no código. Use refine() para validação entre campos e compartilhe schemas entre o frontend e o backend.

A seguir

Próxima lição: **Campos dinâmicos com useFieldArray** — você adicionará, removerá e reordenará campos de formulário dinâmicos usando o hook useFieldArray.

Perguntas Frequentes

A aula “Validação de esquema com Zod” é grátis?

Sim — o texto completo de “Validação de esquema com Zod” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de React Academy, atualize para CoddyKit PRO. O curso de React Academy inclui 4 aulas no total.

O que vou aprender em “Validação de esquema com Zod”?

Integre @hookform/resolvers e esquemas Zod para validar formulários com segurança de tipos. Você pratica React Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.

Preciso ter experiência prévia para começar React Academy?

Nenhuma experiência prévia é necessária. React Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 3 de 4.

Quanto tempo leva a aula “Validação de esquema com Zod”?

A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.

Posso escrever e executar código nesta aula de React Academy?

Sim. Cada aula de React Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.

Todas as aulas deste curso

← Voltar para React Academy