يعد التحقق من توفر البيانات في حقل الإدخال مهمة مهمة عند تصميم صفحات الويب. بعد كل شيء ، قد ينسى المستخدم ملء الحقل المطلوب أو تركه فارغا عن قصد. من أجل راحة وأمن الموقع ، من الضروري مراقبة إكمال النموذج ، وفي حالة نقص البيانات ، عرض الرسالة المناسبة للمستخدم.
واحدة من الطرق للتحقق من المدخلات للامتلاء هو استخدام لغة جافا سكريبت. جافا سكريبت يسمح لك لتنفيذ الإجراءات على جانب العميل والتفاعل مع عناصر الصفحة. ستنظر هذه المقالة في كيفية التحقق مما إذا كان الإدخال مليئا بالنص باستخدام شفرة جافا سكريبت البسيطة.
أولا ، تحتاج إلى الوصول إلى عنصر الإدخال في جافا سكريبت. للقيام بذلك ، يمكنك استخدام طريقة جيتليمنتبيد() عن طريق تحديد معرف العنصر كوسيطة. ثم يمكنك الحصول على القيمة التي أدخلها المستخدم في حقل الإدخال باستخدام خاصية القيمة.
- التحقق من ملء المدخلات باستخدام جافا سكريبت
- طرق التحقق من ملء المدخلات من جانب العميل
- نصائح للتحقق من ملء المدخلات
- سؤال وجواب
التحقق من ملء المدخلات باستخدام جافا سكريبت
لضمان التشغيل الصحيح لنماذج الويب ، من الضروري التحقق مما إذا كانت جميع الحقول الضرورية ممتلئة. جافا سكريبت يمكن استخدامها لهذا الغرض.
1. الحصول على القيمة من المدخلات
قبل التحقق من ملء المدخلات ، تحتاج إلى الحصول على قيمتها. يتم استخدام الكود التالي لهذا:
فار إنبوتفالو = وثيقة.جتليمنتبيد ('إنبوتيد').القيمة;
في هذا المثال ، نحصل على القيمة من العنصر مع معرف" إنبوتيد " وتخزينها في المتغير إنبوتفالو.
2. التحقق من وجود قيمة فارغة
للتحقق مما إذا كان حقل الإدخال ممتلئا ، يمكنك استخدام الكود التالي:
إذا (قيمة الإدخال ===") {
// لم يتم ملء الحقل
} آخر {
// يتم ملء الحقل
في }
في هذا المثال ، نقارن القيمة من الإدخال بسلسلة فارغة. إذا كانت القيمة تساوي سلسلة فارغة ، فسيتم اعتبار الحقل فارغا. خلاف ذلك ، يعتبر الحقل مملوءا.
3. إظهار خطأ أو إكمال ناجح
بعد التحقق من ملء الإدخال ، يمكنك تنفيذ الإجراءات المناسبة. على سبيل المثال ، لإظهار رسالة خطأ أو إعلام المستخدم بملء الحقل بشكل صحيح.
يمكنك استخدام التعليمات البرمجية التالية لإظهار الخطأ:
فار خطأ النص = وثيقة.جيتليمنتبيد ('إرورتكست');
نص خاطئ.أسلوب.عرض = 'كتلة';
في هذا المثال ، نحصل على عنصر مع معرف " إرورتكست "وتغيير نمطه عن طريق تعيين خاصية العرض إلى"كتلة". هذا يسمح لك بإظهار نص الخطأ.
وبالمثل ، يمكنك استخدام جافا سكريبت لعرض رسالة إكمال ناجحة.
4. تطبيق الحلول على مدخلات متعددة
إذا كان هناك العديد من حقول الإدخال في النموذج ، فيمكنك تطبيق الحل على كل منها. للقيام بذلك ، يمكنك إنشاء حلقة من شأنها أن تتكرر من خلال جميع العناصر والتحقق وإظهار خطأ/الانتهاء بنجاح لكل واحد منهم.
على سبيل المثال ، يمكننا استخدام حلقة للتكرار من خلال جميع المدخلات مع فئة معينة:
فار المدخلات = وثيقة.الحصول على العناصر اسم الفئة ('فئة الإدخال');
إلى عن على (فار ط = 0; أنا < المدخلات.الطول ؛ أنا {) {
فار الإدخال = المدخلات [أنا].القيمة;
إذا (قيمة الإدخال ===") {
// لم يتم ملء الحقل
} آخر {
// يتم ملء الحقل
في }
}
في هذا المثال ، نحصل على جميع العناصر مع فئة "إنبوتكلاس" وتكرار من خلالهم باستخدام حلقة. لكل عنصر ، نقوم بإجراء فحص الامتلاء والإجراءات المناسبة.
وهكذا ، باستخدام جافا سكريبت ، يمكنك التحقق من ملء المدخلات وتنفيذ الإجراءات المناسبة ، اعتمادا على نتيجة الاختيار.
طرق التحقق من ملء المدخلات من جانب العميل
على جانب العميل ، يمكن استخدام طرق مختلفة للتحقق مما إذا كان حقل الإدخال ممتلئا. هذا يجعل من السهل التحقق من صحة البيانات قبل إرسالها إلى الخادم ، وكذلك تقديم ملاحظات للمستخدم حول صحة ملء النموذج.
فيما يلي بعض الطرق التي يمكن استخدامها للتحقق من ملء الإدخال:
- سطر فارغ: أسهل طريقة للتحقق مما إذا كان حقل الإدخال ممتلئا هي التحقق مما إذا كانت القيمة عبارة عن سلسلة فارغة. للقيام بذلك ، يكفي مقارنة قيمة الحقل بسلسلة فارغة ، على سبيل المثال:
إذا (المدخلات.القيمة ===") {
// الحقل فارغ
} آخر {
// الحقل ليس فارغا
}
- طول السلسلة: هناك طريقة أخرى للتحقق من امتلاء الإدخال وهي التحقق من طول الخط في حقل الإدخال. إذا كان طول الخط أكبر من الصفر ، فسيتم ملء الحقل ، وإذا كان يساوي صفرا ، يكون الحقل فارغا. مثال:
إذا (المدخلات.القيمة.الطول = = = 0) {
// الحقل فارغ
} آخر {
// الحقل ليس فارغا
}
- يحدد أنه يجب ملء حقل الإدخال قبل إرسال النموذج:
- جافا سكريبت "إرسال" الحدث: إذا كان النموذج يحتوي على عدة حقول إدخال ، فيمكنك استخدام حدث "إرسال" جافا سكريبت للتحقق من اكتمالها قبل إرسال النموذج. مثال:
شكل فار = وثيقة.كيريسيليكتور ('شكل');
شكل.أدفنتليستينر ('إرسال' ، وظيفة (الحدث) {
فار المدخلات = وثيقة.كيريسيليكتور ('الإدخال');
إذا (المدخلات.القيمة ===") {
تنبيه ('يجب ملء الحقل');
حدث.منعالافتراضي();
}
});
هذه ليست سوى بعض الطرق الممكنة للتحقق من ملء المدخلات من جانب العميل. اعتمادا على متطلبات المشروع والتكنولوجيا المستخدمة ، يمكنك اختيار الطريقة الأنسب.
نصائح للتحقق من ملء المدخلات
عند تطوير نماذج الويب ، من المهم التأكد من أن المستخدم قد ملأ جميع الحقول الضرورية قبل إرسال البيانات. خلاف ذلك ، هناك خطر تلقي معلومات غير صحيحة أو بيانات غير كاملة.
فيما يلي بعض النصائح للتحقق من ملء الإدخال باستخدام جافا سكريبت:
- يتسبب حقل الإدخال في قيام المتصفح بحظر إرسال النموذج إذا ترك هذا الحقل فارغا.
- التحقق عبر جافا سكريبت: يمكنك أيضا التحقق من ملء المدخلات باستخدام جافا سكريبت. للقيام بذلك ، يمكنك استخدام طرق مختلفة ، مثل التحقق من طول القيمة ، أو استخدام التعبيرات العادية ، أو التحقق من وجود حرف معين.
- إشارة بصرية: لمساعدة المستخدمين على تحديد الحقول الفارغة بسهولة أكبر ، يمكنك تطبيق تأثيرات مرئية مثل تغيير لون الخلفية أو إضافة تسمية إلى الحقول المطلوبة.
من المهم أن تتذكر أن التحقق من ملء معلمات الإدخال يجب ألا يحل محل عمليات الفحص الأكثر تفصيلا ، مثل التحقق من تنسيق بيانات الإدخال أو التحقق من جانب الخادم. ومع ذلك ، ستساعد هذه النصائح في تحسين تجربة المستخدم ومنع إرسال بيانات فارغة أو غير صحيحة.