ساخت یک فرم تایپ ایمن در NextJs با Zod

Summarize this content to 400 words in Persian Lang
فرم‌ها بخش مهمی از هر برنامه وب هستند، و ساختن آنها به روشی ایمن از اشکالات کمتر و قابلیت نگهداری بهتر تضمین می‌کند. در این پست وبلاگ، یک فرم کامل در React با استفاده از TypeScript و Zod برای اعتبار سنجی ایجاد می کنیم. تمام کدها برای سادگی در یک فایل واحد قرار خواهند گرفت.

زود چیست؟Zod یک کتابخانه اعلان و اعتبار سنجی طرحواره TypeScript است. این به شما امکان می‌دهد تا طرح‌واره‌هایی را برای داده‌های خود تعریف کنید، که سپس می‌توان از آن برای اعتبارسنجی ورودی‌ها به روشی مطمئن از نوع استفاده کرد. این امر Zod را به گزینه ای عالی برای اعتبارسنجی فرم ها در برنامه های React تبدیل می کند.

راه اندازی پروژهاگر قبلاً این کار را نکرده اید، باید React، TypeScript و Zod را در پروژه خود نصب کنید:

ضربه شدیدکد را کپی کنیدnpm نصب react react-dom typescript zodاکنون، بیایید یک فرم ساده ایجاد کنیم که نام، نام خانوادگی و ایمیل کاربر را با اعتبارسنجی برای هر فیلد جمع آوری می کند.

کددر اینجا کد کامل کامپوننت فرم آمده است:

تایپیکد را کپی کنیدوارد کردن React، { useState } از 'react';وارد کردن { z } از 'zod';

// طرحواره را با استفاده از Zod تعریف کنیدconst formSchema = z.object({firstName: z.string().min(1، “نام الزامی است”)،lastName: z.string().min(1، “نام خانوادگی الزامی است”)،ایمیل: z.string().email(“آدرس ایمیل نامعتبر”)،})؛

// نوع TypeScript برگرفته از طرحواره Zodنوع FormData = z.infer;

صادرات تابع پیش فرض ZodForm() {// حالت برای مدیریت مقادیر ورودی فرمپایان [formData, setFormData] = useState({نام: ''،نام خانوادگی: ''،ایمیل: ''،})؛

// حالت برای مدیریت خطاهای فرمپایان [formErrors, setFormErrors] = useState>({});

// کنترل تغییرات ورودیconst handleInputChange = (رویداد: React.ChangeEvent) => {const { name, value } = event.target;setFormData({ …formData, [name]: ارزش })؛};

// رسیدگی به ارسال فرمconst handleSubmit = (رویداد: React.FormEvent) => {event.preventDefault();

// Validate form data using Zod
const result = formSchema.safeParse(formData);

if (!result.success) {
// If validation fails, set errors
const errors: Partial = {};
result.error.errors.forEach((error) => {
if (error.path[0]) {
errors[error.path[0] as keyof FormData] = error.message;
}
});
setFormErrors(errors);
} else {
// If validation succeeds, clear errors and handle form submission
setFormErrors({});
alert(‘Form submitted successfully!’);
console.log(result.data);
}

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

};

بازگشت (
نامنوع = “متن”id = “firstName”name = “firstName”value={formData.firstName}onChange={handleInputChange}className=”mt-1 block w-full p-2 border border-gray-300 rounded-md”/>{formErrors.firstName && ({formErrors.firstName}

)}

Submit

)}توضیحبیایید آنچه را که در کد اتفاق می افتد تجزیه کنیم:

تعریف طرحواره با Zod با تعریف طرحواره با استفاده از Zod شروع می کنیم. این طرح قوانین را برای هر فیلد فرم اعمال می کند. به عنوان مثال، فیلدهای firstName و lastName الزامی هستند و ایمیل باید یک آدرس ایمیل معتبر باشد.

تایپیکد را کپی کنیدconst formSchema = z.object({firstName: z.string().min(1، “نام مورد نیاز است”)،lastName: z.string().min(1، “نام خانوادگی الزامی است”)،ایمیل: z.string().email(“آدرس ایمیل نامعتبر”)،})؛

مدیریت وضعیت ما داده های فرم را با استفاده از قلاب useState React مدیریت می کنیم. این به ما امکان می دهد تا ورودی کاربر و هرگونه خطای اعتبارسنجی را پیگیری کنیم.

تایپیکد را کپی کنیدپایان [formData, setFormData] = useState({نام: ''،نام خانوادگی: ''،ایمیل: ''،})؛

پایان [formErrors, setFormErrors] = useState>({});

مدیریت تغییرات ورودی تابع handleInputChange وضعیت را با تایپ کاربر در هر فیلد ورودی به روز می کند.

تایپیکد را کپی کنیدconst handleInputChange = (رویداد: React.ChangeEvent) => {const { name, value } = event.target;setFormData({ …formData, [name]: ارزش })؛};

رسیدگی به ارسال فرم هنگامی که فرم ارسال می شود، داده ها را با استفاده از روش safeParse Zod تأیید می کنیم. اگر اعتبارسنجی ناموفق باشد، پیام های خطا را در کنار فیلدهای مربوطه نمایش می دهیم. در صورت موفقیت آمیز بودن اعتبار سنجی، به ارسال فرم ادامه می دهیم (در این مورد، به سادگی ثبت داده ها و نمایش یک هشدار).

تایپیکد را کپی کنیدconst handleSubmit = (رویداد: React.FormEvent) => {event.preventDefault();

const result = formSchema.safeParse(formData);

if (!result.success) {خطاهای const: جزئی = {};result.error.errors.forEach((خطا) => {اگر (error.path[0]) {خطاها[error.path[0] as keyof FormData]= error.message;}})؛setFormErrors(errors);}دیگر {setFormErrors({});alert('فرم با موفقیت ارسال شد!');console.log(result.data);}};نتیجه گیریدر این پست با استفاده از React، TypeScript و Zod یک فرم کاملا کاربردی و ایمن ایجاد کردیم. این تنظیمات تضمین می‌کند که فرم شما ورودی و اعتبارسنجی کاربر را به شیوه‌ای قوی مدیریت می‌کند. با استفاده از Zod، می توانید به راحتی این رویکرد را به فرم های پیچیده تر و قوانین اعتبارسنجی گسترش دهید.

// Validate form data using Zod
const result = formSchema.safeParse(formData);

if (!result.success) {
  // If validation fails, set errors
  const errors: Partial = {};
  result.error.errors.forEach((error) => {
    if (error.path[0]) {
      errors[error.path[0] as keyof FormData] = error.message;
    }
  });
  setFormErrors(errors);
} else {
  // If validation succeeds, clear errors and handle form submission
  setFormErrors({});
  alert('Form submitted successfully!');
  console.log(result.data);
}

  

  

  
    Submit