Formen mit React Hook Form Zod

Einführung

Als ich mit dem Programmieren begann, musste ich viel Code in reinem JavaScript schreiben, um Daten aus einem Formular zu sammeln. Seitdem hat sich die Webentwicklung so stark weiterentwickelt, dass wir heute über Bibliotheken verfügen, die einen Großteil dieser Arbeit abstrahieren und so die Verwaltung von Formulardaten erleichtern.

In diesem Artikel zeige ich Ihnen, wie Sie React Hook Form verwenden, um mit Formulardaten zu arbeiten und diese Daten auf effiziente und organisierte Weise zu validieren.

Ich habe es eilig, geben Sie mir den vollständigen Code

Es liegt in deiner Hand:

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<typeof signUpForm>;

export function App() {
  const {
    handleSubmit,
    register,
    reset,
    formState: { isSubmitting, errors },
  } = useForm<SignUpForm>({
    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 (
    <>
      <Toaster richColors />
      <div className="min-h-screen lg:grid lg:grid-cols-2 antialiased gap-8">
        <div className="hidden lg:flex h-full justify-center border-r border-foreground/5 bg-foreground text-muted-foreground items-center gap-3 text-lg">
          <Gamepad2 />
          <span className="font-semibold">gamers.shop</span>
        </div>
        <div className="flex flex-col items-center justify-center gap-6 min-h-screen">
          <div className="px-10 w-96 h-full flex flex-col justify-center items-center lg:w-[500px]">
            <h1 className="flex items-center gap-2 mb-4 text-2xl font-semibold tracking-tight">
              <Gamepad />
              Crie sua conta
              <Gamepad />
            </h1>
            <form onSubmit={handleSubmit(handleSignup)} className="space-y-4 w-full ">
              <div className="space-y-2">
                <Label htmlFor="name">Nome</Label>
                <Input>



<h2>
  
  
  Tutorial
</h2>

<h3>
  
  
  Estruturando o Formulário
</h3>

<p>Primeiro, criei um formulário com quatro campos: nome, e-mail, senha e confirmação de senha. Para facilitar o desenvolvimento da interface, utilizei shadcn, tailwind e lucide-react. O uso de classes CSS pode parecer um pouco detalhado, mas elas ajudam a manter um design consistente.<br>
</p>

<pre class="brush:php;toolbar:false"><form className="space-y-4 w-full ">
  <div className="space-y-2">
    <Label htmlFor="name">Nome</Label>
    <Input>



<p>Criei 4 campos nesse form: nome, e-mail, password e confirm. Preciso validá-los de alguma forma. Como esse exemplo server para explicar o uso de zod, evitei utilizar as propriedades nativas do HTML (required, maxlength etc).</p>

<h3>
  
  
  Validação de Dados com Zod
</h3>

<p>Para garantir que os dados inseridos nos campos estão corretos, criei um schema de validação com o zod. O schema define as restrições para cada campo e personaliza as mensagens de erro:<br>
</p>

<pre class="brush:php;toolbar:false">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'],
  });

Dieses Schema definiert die für jedes Feld erforderlichen Typen und Validierungen. Die Methode .refine() wurde verwendet, um sicherzustellen, dass die in den Feldern „Passwort“ und „Bestätigung“ eingegebenen Passwörter identisch sind.

.refine((data) => data.password === data.confirm, {
  message: 'Senhas não conferem!',
  path: ['confirm'],
});

Integration mit React Hook Form und Zod Resolver

React Hook Form ist eine Formularbibliothek, die die Leistung verbessert, indem sie unnötige erneute Renderings reduziert und die Datenmanipulation vereinfacht. Ich habe useForm() verwendet, um das Formular zu konfigurieren und das Validierungsschema über zodResolver:
zu übergeben

import { zodResolver } from '@hookform/resolvers/zod';
import { useForm } from 'react-hook-form';

type SignUpForm = z.infer<typeof signUpFormSchema>;

const {
    handleSubmit,
    register,
    reset,
    formState: { isSubmitting, errors },
  } = useForm<SignUpForm>({
    resolver: zodResolver(signUpFormSchema),
  });

Die Funktionen und Variablen, die ich von useForm() verwendet habe, sind:

• handleSubmit: Verwaltet die Formularübermittlung.
• registrieren: bindet Formularfelder an die Datenverwaltung von React Hook Form.
• Zurücksetzen: Setzt das Formular zurück.
• isSubmitting: gibt an, ob das Formular gesendet wird.
• Fehler: Speichert Validierungsfehler für jedes Feld. ### Formularübermittlungsfunktion Um die Formularübermittlung zu simulieren, habe ich die Funktion handleSignup erstellt, die eine Wartezeit zum Anzeigen des isSubmitting-Status hinzufügt und eine Erfolgsmeldung mit dem Toast anzeigt:

async function handleSignup(data: SignUpForm) {
  console.log(data);
  await new Promise((resolve) => {
    setTimeout(resolve, 2000);
  });
  reset();
  toast.success('Conta criada com sucesso!');
}

Dann habe ich die Funktion zum Formular hinzugefügt:

<form onSubmit={handleSubmit(handleSignup)} className="space-y-4 w-full">

Und schließlich habe ich mit „Register“ benannt, welches Feld zu welcher Eigenschaft gehört, und die Fehler angezeigt (falls vorhanden):

<div className="space-y-2">
  <Label htmlFor="name">Name</Label>
  <eingabe>



<p>Das Ergebnis sah so aus:</p>

<p><img src="https://img.php.cn/upload/article/000/000/000/173112234459208.jpg" alt="Formulários com React Hook Form   Zod"></p>

<h2>
  
  
  Abschließende Überlegungen
</h2>

<p>In diesem Text habe ich eine einfache Möglichkeit gezeigt, React Hook Form und Zod zu integrieren, um unkontrollierte Formulare zu validieren. Die Bibliothek funktioniert auch mit gesteuerten Komponenten. Weitere Optionen finden Sie in der Dokumentation.</p>


          

            
        </eingabe>

Das obige ist der detaillierte Inhalt vonFormen mit React Hook Form Zod. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!