Doğrulama (validation)
- React kursu
- İleri seviye
- Ders 35/56
- 4 dk
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.
Başlangıç kodu
import { useForm } from 'react-hook-form';
import { z } from 'zod';
import { zodResolver } from '@hookform/resolvers/zod';
// ZodForm bileşenini buraya yazÖrnek çözüm
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;Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 Zod modelsını react-hook-form'a ne bağlar?
- useState
- useEffect
- zodResolver Doğru cevap
- useMemo
Açıklama: zodResolver modeli form'a bağlar.
2 zodResolver kullanımı
useForm({ resolver: ____(formDef) });useForm({ resolver: zodResolver(formDef) });Açıklama: zodResolver modeli bağlar.
3 Doğrulama (validation): kavramları eşleştir
| Kavram | Anlamı |
|---|---|
z.object |
Yapı tanımlar |
zodResolver |
Form'a bağlar |
z.string |
Metin bekler |
z.email |
E-posta doğrular |