اعتبار سنجی بخش کلیدی توسعه است، صرف نظر از اینکه چه زبان برنامه نویسی می نویسید. توسعه دهندگان باید همیشه ورودی کاربر، پارامترهای API و مقادیر بازیابی شده را تأیید کنند.

یکی از رایج ترین عناصری که در آن باید اعتبار سنجی ورودی کاربر را اعمال کنید، از طریق فرم است. این می تواند یک فرم ثبت نام کاربر، یک فرم تماس با ما یا یک پرسشنامه ساده باشد.

نتایج حاصل از آموزش

در پایان این مقاله، شما قادر خواهید بود:

مسائل رایج اعتبار سنجی فرم را درک کنید.

نحوه استفاده از کتابخانه اعتبارسنجی طرحواره Yup در کنار کتابخانه فرم Formik.

نحوه ساخت یک فرم در React با اعتبار سنجی کامل (همان اصول برای React Native، با نحو اجزای مختلف اعمال می شود).

فهرست

اعتبار سنجی چیست ؟

شی مورد تایید

معرفی Yup و Formik

نحوه گفت ن اعتبارسنجی به فرم

نتیجه

اعتبار سنجی چیست؟

اعتبار سنجی به صورت زیر تعریف می شود:

عمل تحلیل یا اثبات صحت یا صحت چیزی.

اما این در صحبت کردن کامپیوتر به چه معناست؟ این می تواند چیزهای زیادی باشد، اما این فرض هنوز پابرج است. شما می توانید یک مقدار متغیر یا یک شی را در برابر مجموعه ای از قوانین یا مقررات از پیش تعیین شده اعتبارسنجی کنید.

نمونه هایی از قوانین اعتبارسنجی می تواند به شرح زیر باشد:

رمز عبور باید حداقل 8 کاراکتر و دارای یک کاراکتر خاص باشد.

نام کاربری باید منحصر به فرد باشد.

تاریخ تولد باید به عنوان یک رشته، در یک قالب خاص، به عنوان مثال ISO8601 دریافت شود

بیایید از مثال فرم ثبت نام کاربر در یک وب سایت استفاده کنیم.

شی مورد تایید

فرم شامل چندین ورودی برای تشکیل یک شی UserRegistration خواهد بود. اینطوری:

 interface UserRegistration { firstName: string; surname: string; email: string; dob: string; }

در بالا یک رابط (قرارداد) برای یک شی UserRegistration است. این به سادگی برخی از اطلاعات کلیدی کاربر را تعریف می کند که باید جمع آوری شوند و همه مقادیر یک مقدار string هستند.

در حالی که زبان هایی مانند TypeScript برای اطمینان از اینکه ما انواع صحیح را به توابع در سراسر برنامه خود منتقل می کنیم مفید هستند، آنها ذاتاً محتوای واقعی یا مقادیر موجود در آن انواع را تأیید نمی کنند. TypeScript تضمین می کند که یک متغیر از نوع خاصی مانند یک رشته یا یک عدد است، اما تحلیل نمی کند که آیا محتوای آن رشته یا عدد با معیارها یا محدودیت های خاصی مطابقت دارد یا خیر.

چه می شد اگر ارزش ها را تأیید نکردیم؟

خوب، قبل از اینکه به نحوه اعتبار سنجی بپردازیم، بیایید ببینیم اگر اعتبار سنجی نکنیم چه اتفاقی می افتد.

بدون اعتبارسنجی، کاربر می تواند مقادیر زیر را وارد کند:

نام خانوادگی : 1231301
نام خانوادگی : سلام##تست_101‌
ایمیل : user_123@@email.to@.com‌
DoB : 10+12+1909

ممکن است این مقادیر کاملاً قابل قبول به نظر برسند و ظاهر شما ممکن است اجازه دهد بدون هیچ مشکلی ارسال شوند. و API احتمالاً در ابتدا این مقادیر را می پذیرد.

