تحقق نموذج AngularJS

يمكن لـ AngularJS التحقق من بيانات المدخلات.

تحقق نموذج

AngularJS توفر التحقق على الجانب客户端 للنماذج.

AngularJS تلاحظ حالة النموذج وحقول المدخلات (input، textarea، select) وتسمح لك بإعلام المستخدمين بالحالة الحالية.

AngularJS يحتوي أيضًا على معلومات حول ما إذا كانت قد تم لمسها أو تعديلها.

يمكنك استخدام خصائص HTML5 القياسية للتحقق من المدخلات، أو إنشاء دالة التحقق الخاصة بك.

التحقق على الجانب客户端 لا يمكن حماية المدخلات المستخدمة بشكل مستقل. التحقق على الجانب الخادم هو ضروري أيضًا.

مطلوب

استخدام خصائص HTML5 مطلوب يجب ملء الحقل المدخل المحدد:

التحقق المخصّص

هذا الحقل المدخل هو مطلوب:

<form name="myForm">  
  <input name="myInput" ng-model="myInput" required>  
</form>  
<p>حالة الإدخال صالحة هي:</p>  
<h1>{{myForm.myInput.$valid}}</h1>

آزمایش کنید

email

استخدام نوع HTML5 email يجب أن يكون هذا القيمة بريدًا إلكترونيًا:

التحقق المخصّص

هذا الحقل المدخل يجب أن يكون بريدًا إلكترونيًا：

<form name="myForm">  
  <input name="myInput" ng-model="myInput" type="email">  
</form>  
<p>حالة الإدخال صالحة هي:</p>  
<h1>{{myForm.myInput.$valid}}</h1>

آزمایش کنید

حالة النموذج وحالة الإدخال

يحدث AngularJS تحديث مستمر لحالة النموذج وحقل الإدخال.

يكون لدي حقل الإدخال الحالات التالية:

• $untouched لم يتم لمس هذا الحقل بعد
• $touched تم لمس هذا الحقل
• $pristine لم يتم تعديل هذا الحقل بعد
• $dirty تم تعديل هذا الحقل
• $invalid محتوى الحقل غير صالح
• $valid محتوى الحقل صالح

هي جميع خصائص حقل الإدخال، يمكن أن تكون صحيحة أو خطأ.

يكون لدي النموذج الحالات التالية:

• $pristine لم يتم تعديل أي حقل بعد
• $dirty حقل واحد أو أكثر تم تعديله
• $invalid محتوى النموذج غير صالح
• $valid محتوى النموذج صالح
• $subscribed تم تقديم النموذج

هي جميع خصائص النموذج، يمكن أن تكون صحيحة أو خطأ.

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

التحقق المخصّص

إذا كان الحقل قد تم لمسه ويكون فارغًا، فأظهر رسالة خطأ:

<input name="myName" ng-model="myName" required>  
<span ng-show="myForm.myName.$touched && myForm.myName.$invalid">اسم الملف هو مطلوب.</span>

آزمایش کنید

فئات CSS

يضيف AngularJS فئات CSS إلى النموذج وحقل الإدخال بناءً على حالةهم.

تم إضافة الفئات التالية إلى حقل الإدخال أو إزالتها منه:

• ng-untouched لم يتم لمس هذا الحقل بعد
• ng-touched تم لمس هذا الحقل
• ng-pristine لم يتم تعديل هذا الحقل بعد
• ng-dirty تم تعديل هذا الحقل
• ng-valid محتوى الحقل صالح
• ng-invalid محتوى الحقل غير صالح
• ng-valid-key تحقق من كل مفتاح مرة واحدة. مثالًا:ng-valid-required، يكون مفيدًا جدًا عند وجود عدة محتوى يجب التحقق منها.
• ng-invalid-key مثالًا:ng-invalid-required

تم إضافة الفئات التالية إلى النموذج أو إزالتها منه:

• ng-pristine لم يتم تعديل أي حقل بعد
• ng-dirty تم تعديل حقل واحد أو أكثر
• ng-valid محتوى النموذج صالح
• ng-invalid محتوى النموذج غير صالح
• ng-valid-key تحقق من كل مفتاح مرة واحدة. مثالًا:ng-valid-required، يكون مفيدًا جدًا عند وجود عدة محتوى يجب التحقق منها.
• ng-invalid-key مثالًا:ng-invalid-required

إذا كان القيمة الممثلة للفئة: false، فإن هذه الفئات ستُزال.

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

التحقق المخصّص

استخدام النمط CSS القياسي للتطبيق النمط: