كيفية تنفيذ التحقق من صحة النموذج من جانب العميل باستخدام JavaScript

تعد JavaScript واحدة من أكثر لغات البرمجة شيوعًا وتنوعًا والتي يمكنك البدء بها اليوم. يُقال بحق أن لغة البرمجة هذه هي لغة الويب وهي ضرورية لإضافة التفاعل إلى مواقع الويب الخاصة بك.

يعد عنصر النموذج أحد أكثر عناصر HTML استخدامًا على مواقع الويب. تأخذ هذه النماذج مدخلات من المستخدم وتعالجها في المتصفح أو الخادم. ومع ذلك ، من المهم التحقق من صحة هذه المدخلات لمعالجة مشكلات الأمان والأخطاء غير المرغوب فيها.

---

---

فهم التلاعب في DOM

قبل أن نبدأ في تنفيذ التحقق من صحة النموذج من جانب العميل باستخدام JavaScript ، من الضروري فهم نموذج كائن المستند ، المعروف باسم 'DOM'. DOM هو واجهة برمجة تطبيقات قياسية تسمح لـ JavaScript بالتفاعل مع العناصر الموجودة على صفحة ويب HTML.

تعرف على المزيد: البطل الخفي للمواقع: فهم DOM

لإضافة مستمعين للأحداث واسترداد مدخلات المستخدم ، ستحتاج إلى فهم أساسيات معالجة DOM. إليك مثال يوضح كيف يمكنك تغيير محتويات صفحة الويب باستخدام واجهة برمجة تطبيقات DOM وجافا سكريبت:







Document





const paragraph = document.getElementById('parapgraph');
paragraph.innerText = 'This is a paragraph tag';



في الكود أعلاه ، فإن ملف

العلامة لها معرف فقرة . أثناء كتابة كود JavaScript ، يمكنك الوصول إلى هذا العنصر عن طريق استدعاء document.getElementById ('فقرة') الطريقة والتلاعب بقيمته.

الآن بعد أن فهمت أساسيات معالجة DOM ، دعنا نمضي قدمًا وننفذ التحقق من صحة النموذج.

---

---

التحقق من صحة النموذج باستخدام JavaScript

هناك أنواع مختلفة من المدخلات التي يمكنك أن تأخذها من المستخدم. يعد نوع النص ونوع البريد الإلكتروني ونوع كلمة المرور وأزرار الاختيار ومربعات الاختيار من أكثر الأشياء شيوعًا التي قد تواجهها. نظرًا لهذه الغالبية العظمى من أنواع الإدخال ، ستحتاج إلى استخدام منطق مختلف للتحقق من صحة كل منها.

قبل الخوض في عملية التحقق ، دعنا نتوقف لحظة لفهم نماذج HTML وأهميتها. نماذج HTML هي إحدى الطرق الأساسية التي تتفاعل بها مع موقع الويب لأنها تسمح لك بإدخال بياناتك ، وتطبيق التغييرات ، واستدعاء النوافذ المنبثقة ، وإرسال المعلومات إلى الخادم ، والمزيد.

---

---

كيف تحصل على الكرمة على رديت

HTML عنصر يستخدم لإنشاء هذه النماذج التي تواجه المستخدم. فيما يلي كيفية التحقق من صحة مدخلات نموذج HTML:

1. التحقق من صحة البريد الإلكتروني

سواء كنت تقوم ببناء نظام مصادقة أو تقوم فقط بجمع رسائل البريد الإلكتروني الخاصة بالمستخدمين للرسائل الإخبارية الخاصة بك ، فمن المهم التحقق من صحة البريد الإلكتروني قبل أن تتمكن من تخزينه في قاعدة البيانات الخاصة بك أو معالجته. للتحقق مما إذا كان البريد الإلكتروني يفي بجميع الشروط المطلوبة ، يمكنك استخدام ملف تعبير عادي .

لغة البرمجة:

جافا سكريبت:

const emailInput = document.getElementById('email');
const emailRegex = /^[a-zA-Z0-9.!#$%&'*+/=?^_`~-]+@[a-zA-Z0-9-]+(?:.[a-zA-Z0-9-]+)*$/;
if (!emailInput.value.match(emailRegex)) {
alert('Invalid email address.');
}

2. التحقق من صحة كلمة المرور

تعد كلمات المرور جزءًا مهمًا من البيانات التي تحتاج إلى نوع خاص من التحقق من الصحة لضمان أمانها. ضع في اعتبارك نموذج تسجيل يحتوي على حقلين: حقلي كلمة المرور وتأكيد كلمة المرور. للتحقق من صحة هذه المدخلات ، إليك بعض الأشياء التي ستحتاج إلى وضعها في الاعتبار:

• يجب أن تكون كلمة المرور أكثر من 6 أحرف.
• يجب أن تكون قيمة كلمة المرور وحقل تأكيد كلمة المرور متطابقتين.

لغة البرمجة:




جافا سكريبت:

const password = document.getElementById('password').value;
const confirmPassword = document.getElementById('confirm-password').value;
if (password.value !== confirmPassword.value) {
alert('Entered passwords do not match');
}
if (password.length <6) {
alert('Password must be more than 6 characters long')
}

3. التحقق من صحة إدخال الراديو

يعد إدخال راديو HTML نوعًا خاصًا من عنصر التحكم الرسومي الذي يسمح للمستخدم باختيار واحد فقط من مجموعة محددة مسبقًا من الخيارات الحصرية المتبادلة. من حالات الاستخدام الشائع لمثل هذه المدخلات اختيار الجنس. للتحقق من صحة هذا الإدخال ، ستحتاج إلى التحقق مما إذا تم تحديد واحد منهم على الأقل.

يمكن تحقيق ذلك باستخدام العوامل المنطقية مثل و ( && ) و لا ( ! ) عامل بهذه الطريقة:

لغة البرمجة:

Male

Female

Others


جافا سكريبت:

const genders = document.getElementsByName('gender');
const validForm = false;
let i = 0;
while (!validForm && i if (radios[i].checked) validForm = true;
i++;
}
if (!validForm) alert('Must check some option!');

4. حدد التحقق من صحة الإدخال

ال يستخدم عنصر HTML لإنشاء قائمة منسدلة. ال العلامات داخل عنصر يحدد الخيارات المتاحة في القائمة المنسدلة. كل من هذه العلامات لها سمة قيمة مرتبطة بها.

ما هو النوتش على الهاتف

بالنسبة للخيار الافتراضي أو الأولي ، يمكنك تعيين قيمته لتكون سلسلة فارغة بحيث يتم اعتبارها كخيار غير صالح. بالنسبة لجميع الخيارات الأخرى ، قم بتعيين سمة قيمة مناسبة. فيما يلي مثال على كيفية التحقق من صحة ملف عنصر الإدخال:

لغة البرمجة:


Select One
Mr
Mrs
Ms


جافا سكريبت:

ماذا يعني tbh بالعامية

const title = document.getElementById('title');
if (title.value = '') {
alert('Please select a title');
}

5. التحقق من صحة خانة الاختيار

يتم عرض عناصر الإدخال الخاصة بمربع اختيار النوع افتراضيًا كمربعات يتم تحديدها أو تحديدها عند التنشيط. يتيح لك مربع الاختيار تحديد قيم فردية لتقديمها في نموذج. تعد مربعات الاختيار اختيارًا شائعًا لإدخال 'قبول الشروط والأحكام'.

لمعرفة ما إذا تم تحديد خانة الاختيار أم لا ، يمكنك الوصول إلى السمة المحددة في إدخال خانة الاختيار. هذا مثال:

لغة البرمجة:


I agree to the terms and conditions

جافا سكريبت:

const terms = document.getElementById('terms');
if (!terms.checked) {
alert('Please agree to the terms and conditions to proceed further.');
}


الوقاية خير من العلاج

يوصى دائمًا بالتحقق من صحة جميع المدخلات التي تتلقاها من الزائر لتوفير تجربة آمنة ومأمونة. يحاول المتسللون دائمًا إدخال بيانات ضارة في حقول الإدخال لأداء هجمات البرمجة النصية عبر المواقع وحقن SQL.

الآن بعد أن فهمت كيفية التحقق من صحة مدخلات HTML ، فلماذا لا تجربها من خلال بناء نموذج وتنفيذ الاستراتيجيات التي رأيتها أعلاه؟

يشارك يشارك سقسقة بريد الالكتروني كيفية إنشاء نموذج بتنسيق HTML

اسمح للمستخدمين بإدخال البيانات على مواقع الويب الخاصة بك باستخدام نماذج HTML.

اقرأ التالي مواضيع ذات صلة

• برمجة
• لغة البرمجة
• جافا سكريبت
• تطوير الشبكة
• دروس الترميز

نبذة عن الكاتب نيتين رانجاناث(31 مقالة منشورة)

نيتين هو مطور برمجيات متحمس وطالب هندسة كمبيوتر يطور تطبيقات الويب باستخدام تقنيات جافا سكريبت. يعمل كمطور ويب مستقل ويحب الكتابة لنظام Linux والبرمجة في أوقات فراغه.

المزيد من Nitin Ranganath

اشترك في نشرتنا الإخبارية

انضم إلى النشرة الإخبارية لدينا للحصول على نصائح تقنية ومراجعات وكتب إلكترونية مجانية وصفقات حصرية!

انقر هنا للاشتراك