اما زمانی که API سعی می کند این مقادیر را در طول پردازش درخواست تجزیه کند (تبدیل)، با خطا مواجه می شود و در پردازش درخواست به درستی شکست می خورد.

چندین پیامد منفی برای این رویکرد وجود دارد:

افزایش بار سرور : بخش جلویی چندین درخواست نامعتبر به سرور ارسال می کند که به طور غیر ضروری سرور را تحت فشار قرار می دهد. می شد از این بار اضافی جلوگیری کرد.

هزینه های بالقوه بالاتر : هزینه رسیدگی به این درخواست های نامعتبر بسته به طرح میزبانی و پیکربندی سرور شما می تواند به میزان قابل توجهی افزایش یابد. هر درخواست نامعتبر منابع سرور را مصرف می کند که می تواند به طور موثرتری استفاده شود.

تجربه کاربری ضعیف (UX) : اگر کاربران مکرراً جزئیات را وارد کنند، فرم را ارسال کنند و سپس پیام‌های خطایی دریافت کنند که نشان می‌دهد ورودی‌های آنها نامعتبر است، احتمالاً ناامید می‌شوند. این می تواند منجر به برداشت منفی از برنامه شود.

برای کاهش این مشکلات و کاهش تعداد درخواست‌های نامعتبر، می‌توانیم «اعتبارسنجی سمت مشتری» را اجرا کنیم تا اطمینان حاصل کنیم که داده‌ها قبل از ارسال درخواست API، معیارهای لازم را دارند.

معرفی Yup و Formik

Yup و Formik هر دو کتابخانه ای هستند که می توانید آنها را از طریق npm یا yarn به هر برنامه React یا React Native اضافه کنید.

Yup یک کتابخانه ساخت طرحواره است که به شما امکان می دهد طرحواره هایی را برای اعتبارسنجی در زمان اجرا بسازید. دارای تعداد زیادی توابع گفت نی است که می تواند مجموعه قوانین را تنظیم کند، مقادیر را تبدیل کند و پیام های تأیید اعتبار را مستقیماً از جعبه بازگرداند.

بیایید به نمونه ای از طرحواره Yup برای فرم کاربری خود نگاهی بیندازیم:‌

 import * as Yup from 'yup'; // If using Typescript, you can utilise a wrapper function to enforce strict typing const createYupSchema = <T extends object>(schema: Yup.ObjectSchema<T>): Yup.ObjectSchema<T> => schema; export const userFormSchema = createYupSchema<UserInput>( Yup.object().shape({ firstname: Yup.string().required('First name is required'), surname: Yup.string().required('Surname is required'), email: Yup.string().email('Invalid email format').required('Email is required'), dob: Yup.string().required('Date of Birth is required'), }) ); // JS Version export const validationSchema = Yup.object({ firstname: Yup.string().required('First name is required'), surname: Yup.string().required('Surname is required'), email: Yup.string().email('Invalid email format').required('Email is required'), dob: Yup.date().required('Date of Birth is required') });

ما یک شی (شما) Yup ایجاد می کنیم که شامل تمام کلیدهای ما برای رابط کاربری ورودی ما است.

بخش های طرحواره:

کلید: کلیدی که بعداً برای نام عنصر ما استفاده می شود (از آنجایی که ما از TypeScript استفاده می کنیم، باید با نام کلید شی مطابقت داشته باشد).

قوانین: برای همه کلیدها، یک مجموعه قوانین اعمال کنید. یک مجموعه قوانین باید با یک اعلان تایپ شروع شود، یعنی Yup.string() یا Yup.number() و غیره. سپس می‌توانید سایر توابع اعتبارسنجی خود را زنجیره‌ای کنید.

استفاده از TypeScript تضمین می کند که ما نوع طرحواره را با انواع رابط خود مطابقت دهیم.

برای مثال، اگر سعی کنیم این کار را انجام دهیم:

 firstname: Yup.date().required();

