التحقق من الصحة هو وسيلة ل المصادقة المستخدم. يتم استخدامه في جميع تقنيات الويب مثل و . ولكن سيكون تركيزنا اليوم على التحقق من الصحة في Angular JS بالترتيب التالي:
ما هو التحقق من صحة النموذج؟
التحقق من صحة النموذج هو تقنية يمكننا من خلالها التحقق من صحة نموذج HTML. لنأخذ مثالًا بسيطًا لنفترض أن المستخدم لديه نموذج HTML وأن نموذج HTML يحتوي على حقول مختلفة ، ويتم التحقق من صحة هذا الحقل بواسطة مدقق النموذج عندما نريد التحقق من صحة النموذج الذي نحتاجه فقط للتحقق من قيمة الحقل المحدد باستخدام تعبير المدقق .
إذا كان التعبير العادي وقيمة الحقل متماثلين ، فيمكننا القول إن النموذج قد تم التحقق منه. في نموذج HTML ، توجد أنواع مختلفة من عمليات التحقق مثل البريد الإلكتروني ، والمطلوب ، والحد الأدنى ، والحد الأقصى ، وكلمة المرور ، وما إلى ذلك.
التحقق من صحة النموذج في Angular JS
لنتحدث عن كيفية التحقق من صحة نموذج في الزاوية JS. توفر Angular JS أنواعًا مختلفة من خصائص التحقق من صحة النموذج التي يمكننا استخدامها للتحقق من صحة النموذج أو الحصول على البيانات من النموذج.
$ صالح : تخبر هذه الخاصية ما إذا كان الحقل صالحًا أم لا من خلال تطبيق القاعدة المناسبة على ذلك.
$ غير صالح : كما يقول الاسم غير صالح ، فإن هذه المربعات إذا كان الحقل غير صالح أو لا يعتمد على القاعدة المناسبة في ذلك.
البكر $ : سيعود صحيحًا في حقل إدخال النموذج غير مستخدم.
$ قذرة : سيعود صحيحًا في حقل إدخال النموذج المستخدم.
تطرق $ : منطقي صحيح إذا تم تعتيم الإدخال.
للوصول إلى النموذج: .
للوصول إلى أحد المدخلات: ..
الآن دعنا نشرح التحقق من صحة النموذج في angular JS بمثال لذلك أولاً نقوم بإنشاء ملفين ، أحدهما app.js والآخر index.html. يحتوي ملف index.htm الخاص بنا على نموذج HTML بسيط يحتوي على التحقق الزاوي ويحتوي ملف app.js الخاص بنا على كود الواجهة الخلفية للتعامل مع التحقق من صحة النموذج على صفحة index.html.
الindex.htmlمحتويات الصفحة مع شكلنوفاليداتالملكية وماذا يعني ذلك بالضبط؟
تخبر خاصية novalidate في علامة النموذج HTML أنه يمكننا استخدام التحقق من صحة النموذج المخصص. إذا لم نعطِ خاصية novalidate ، فسيتم التحقق من صحة نموذج HTML باستخدام خصائص HTML5 الافتراضية للتحقق من صحة النموذج.
خطوات التحقق من صحة النموذج
في نموذجنا ، أنشأنا 6 حقول في نموذجنا ، وهي الاسم الأول واسم العائلة والبريد الإلكتروني والهاتف وكلمة المرور والرسالة.
أولاً ، نضيف أداة التحقق من صحة الحقول المطلوبة ، ويخبر هذا المدقق المستخدمين أن هناك حاجة إلى حقل معين.
التالي هو حقل البريد الإلكتروني إذا لم يقدم المستخدم أي بريد إلكتروني صالح ، ثم يقوم مدقق البريد الإلكتروني لدينا بإلقاء خطأ في التحقق من صحة البريد الإلكتروني.
لقد قمنا بتعيين الحد الأدنى والحد الأقصى للطول في التحقق من صحة كلمة المرور ، والحد الأدنى للطول هو 5 والحد الأقصى للطول هو 8 حتى يتمكن المستخدم من إعطاء كلمة مرور صالحة بين 5 إلى 8 أحرف.
أخيرًا ، قمنا بتعيين الهاتف وحقول الرسالة المطلوبة وعلى وجه التحديد ، قم بتطبيق التحقق من صحة الرقم على الهاتف المودع.
رمز التحقق من صحة النموذج في Angular JS
index.html
مثال على النطاق الزاوي الاسم الأول
هذا الحقل مطلوب
الكنية
هذا الحقل مطلوب
البريد الإلكتروني
هذا الحقل مطلوب
ليس بريدًا إلكترونيًا صالحًا
هاتف
هذا الحقل مطلوب
هذا ليس رقم هاتف صالح
كلمه السر
هذا الحقل مطلوب
كلمة مرور بين 5 إلى 8 أحرف
رسالة
هذا الحقل مطلوب
إرسال
app.js
var app = angular.module ('ngValidApp'، []) app.controller ('ngValidController'، function ($ range) {})لنتحدث عن بعض توجيهات التحقق المستخدمة في النموذج:
- نانوغرام مطلوب : لتوفير المجال المطلوب
- نانوغرام المعرض : لإظهار رسالة الخطأ بناءً على الحالة (تحقق من خصائص التحقق)
- من minlength : لتوفير الحد الأدنى من الطول
- نانوغرام ماكسلينج : لتوفير أقصى طول
- من النمط : لتتناسب مع نمط معين
- نانوغرام نموذج : يربط الحقل بخصائص التحقق مثل $ error و $ valid وما إلى ذلك.
بهذا نصل إلى نهاية مقالة التحقق من صحة Angular JS. آمل أن تكون قد فهمت الأشياء المختلفة التي يجب مراعاتها للتحقق من صحة النموذج في Angular JS.
إذا كنت ترغب في معرفة المزيد عن إطار العمل Angular ، فراجع موقعنا الذي يأتي مع تدريب مباشر بقيادة مدرب وخبرة مشروع واقعية. سيساعدك هذا التدريب على فهم Angular بعمق ويساعدك على تحقيق إتقان الموضوع.
لديك سؤال لنا؟ يرجى ذكر ذلك في قسم التعليقات في هذه المقالة وسنعاود الاتصال بك.
وظيفة الانقسام في مثال جافا