react-hook-form validate with zod

2023. 8. 17. 10:14·NOTE

 react hook form을 사용하면서 validate를 위해 zod패키지를 많이 사용하는것 같다, 

패키지 용량도 작고 유효성검증(이메일..등등 다양한 폼요소)도 간단하게 할 수 있다. 

 

각각 폼에 넣는것이아니라 한번에 컨트롤 할수있어서 좋은듯하다.

 

zod 설치하기 

npm add zod @hookform/resolvers

 

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

const schema = z.object({
  selectReason: z.string().nonempty('이유를 선택해주세요'),
  detailReason: z.string().trim().nonempty('디테일 이버력해'),  
  refundName: z.string().trim().nonempty('받은사람 입력해주세요.'),
  refundNotice: z.string().optional(),
  receiverZipCd: z.string().nonempty('우편번호 입력'),
  receiverAddress: z.string().nonempty('받는사람 주소 입력'),
  receiverJibunAddress: z.string().nonempty('지번주소 입력'),
  receiverContact1Prefix: z.string().nonempty('dddd'),
  receiverContact1Middle: z.string().nonempty('dddd'),
  receiverContact1End: z.string().nonempty('dddd'),
  deliveryCompany: z.string().optional(),
  invoiceNo: z.string().optional(),
});

const methods = useForm({
   resolver: zodResolver(schema),
});

 

 

참고
https://velog.io/@ckstn0777/React-Hook-Form%EA%B3%BC-Zod%EB%A5%BC-%ED%86%B5%ED%95%9C-Form-Validation-%EC%B2%98%EB%A6%AC

'NOTE' 카테고리의 다른 글

css로 부모선택자 선택하기  (0) 2024.07.04
gitignore에 dist추가해도 tracking 되는 이슈  (0) 2024.06.27
typescript 배열 중 하나 타입으로 선언하기  (0) 2023.08.16
react 패키지를 next로 컴파일 하는 패키지  (0) 2023.08.06
리액트 오류: React DOMException: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node  (0) 2023.08.05
'NOTE' 카테고리의 다른 글
  • css로 부모선택자 선택하기
  • gitignore에 dist추가해도 tracking 되는 이슈
  • typescript 배열 중 하나 타입으로 선언하기
  • react 패키지를 next로 컴파일 하는 패키지
ssund
ssund
  • ssund
    ssund의 기술블로그
    ssund
  • 전체
    오늘
    어제
    • 분류 전체보기 (73)
      • TECH (22)
      • NOTE (40)
      • DAILY (7)
      • javascript (1)
      • 알고리즘 (0)
  • 블로그 메뉴

    • 홈
    • TECH
    • NOTE
    • DAILY
  • 링크

  • 공지사항

  • 인기 글

  • 태그

    JavaScript
    React
    d.ts
    타입스크립트
    react state management
    함수와 메서드차이
    slidesPerGroup
    Array.sort()
    call signatures
    git배포
    TypeScript
    global-style
    배열요소순서
    커머스프로젝트
    redux
    웹브라우저구성
    reduxtoolkit
    styled-components
    reat-head
    theme-provider
  • 최근 댓글

  • 최근 글

  • hELLO· Designed By정상우.v4.10.0
ssund
react-hook-form validate with zod

개인정보

  • 티스토리 홈
  • 포럼
  • 로그인
상단으로

티스토리툴바

단축키

내 블로그

내 블로그 - 관리자 홈 전환
Q
Q
새 글 쓰기
W
W

블로그 게시글

글 수정 (권한 있는 경우)
E
E
댓글 영역으로 이동
C
C

모든 영역

이 페이지의 URL 복사
S
S
맨 위로 이동
T
T
티스토리 홈 이동
H
H
단축키 안내
Shift + /
⇧ + /

* 단축키는 한글/영문 대소문자로 이용 가능하며, 티스토리 기본 도메인에서만 동작합니다.