React Academy · पाठ

Zod से स्कीमा मान्यकरण

टाइप-सुरक्षित फ़ॉर्म मान्यकरण के लिए @hookform/resolvers और Zod स्कीमा को एकीकृत करें।

पाठ 3, कुल 4 में से13 चरण

Zod से स्कीमा मान्यकरण, CoddyKit पर React Academy का एक निःशुल्क पाठ है। यह 4 में से 3वाँ पाठ है। आप नीचे पूरा पाठ निःशुल्क पढ़ सकते हैं—फिर अंतर्निहित कोड संपादक और 24/7 एआई ट्यूटर के साथ ब्राउज़र में इसका व्यावहारिक अभ्यास कर सकते हैं। यह React Academy सीखने के मार्ग का हिस्सा है और आपकी प्रगति वेब तथा CoddyKit ऐप पर सिंक होती रहती है। React Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।

स्वागत है

इस पाठ में आप @hookform/resolvers के माध्यम से React Hook Form को Zod स्कीमा के साथ एकीकृत करेंगे, ताकि फ़ॉर्म और TypeScript प्रकारों दोनों के लिए एक ही सत्यापन स्रोत के साथ टाइप-सुरक्षित सत्यापन प्राप्त किया जा सके।

स्कीमा सत्यापन क्यों?

register() में सीधे सत्यापन नियम परिभाषित करना विस्तृत और दोबारा उपयोग करना कठिन हो जाता है। Zod स्कीमा सभी सत्यापन को एक ही स्थान पर परिभाषित करता है, TypeScript प्रकारों का अपने-आप अनुमान लगाता है और फ्रंटएंड तथा बैकएंड के बीच साझा किया जा सकता है।

इंस्टॉलेशन

Zod और RHF रिज़ॉल्वर पैकेज इंस्टॉल करें।
npm install zod @hookform/resolvers

Zod स्कीमा परिभाषित करना

अपने फ़ॉर्म का ढाँचा परिभाषित करने के लिए z.object() का उपयोग करें। हर फ़ील्ड में क्रम से जोड़ी गई सत्यापन विधियों के साथ Zod प्रकार का उपयोग होता है।
import { z } from 'zod';

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

TypeScript प्रकारों का अनुमान लगाना

अपने Zod स्कीमा से TypeScript प्रकार अपने-आप प्राप्त करने के लिए z.infer का उपयोग करें। अलग interface की आवश्यकता नहीं होती।
type LoginForm = z.infer<typeof loginSchema>;
// { email: string; password: string }

resolver के माध्यम से useForm से जोड़ना

useForm के resolver विकल्प में zodResolver(schema) पास करें। RHF सीधे लिखे गए नियमों के बजाय फ़ॉर्म का सत्यापन करने के लिए Zod का उपयोग करेगा।
import { zodResolver } from '@hookform/resolvers/zod';

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

अब सीधे लिखे गए नियम नहीं

zodResolver के साथ अब आपको register() में rules पास करने की आवश्यकता नहीं है। बिना दूसरे आर्ग्युमेंट के केवल register('fieldName') कॉल करें। Zod सभी सत्यापन संभालता है।
<input {...register('email')} />
{errors.email && <p>{errors.email.message}</p>}

जटिल Zod सत्यापन

Zod शक्तिशाली सत्यापन का समर्थन करता है: url(), यूयूआईडी, रेगेक्स, कस्टम तर्क के लिए refine(), और विभिन्न फ़ील्डों के सत्यापन के लिए superRefine()।
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'] }
);

विभिन्न फ़ील्डों का सत्यापन

Zod का refine() या superRefine() सभी फ़ील्डों के मानों तक पहुँच सकता है, जिससे ऐसे नियम बनाए जा सकते हैं जैसे 'समाप्ति तिथि आरंभ तिथि के बाद होनी चाहिए'।
const schema = z.object({
  start: z.string(),
  end: z.string(),
}).refine(d => d.end > d.start, {
  message: 'End must be after start',
  path: ['end'],
});

बैकएंड के साथ स्कीमा साझा करना

पूर्ण-स्टैक TypeScript प्रोजेक्ट में Zod schema को साझा मॉड्यूल से निर्यात करें। लगातार एकसमान सत्यापन के लिए इसका उपयोग React फ़ॉर्म और आपके Node.js/Next.js एपीआई हैंडलर, दोनों में करें।
// shared/schemas.ts
export const loginSchema = z.object({ ... });

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

