React Academy · Ders

Zod ile Şema Doğrulama

Tür güvenli form doğrulaması için @hookform/resolvers ve Zod şemalarını entegre edin.

Zod ile Şema Doğrulama, CoddyKit'te ücretsiz bir React Academy dersidir. Bu, 4 dersinin 3. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, React Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. React Academy kursu toplamda 4 dersten oluşur.

Hoş Geldiniz

Bu derste React Hook Form'u @hookform/resolvers aracılığıyla Zod şemalarıyla entegre ederek hem form hem de TypeScript türleri için tek bir doğruluk kaynağıyla tür güvenli doğrulama elde edeceksiniz.

Şema Doğrulaması Neden Kullanılır?

register() içinde doğrulama kurallarını satır içinde tanımlamak uzar ve yeniden kullanımı zorlaştırır. Bir Zod şeması tüm doğrulamaları tek bir yerde tanımlar, TypeScript türlerini otomatik olarak çıkarır ve ön yüz ile arka uç arasında paylaşılabilir.

Kurulum

Zod'u ve RHF çözümleyici paketini kurun.

npm install zod @hookform/resolvers

Zod Şeması Tanımlama

Formunuzun yapısını tanımlamak için z.object() kullanın. Her alan, zincirlenmiş doğrulama yöntemlerine sahip bir Zod türü kullanır.

import { z } from 'zod';

const loginSchema = z.object({
  email: z.string().email('Invalid email'),
  password: z.string().min(8, 'At least 8 characters'),
});

TypeScript Türlerini Çıkarma

Zod şemanızdan TypeScript türünü otomatik olarak türetmek için z.infer kullanın. Ayrı bir interface gerekmez.

type LoginForm = z.infer<typeof loginSchema>;
// { email: string; password: string }

resolver aracılığıyla useForm'a Bağlama

zodResolver(schema) değerini useForm'ın resolver seçeneğine iletin. RHF, satır içi kurallar yerine formu doğrulamak için Zod'u kullanır.

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

const { register, handleSubmit, formState } = useForm<LoginForm>({
  resolver: zodResolver(loginSchema),
});

Artık Satır İçi Kural Yok

zodResolver ile artık register() işlevine kurallar iletmeniz gerekmez. İkinci bağımsız değişken olmadan yalnızca register('fieldName') çağrısını yapın. Tüm doğrulamaları Zod gerçekleştirir.

<input {...register('email')} />
{errors.email && <p>{errors.email.message}</p>}

Karmaşık Zod Doğrulamaları

Zod; url(), uuid(), regex(), özel mantık için refine() ve alanlar arası doğrulama için superRefine() gibi güçlü doğrulama seçeneklerini destekler.

const schema = z.object({
  url: z.string().url('Must be a valid URL'),
  confirmPassword: z.string(),
}).refine(
  data => data.password === data.confirmPassword,
  { message: 'Passwords must match', path: ['confirmPassword'] }
);

Alanlar Arası Doğrulama

Zod'un refine() veya superRefine() işlevleri tüm alan değerlerine erişebilir; bu da "bitiş tarihi başlangıç tarihinden sonra olmalıdır" gibi alanlar arası kuralları mümkün kılar.

const schema = z.object({
  start: z.string(),
  end: z.string(),
}).refine(d => d.end > d.start, {
  message: 'End must be after start',
  path: ['end'],
});

Şemaları Arka Uçla Paylaşma

Tam yığınlı bir TypeScript projesinde Zod schema tanımını ortak bir modülden dışa aktarın. Tutarlı doğrulama için bunu hem React formunda AND Node.js/Next.js API işleyicinizde kullanın.

// shared/schemas.ts
export const loginSchema = z.object({ ... });

// frontend — import and use as resolver
// backend — import and call .parse() on request body

Hızlı Kontrol

TypeScript'te form türü için z.infer kullanmanın temel avantajı nedir?

Özet

Bir Zod schema tanımlayın, z.infer ile TypeScript türünü çıkarın, zodResolver ile useForm çağrısını yapılandırın ve satır içi doğrulama kurallarını kaldırın. Alanlar arası doğrulama için refine() kullanın ve schema tanımlarını ön yüz ile arka uç arasında paylaşın.

Sırada

Sonraki ders: **useFieldArray ile Dinamik Alanlar** — useFieldArray kancasını kullanarak dinamik form alanları ekleyecek, kaldıracak ve yeniden sıralayacaksınız.

Sıkça Sorulan Sorular

“Zod ile Şema Doğrulama” dersi ücretsiz mi?

Evet — “Zod ile Şema Doğrulama” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve React Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. React Academy kursu toplamda 4 dersten oluşur.

“Zod ile Şema Doğrulama” dersinde ne öğreneceğim?

Tür güvenli form doğrulaması için @hookform/resolvers ve Zod şemalarını entegre edin. React Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.

React Academy öğrenmeye başlamak için deneyim gerekli mi?

Önceden deneyim gerekmez. CoddyKit'te React Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 3. dersidir.

“Zod ile Şema Doğrulama” dersi ne kadar sürer?

Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.

Bu React Academy dersinde kod yazıp çalıştırabilir miyim?

Evet. Her React Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.

Bu kursun tüm dersleri

← React Academy Sayfasına Dön