یک خطای TypeScript ایجاد می کند که شکایت می کند که firstname نمی توان به عنوان یک تاریخ تأیید کرد، زیرا نوع نام یک string است.

نحوه گفت ن اعتبارسنجی به فرم

اینجاست که کتابخانه Formik ما وارد می‌شود و کارها را بسیار ساده‌تر از اعتبارسنجی یک فرم و پیاده‌سازی مدیریت خطا به صورت دستی می‌کند.

Formik یک کتابخانه است که یک جزء <Form/> در خود محصور می کند. این به ما امکان می دهد تا فرم های غنی تری را در React و React Native ایجاد کنیم و به ما امکان دسترسی به ویژگی هایی مانند حالت فرم، مدیریت خطا، اعتبارسنجی و پردازش فرم های ارسالی را بسیار کارآمدتر می دهد.

می‌توانید در GitHub من در اینجا به نسخه از پیش ساخته‌شده UserForm با استفاده از Yup، Formik و React (Vite) دسترسی پیدا کنید. به سادگی مخزن GitHub را کلون کنید و دستورالعمل های README.md را دنبال کنید. ‌

 <Formik initialValues={initialValues} validationSchema={userFormSchema} onSubmit={onSubmit} > {({ isValid, dirty, isSubmitting }) => ( <Form> <div className="form-control"> <label htmlFor="firstName">First Name</label> <Field type="text" id="firstName" name="firstName" /> <ErrorMessage name="firstName" component="div" className="error" /> </div> <div className="form-control"> <label htmlFor="surname">Surname</label> <Field type="text" id="surname" name="surname" /> <ErrorMessage name="surname" component="div" className="error" /> </div> <div className="form-control"> <label htmlFor="email">Email</label> <Field type="email" id="email" name="email" /> <ErrorMessage name="email" component="div" className="error" /> </div> <div className="form-control"> <label htmlFor="dob">Date of Birth</label> <Field type="date" id="dob" name="dob" /> <ErrorMessage name="dob" component="div" className="error" /> </div> <button type="submit" disabled={isSubmitting || !isValid}>Submit</button> </Form> )} </Formik>

در این کد، ما از مؤلفه کتابخانه <Formik/> استفاده کرده ایم که در اطراف عنصر استاندارد <Form/> ما قرار می گیرد. ویژگی های زیر را به کامپوننت ارسال می کنیم:

initialValues ​​- اینها مقادیر اولیه مورد نیاز فرم شما هستند (این زمانی است که فرم مقادیر ورودی های شما را نشان می دهد).‌

validationSchema – این احتمالاً مهمترین مورد برای این آموزش است. به خاطر داشته باشید که این یک ویژگی اختیاری است، زیرا برای استفاده از مؤلفه <Formik/> لازم نیست، اما برای هر گونه اعتبارسنجی لازم است. ‌
‌
ما می‌خواهیم userFormSchema خود را که در مرحله قبل ایجاد کرده‌ایم وارد کنیم. این به فرم او میگوید ، هنگام اعتبارسنجی ورودی‌های این فرم از این طرح‌واره‌ها استفاده کنید. ‌

onSubmit – یک تابع ساده برای اجرا با کلیک بر روی دکمه / ارسال فرم. مقادیر فرم به طور خودکار به این تابع منتقل می شود