त्वरित जाँच

TypeScript में फ़ॉर्म प्रकार के लिए z.infer का उपयोग करने का मुख्य लाभ क्या है?

पुनरावलोकन

Zod schema परिभाषित करें, z.infer से TypeScript प्रकार प्राप्त करें, zodResolver को useForm में पास करें और फ़ॉर्म के भीतर लिखे सत्यापन नियम हटा दें। विभिन्न फ़ील्डों के सत्यापन के लिए refine() का उपयोग करें और फ्रंटएंड तथा बैकएंड के बीच schema साझा करें।

अगला पाठ

अगला पाठ: **useFieldArray के साथ गतिशील फ़ील्ड** — आप useFieldArray हुक का उपयोग करके गतिशील फ़ॉर्म फ़ील्ड जोड़ेंगे, हटाएँगे और उनका क्रम बदलेंगे।
शुरुआत निःशुल्क

एआई शिक्षक के साथ React सीखें — निःशुल्क

अपने ब्राउज़र में वास्तविक कोड लिखें और चलाएँ, चौबीसों घंटे एआई शिक्षक से तुरंत सहायता पाएँ, और वेब या ऐप पर वहीं से शुरू करें जहाँ आपने छोड़ा था।

पाठ्यक्रम
88
पाठ
324

अक्सर पूछे जाने वाले प्रश्न

क्या “Zod से स्कीमा मान्यकरण” पाठ निःशुल्क है?

हाँ—“Zod से स्कीमा मान्यकरण” का पूरा पाठ यहाँ वेब पर निःशुल्क पढ़ा जा सकता है। इंटरैक्टिव अभ्यास (अंतर्निहित कोड संपादक और 24/7 एआई ट्यूटर) करने और React Academy पाठ्यक्रम का बाकी हिस्सा अनलॉक करने के लिए CoddyKit PRO लें। React Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।

“Zod से स्कीमा मान्यकरण” में मैं क्या सीखूँगा?

टाइप-सुरक्षित फ़ॉर्म मान्यकरण के लिए @hookform/resolvers और Zod स्कीमा को एकीकृत करें। आप ब्राउज़र में सीधे चलाए जाने वाले व्यावहारिक कोड के साथ React Academy का अभ्यास करते हैं, और पाठ पूरा करते समय 24/7 एआई ट्यूटर आपके प्रश्नों के उत्तर देता है।

क्या React Academy शुरू करने के लिए मुझे किसी अनुभव की आवश्यकता है?

पहले के अनुभव की आवश्यकता नहीं है। CoddyKit पर React Academy शुरुआती से लेकर उन्नत शिक्षार्थियों तक सभी के लिए व्यवस्थित किया गया है, इसलिए आप यहीं से या शुरुआत से सीखना शुरू कर सकते हैं और अपनी गति से आगे बढ़ सकते हैं। यह 4 में से 3वाँ पाठ है।

“Zod से स्कीमा मान्यकरण” पाठ पूरा करने में कितना समय लगता है?

CoddyKit का अधिकांश पाठ लगभग 5–10 मिनट में पूरा हो जाता है। हर पाठ छोटा और संवादात्मक है, इसलिए आप लगातार प्रगति करते हैं और वेब या ऐप पर वहीं से सीखना जारी रख सकते हैं जहाँ आपने छोड़ा था।

क्या मैं इस React Academy पाठ में कोड लिख और चला सकता हूँ?

हाँ। हर React Academy पाठ में एक अंतर्निर्मित कोड संपादक शामिल है, जिससे आप सीधे अपने ब्राउज़र में वास्तविक कोड लिख और चला सकते हैं और तुरंत एआई प्रतिक्रिया पा सकते हैं—स्थानीय सेटअप की आवश्यकता नहीं है।

इस पाठ्यक्रम के सभी पाठ

  1. React Hook Form के साथ शुरुआत
  2. मान्यकरण नियम और त्रुटि संदेश
  3. Zod से स्कीमा मान्यकरण
  4. useFieldArray से डायनेमिक फ़ील्ड
← React Academy पर वापस जाएँ