هل سبق لك أن حاولت إرسال نموذج ، فقط لكي تعطيك صفحة الويب رسالة خطأ تخبرك أن واحدًا أو أكثر من الحقول غير صالح؟ إذا كان الأمر كذلك ، فقد واجهت التحقق من صحة النموذج.
غالبًا ما يكون التحقق من الصحة ضروريًا للحصول على بيانات نظيفة وقابلة للاستخدام. من عناوين البريد الإلكتروني إلى التواريخ ، إذا كان يجب أن يكون دقيقًا ، فأنت بحاجة إلى التحقق منه بعناية.
ما هو التحقق من صحة النموذج؟
التحقق من صحة النموذج هو عملية التأكد من أن البيانات التي يدخلها المستخدم في النموذج صحيحة وكاملة. يمكنك القيام بذلك من جانب العميل ، باستخدام ميزات HTML المضمنة مثل السمة المطلوبة. بامكانك ايضا التحقق من صحة على العميل باستخدام JavaScript، وهناك مكتبات Next.js خارجية للمساعدة في تسهيل العملية.
هناك العديد من الأسباب التي تجعل التحقق من صحة النموذج أمرًا ضروريًا. أولاً ، يساعد على التأكد من أن البيانات المدخلة في النموذج كاملة وصحيحة. هذا مهم لأنه يساعد على منع الأخطاء عندما يرسل تطبيقك البيانات إلى خادم أو قاعدة بيانات.
ثانيًا ، يمكن أن يساعد التحقق من صحة النموذج في تحسين قابلية استخدام النموذج من خلال تقديم ملاحظات عندما يقوم المستخدم بإدخال بيانات غير صالحة. يمكن أن يساعد ذلك في تجنب الإحباط والارتباك من جانب المستخدم.
أخيرًا ، يمكن أن يساعد التحقق من صحة النموذج في تحسين أمان النموذج من خلال التأكد من أنه يقدم بيانات صالحة فقط.
كيفية التحقق من صحة النماذج في Next.js
توجد طريقتان للتحقق من صحة النماذج في Next.js: استخدام الطرق المضمنة أو استخدام مكتبات خارجية.
استخدام الطرق المضمنة
يوفر HTML عدة طرق للتحقق من صحة النماذج ، وأكثرها شيوعًا هو مطلوب يصف. هذا يضمن أن الحقل لا يمكن أن يكون فارغًا. يمكنك استخدام هذه الطريقة من تطبيق Next.js ، ببساطة عن طريق تضمين السمة في علامات الإدخال التي تنشئها. يوفر HTML أيضًا ملف نمط يصف. يمكنك استخدام هذا مع ملف تعبير عادي للتحقق من صحة أكثر تعقيدًا.
يتضمن هذا المثال نموذجًا يحتوي على حقلين: الاسم والبريد الإلكتروني. حقل الاسم مطلوب ، ويجب أن يتطابق حقل البريد الإلكتروني مع التعبير العادي.
يستورد تتفاعل من 'تتفاعل'فصلMyFormيمتدتتفاعل.عنصر{
يجعل() {
يعود (
<استمارة >
<ملصق>
اسم:
<نوع الإدخال ="نص" الاسم ="اسم" مطلوب />
</label>
<ملصق>
بريد إلكتروني:
<نوع الإدخال ="بريد إلكتروني" الاسم ="بريد إلكتروني"
نمط ="[a-z0-9 ._٪ + -] + @ [a-z0-9 .-] + \. [a-z] {2،} $" />
</label>
<نوع الإدخال ="يُقدِّم" القيمة ="يُقدِّم" />
</form>
)
}
}
يصدّرتقصير MyForm
تستورد هذه الشفرة مكتبة React ، ثم تنشئ فئة تسمى MyForm وتعرض عنصر نموذج. داخل عنصر النموذج ، يوجد عنصرين تسمية.
يحتوي عنصر التسمية الأول على حقل إدخال نص مطلوب. يحتوي عنصر التسمية الثاني على حقل إدخال بريد إلكتروني مع تعبير عادي في سمة النمط الخاصة به.
أخيرًا ، لديك زر إرسال. عندما يرسل المستخدم النموذج ، تضمن السمة المطلوبة أنه يملأ حقل الاسم. تضمن سمة نمط حقل البريد الإلكتروني أن يكون البريد الإلكتروني بالتنسيق المحدد. إذا فشل أي من هذه الشروط ، فلن يتم إرسال النموذج.
هناك بعض العيوب لاستخدام الأساليب المضمنة. أولاً ، قد يكون من الصعب تتبع جميع قواعد التحقق المختلفة التي أعددتها. ثانيًا ، إذا كان لديك الكثير من الحقول ، فقد يكون من الممل إضافة السمة المطلوبة لكل منها. أخيرًا ، توفر الطرق المضمنة فقط التحقق الأساسي من الصحة. إذا كنت تريد القيام بمزيد من التحقق من الصحة المعقدة ، فستحتاج إلى استخدام مكتبة خارجية.
باستخدام مكتبة خارجية
بالإضافة إلى الأساليب المضمنة ، هناك أيضًا العديد من المكتبات الخارجية التي يمكنك استخدامها للتحقق من صحة النماذج. تتضمن بعض المكتبات الشائعة Formik و React-hook-form و Yup.
لاستخدام مكتبة خارجية ، ستحتاج أولاً إلى تثبيتها. على سبيل المثال ، لتثبيت Formik ، قم بتشغيل الأمر التالي:
npm ثَبَّتَ فورميكبمجرد تثبيت المكتبة ، يمكنك استيرادها إلى المكون الخاص بك واستخدامها للتحقق من صحة النموذج الخاص بك:
يستورد تتفاعل من 'تتفاعل'
يستورد {Formik ، Form ، Field} من "فورميك"مقدار ثابت نموذجي = () => (
<فورميك
القيم الأولية = {{الاسم: ''، بريد إلكتروني: '' }}
تحقق من صحة = {قيم => {
مقدار ثابت الأخطاء = {}
لو (!قيم.اسم) {
error.name = 'مطلوب'
}
لو (!قيم.بريد إلكتروني) {
error.email = 'مطلوب'
} آخرلو (
!/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i.test (قيم البريد الإلكتروني)
) {
error.email = 'عنوان البريد الإلكتروني غير صالح'
}
يعود أخطاء
}}
onSubmit = {(القيم ، {setSubmitting}) => {
setTimeout (() => {
يُحذًِر(جسون.stringify (القيم ، باطل, 2))
تعيين تقديم (خطأ شنيع)
}, 400)
}}
>
{({isSubmitting}) => (
<استمارة>
<نوع الحقل ="نص" الاسم ="اسم" />
<نوع الحقل ="بريد إلكتروني" الاسم ="بريد إلكتروني" />
<نوع الزر ="يُقدِّم" معطل = {isSubmitting}>
يُقدِّم
</button>
</Form>
)}
</Formik>
)
يصدّرتقصير MyForm
هنا ، تقوم أولاً باستيراد ملف فورميك, استمارة، و مجال مكونات من مكتبة Formik. بعد ذلك ، قم بإنشاء مكون يسمى MyForm. يعرض هذا المكون نموذجًا يحتوي على حقلين: الاسم والبريد الإلكتروني.
تعيّن الخاصية initialValues القيم الأولية لحقول النموذج. في هذه الحالة ، يكون كل من حقلي الاسم والبريد الإلكتروني عبارة عن سلاسل فارغة.
تحدد خاصية التحقق قواعد التحقق من صحة حقول النموذج. في هذه الحالة ، يكون حقل الاسم مطلوبًا ، ويجب أن يتطابق حقل البريد الإلكتروني مع التعبير العادي.
تعيّن الخاصية onSubmit الوظيفة التي ستستدعيها React عندما يرسل المستخدم النموذج. في هذه الحالة ، تكون الوظيفة عبارة عن تنبيه يعرض قيم حقول النموذج.
تحدد الخاصية isSubmitting ما إذا كان النموذج قيد الإرسال حاليًا. في هذه الحالة ، قمت بضبطه على خطأ.
أخيرًا ، قم بتصيير النموذج باستخدام مكون النموذج من Formik.
فوائد استخدام المكتبات الخارجية في Next.js
هناك العديد من الفوائد لاستخدام مكتبة خارجية مثل Formik للتحقق من صحة النماذج في Next.js. تتمثل إحدى الفوائد في أنه من الأسهل بكثير عرض رسائل الخطأ للمستخدم. على سبيل المثال ، إذا لم يتم ملء أحد الحقول المطلوبة ، فسيعرض Formik تلقائيًا رسالة خطأ تتضمن إصلاحًا مقترحًا.
فائدة أخرى هي أن Formik يمكنه التعامل مع قواعد تحقق أكثر تعقيدًا. على سبيل المثال ، يمكنك استخدام Formik للتحقق من تطابق حقلين (مثل حقل تأكيد كلمة المرور وكلمة المرور).
أخيرًا ، يسهل Formik إرسال بيانات النموذج إلى الخادم. على سبيل المثال ، يمكنك استخدام Formik لإرسال بيانات النموذج إلى API.
زيادة تفاعل المستخدم باستخدام النماذج
يمكنك استخدام النماذج لزيادة مشاركة المستخدم. من خلال تقديم ملاحظات عندما يقوم المستخدم بإدخال بيانات غير صالحة ، يمكنك المساعدة في تجنب الإحباط والارتباك.
باستخدام المكتبات الخارجية ، يمكنك إضافة ميزات مثل الإكمال التلقائي والحقول الشرطية. يمكن أن يساعد ذلك في جعل النماذج الخاصة بك أكثر سهولة في الاستخدام. عند استخدامها بشكل صحيح ، يمكن أن تكون النماذج أداة قوية لمساعدتك على زيادة مشاركة المستخدم وجمع البيانات التي تحتاجها.
إلى جانب التحقق من الصحة ، يحتوي Next.js على العديد من الميزات التي يمكنك استخدامها لزيادة مشاركة المستخدم.
