NOTE
react-hook-form validate with zod
ssund
2023. 8. 17. 10:14
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),
});