React Hook Form Zod를 사용한 양식

소개

프로그래밍을 시작했을 때 양식에서 데이터를 수집하려면 순수 JavaScript로 많은 코드를 작성해야 했습니다. 그 이후로 웹 개발은 크게 발전하여 오늘날에는 이 작업의 대부분을 추상화하는 라이브러리가 있어 양식 데이터를 더 쉽게 관리할 수 있습니다.

이 글에서는 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<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'],
  });

이 스키마는 각 필드에 필요한 유형과 유효성 검사를 정의합니다. .refine() 메소드는 "password" 및 "confirm" 필드에 입력된 비밀번호가 동일한지 확인하는 데 사용되었습니다.

.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<typeof signUpFormSchema>;

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

useForm()에서 사용한 함수와 변수는 다음과 같습니다.

• handlerSubmit: 양식 제출을 처리합니다.
• 등록: 양식 필드를 React Hook 양식 데이터 관리에 바인딩합니다.
• 재설정: 양식을 재설정합니다.
• isSubmitting: 양식이 제출되고 있는지 여부를 나타냅니다.
• 오류: 각 필드에 대한 유효성 검사 오류를 저장합니다. ### 양식 제출 기능 양식 제출을 시뮬레이션하기 위해 isSubmitting 상태를 보기 위한 대기 시간을 추가하고 토스트와 함께 성공 메시지를 표시하는 handlerSignup 함수를 만들었습니다.

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

그런 다음 양식에 기능을 추가했습니다.

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

마지막으로 레지스터를 사용하여 어떤 필드가 어떤 속성에 속하는지 이름을 지정하고 오류(존재하는 경우)를 표시했습니다.

<div className="space-y-2">
  <레이블 htmlFor="name">이름</Label>
  



<p>결과는 다음과 같았습니다.</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>
  
  
  최종 고려 사항
</h2>

<p>이 글에서는 React Hook Form과 zod를 통합하여 제어되지 않는 양식의 유효성을 검사하는 간단한 방법을 보여주었습니다. 라이브러리는 제어되는 구성요소와도 작동하므로 더 많은 옵션을 탐색하려면 설명서를 참조하세요.</p>


          

            
        

위 내용은 React Hook Form Zod를 사용한 양식의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!