Borang dengan React Hook Form Zod

pengenalan

Apabila saya memulakan pengaturcaraan, saya perlu menulis banyak kod dalam JavaScript tulen untuk mengumpul data daripada borang. Sejak itu, pembangunan web telah berkembang begitu banyak sehingga hari ini kami mempunyai perpustakaan yang mengabstraksi banyak kerja ini, menjadikannya lebih mudah untuk mengurus data borang.

Dalam artikel ini, saya akan menunjukkan kepada anda cara menggunakan React Hook Form untuk bekerja dengan data borang dan zod untuk mengesahkan data ini dengan cara yang cekap dan teratur.

Saya tergesa-gesa, berikan saya kod lengkap

Ia ada di tangan anda:

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'],
  });

Skema ini mentakrifkan jenis dan pengesahan yang diperlukan untuk setiap medan. Kaedah .refine() digunakan untuk memastikan bahawa kata laluan yang dimasukkan dalam medan "kata laluan" dan "sahkan" adalah sama.

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

Penyepaduan dengan React Hook Form dan Zod Resolver

React Hook Form ialah perpustakaan borang yang meningkatkan prestasi dengan mengurangkan pemaparan semula yang tidak perlu dan memudahkan manipulasi data. Saya menggunakan useForm() untuk mengkonfigurasi borang, lulus skema pengesahan melalui zodResolver:

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),
  });

Fungsi dan pembolehubah yang saya gunakan daripada useForm() ialah:

• handleSubmit: mengendalikan penghantaran borang.
• daftar: mengikat medan borang kepada pengurusan data React Hook Form.
• set semula: menetapkan semula borang.
• isSubmitting: menunjukkan sama ada borang sedang diserahkan.
• ralat: menyimpan ralat pengesahan untuk setiap medan. ### Fungsi Penyerahan Borang Untuk mensimulasikan penyerahan borang, saya mencipta fungsi handleSignup, yang menambah masa menunggu untuk melihat status isSubmitting dan memaparkan mesej kejayaan dengan roti bakar:

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

Kemudian saya menambah fungsi pada borang:

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

Dan akhirnya, saya menggunakan daftar untuk menamakan medan mana yang dimiliki oleh harta mana, dan menunjukkan ralat (jika wujud):

<div className="space-y-2">
  <Label htmlFor="name">Nama</Label>
  <input>



<p>Hasilnya kelihatan seperti ini:</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>
  
  
  Pertimbangan Akhir
</h2>

<p>Dalam teks ini, saya menunjukkan cara mudah untuk menyepadukan React Hook Form dan zod untuk mengesahkan borang yang tidak terkawal. Perpustakaan juga berfungsi dengan komponen terkawal, jadi rujuk dokumentasi untuk meneroka lebih banyak pilihan.</p>


          

            
        

Atas ialah kandungan terperinci Borang dengan React Hook Form Zod. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!