React
Doğrulama (validation)
Zod şeması ile form doğrulamayı öğrenirsin.
Zod ile doğrulama yapısı
Zod, TypeScript dostu bir doğrulama yapısı kütüphanesidir. Bir nesne yapısı tanımlar, veriyi buna göre doğrularsın.
react-hook-form ile Zod'u zodResolver ile bağlarsın. useForm({ resolver: zodResolver(formDef) }) çağrısı, formun doğrulamasını yapıya devreder.
Bu yaklaşım, doğrulama şartlarını tek bir yapıda toplar; form kodunu sadeleştirir ve tür güvenliği sağlar.
zodResolver kullanımı
Önce bir Zod modelsı tanımlarsın: const formModel = z.object({ email: z.string().email() });. Sonra useForm({ resolver: zodResolver(formModel) }) ile bağlarsın.
Bu noktadan sonra register çağrılarına required yazmana gerek yok; model doğrulamayı üstlenir. Hatalar yine formState.errors içinde görünür.
Zod, TypeScript türlerini de otomatik üretir; bu sayede form verisinin türü her zaman doğrudur.
Uygulama Zod model tabanlı form yaz
Aşağıdaki iskeleti tamamla. const formModel = z.object({ email: z.string().email() }); tanımla. useForm({ resolver: zodResolver(formModel) }) çağır. <form onSubmit={handleSubmit(onSubmit)}> içinde <input {...register('email')} /> ve <button type="submit">Gönder</button> koy. export default ekle. z'i 'zod''tan, zodResolver'ı '@hookform/resolvers/zod''tan içe aktar.
Örnek çözümü göster
import { useForm } from 'react-hook-form';
import { z } from 'zod';
import { zodResolver } from '@hookform/resolvers/zod';
const formModel = z.object({ email: z.string().email() });
function ZodForm() {
const { register, handleSubmit } = useForm({ resolver: zodResolver(formModel) });
return (
<form onSubmit={handleSubmit((data) => console.log(data))}>
<input {...register('email')} />
<button type="submit">Gönder</button>
</form>
);
}
export default ZodForm;
Kendini test et
-
Zod modelsını react-hook-form'a ne bağlar?
- useState
- useEffect
- zodResolver
- useMemo
Cevabı göster
zodResolver — zodResolver modeli form'a bağlar.
-
zodResolver kullanımı
useForm({ resolver: ____(formDef) });
Cevabı göster
useForm({ resolver: zodResolver(formDef) });
-
Doğrulama (validation): kavramları eşleştir
- z.object
- Yapı tanımlar
- zodResolver
- Form'a bağlar
- z.string
- Metin bekler
- z.email
- E-posta doğrular
Sıradaki ders: Özet - react-hook-form