همچنین می‌توانید فرم را در یک تابع "Render prop" بپیچید تا از برخی از ابزارهای آشکار شده از Formik در فرم خود استفاده کنید. در اینجا می توانید در مورد رندر پروپ بیشتر بیاموزید.

 {({ isValid, isSubmitting }) => (

توجه: اگر نمی خواهید از هیچ یک از ویژگی های زیرین Formik در خود فرم استفاده کنید، این مورد لازم نیست. شما می توانید به سادگی تگ <Form> را حذف کرده و در جای خود قرار دهید. ‌
‌
اما استفاده از این پروپ رندر به شما امکان می‌دهد به آپشن های ی که از مؤلفه Formik در عنصر <Form/> در معرض دید قرار گرفته‌اند دسترسی داشته باشید. می بینید که ما از ویژگی های isValid و isSubmitting برای کنترل وضعیت دکمه ارسال خود استفاده می کنیم.

در ادامه با تجزیه و تحلیل کد:

isValid - یک مقدار بولی که Formik بر اساس نتیجه اعتبارسنجی طرحواره ما کنترل می کند.

isSubmitting - یک پرچم بولی که نشان می دهد آیا فرم در اواسط ارسال است یا خیر. این پرچم زمانی که می خواهید یک دکمه را غیرفعال کنید، برای جلوگیری از کلیک های متعدد به معنی ارسال های متعدد فرم بسیار مفید است.

می‌توانیم از این مقادیر برای کنترل فعال‌سازی دکمه ارسال استفاده کنیم:

 <button type="submit" disabled={isSubmitting || !isValid}>Submit</button>

فیلدهای ورودی

توجه به این نکته مهم است که هنگام استفاده از Formik و Yup، برای اینکه اعتبارسنجی کار کند، نام فیلدهای ورودی باید دقیقاً با کلیدهای طرحواره Yup مطابقت داشته باشد (حساس به حروف کوچک و بزرگ) – در غیر این صورت قوانین اعتبارسنجی ثبت نمی‌شوند.

مثال

 <Field type="email" id="email" name="email" /> <ErrorMessage name="email" component="div" className="error" />

ما تعریف کرده‌ایم که این فیلد برای ورودی ایمیل استفاده می‌شود، و name تطبیق "email" را با تعریف userFormSchema به آن می‌دهیم.

در زیر، مؤلفه <ErrorMessage/> Formik خود را کدگذاری می‌کنیم، و دوباره به نام « ایمیل» ارسال می‌کنیم که با طرح ما مطابقت دارد. با استفاده از ویژگی name می‌توانیم طرحواره‌های ورودی، پیام خطا و اعتبارسنجی را با هم پیوند دهیم.

اگر مشکلی در تأیید فیلد ورودی وجود داشته باشد، پیام خطا هر پیام خطای تعریف شده ای را نشان می دهد - در غیر این صورت به یک پیام پیش فرض باز می گردد، به عنوان مثال " نام یک فیلد ضروری است ". این می تواند کمتر کاربر پسند باشد، پس توصیه می کنم همیشه یک پیام سفارشی ارسال کنید.

همچنین متوجه خواهید شد که وقتی تمرکزمان را از دست می‌دهیم یا هنگام تایپ (بعد از اجرای اولین اعتبارسنجی)، اعتبارسنجی دوباره به‌طور خودکار اجرا می‌شود. شما می توانید این عملکرد را با تنظیم پرچم های validateOnBlur و validateOnChange (درست / نادرست) بازنویسی کنید.

به عنوان مثال، در حالت خطا به این صورت خواهد بود.:

است که وضعیت خطا را نشان می دهد" srcset="https://www.freecodecamp.org/news/content/images/size/w600/2024/06/image-100.png 600w, https://www.freecodecamp.org/news/content/images/size/w1000/2024/06/image-100.png 1000w, https://www.freecodecamp.org/news/content/images/2024/06/image-100.png 1160w" sizes="(min-width: 720px) 720px" width="1160" height="1368" loading="lazy">

هنگامی که مقادیر را برای همه ورودی‌ها وارد کردیم و اعتبار ما به پایان رسید (می‌توانید ببینید که دکمه ارسال اکنون فعال است)، می‌توانیم ارسال کنیم.‌

که وضعیت معتبر را نشان می دهد" width="1200" height="1228" loading="lazy">

اعتبار سنجی و ویژگی های Formik بیشتر

اکنون دیدید که Yup و Formik چقدر می توانند ایجاد فرم را آسان کنند. دارای اعتبار سنجی کامل و حتی رسیدگی به خطا است، به این معنی که شما می توانید یک فرم کاربر پسند کاملاً کارآمد را فقط در چند دقیقه ایجاد کنید.

اما اگر بخواهید اعتبار سنجی پیچیده تری را به فرم بسیار بزرگتر/پیچیده اضافه کنید، چه؟ خوب بیایید به یک مثال نگاه کنیم:

فرض کنید می‌خواهیم تأیید کنیم که تاریخ تولد ارائه شده تضمین می‌کند که کاربر بالای 18 سال سن دارد. همچنین یک فیلد رمز عبور اضافه می‌کنیم که قوانین زیر را دارد:

حداقل 6 حرف

حاوی یک عدد

حاوی یک کاراکتر خاص

الزامات اضافی DoB

ما می‌توانیم این کار را با زنجیر کردن test() به تابع string() شی dob در طرحواره خود انجام دهیم.

تابع test() به ما اجازه می دهد تا در برابر منطق سفارشی تست کنیم. پارامتر dob را در userFormSchema به موارد زیر به روز کنید:

 dob: Yup.string() .required('Date of Birth is required') .test('is-older-than-18', 'You must be at least 18 years old', (value) => { if (!value) return false; // try to parse the value to date const parsedDate = parse(value, 'yyyy-MM-dd', new Date()); if (!isValid(parsedDate)) return false; const today = new Date(); const eighteenYearsAgo = subYears(today, 18); // check if date provided is before or the same as 18 years ago. return parsedDate <= eighteenYearsAgo; })

اکنون هنگام تلاش برای ارسال تاریخی که کمتر از 18 سال پیش است، خطای زیر را دریافت می کنیم. ‌

که فیلد ورودی تاریخ نامعتبر را نشان می‌دهد به دلیل اعتبارسنجی ناموفق تاریخ" width="576" height="244" loading="lazy">

اعتبار سنجی رمز عبور

برای اعتبار سنجی فیلد رمز عبور، می توانیم کاری شبیه به این انجام دهیم:‌

 password: Yup.string() .required('This field is required') .min(6, 'Must be at least 6 characters') .matches(/[!@#$%^&*(),.?":{}|<>]/, 'Must contain at least one special character') .matches(/\d/, 'Must contain at least one number');

در اینجا ما از تابع matches() استفاده می‌کنیم که در یک عبارت معمولی برای ادعا در برابر آن ارسال می‌کنیم. شما می توانید این موارد را در یک عبارت منظم ترکیب کنید، اما مزیت جدا نگه داشتن آنها این است که به شما امکان می دهد مشخص کنید که کدام قانون اعتبار سنجی ناموفق است. همچنین در صورت تغییر قوانین در آینده، پیام خطا و تعمیر و نگهداری بیشتر را امکان پذیر می کند.

سایر روش های مفید:

length() - طول رشته / عدد را بیان می کند

positive() – بیان می کند که نوع عدد یک عدد مثبت است

email() - ادعا می کند که یک آدرس ایمیل معتبر است

url() – ادعا می کند که یک URL معتبر است

min() / max() – بیان می کند که عدد حداقل 'x' و کمتر از 'y' است

ensure() – مقادیر undefined و null به یک رشته خالی به همراه تنظیم default روی یک رشته خالی تبدیل می کند.

نتیجه

همانطور که می بینید، امکانات با Yup بسیار زیاد است. سپس این را با کتابخانه Formik ترکیب کنید، و می توانید فرم های غنی، کارآمد و آسان برای استفاده داشته باشید.

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

مثل همیشه با خیال راحت می توانید این مقاله را در توییتر با من در میان بگذارید و در مورد آن بحث کنید، و فراموش نکنید که برای شنیدن مقالات آینده و نکات برنامه نویس، من را دنبال کنید.

خبرکاو