التحقق من صحة نموذج AngularJS
يمكن لـ AngularJS التحقق من صحة بيانات الإدخال.
التحقق من صحة النموذج
تقدم AngularJS التحقق من صحة النموذج من جانب العميل.
يراقب AngularJS حالة النموذج وحقول الإدخال (الإدخال ، منطقة النص ، التحديد) ، ويتيح لك إخطار المستخدم بالحالة الحالية.
AngularJS يحتفظ أيضًا بمعلومات حول ما إذا كان قد تم لمسها أو تعديلها أم لا.
يمكنك استخدام سمات HTML5 القياسية للتحقق من صحة الإدخال ، أو يمكنك إنشاء وظائف التحقق الخاصة بك.
لا يمكن للتحقق من جانب العميل وحده تأمين مدخلات المستخدم. التحقق من جانب الخادم ضروري أيضًا.
مطلوب
استخدم سمة HTML5 requiredلتحديد وجوب ملء حقل الإدخال:
مثال
حقل الإدخال مطلوب:
<form name="myForm">
<input name="myInput" ng-model="myInput"
required>
</form>
<p>The input's valid state is:</p>
<h1>{{myForm.myInput.$valid}}</h1>
بريد الالكتروني
استخدم نوع HTML5 emailلتحديد أن القيمة يجب أن تكون بريدًا إلكترونيًا:
مثال
يجب أن يكون حقل الإدخال بريدًا إلكترونيًا:
<form name="myForm">
<input name="myInput" ng-model="myInput"
type="email">
</form>
<p>The input's valid state is:</p>
<h1>{{myForm.myInput.$valid}}</h1>
حالة النموذج وحالة الإدخال
تقوم AngularJS باستمرار بتحديث حالة كل من النموذج وحقول الإدخال.
تحتوي حقول الإدخال على الحالات التالية:
$untouchedالحقل لم يتم لمسه بعد$touchedلقد تم لمس الميدان$pristineلم يتم تعديل الحقل بعد$dirtyتم تعديل الحقل$invalidمحتوى الحقل غير صالح$validمحتوى الحقل صالح
كلها خصائص لحقل الإدخال ، وهي إما true
أو false.
النماذج لها الحالات التالية:
$pristineلم يتم تعديل أي حقول حتى الآن$dirtyتم تعديل واحد أو أكثر$invalidمحتوى النموذج غير صالح$validمحتوى النموذج صالح$submittedيتم تقديم النموذج
كلها خصائص النموذج ، إما true
أو false.
يمكنك استخدام هذه الحالات لإظهار رسائل ذات مغزى للمستخدم. على سبيل المثال ، إذا كان الحقل مطلوبًا وتركه المستخدم فارغًا ، فيجب عليك تحذير المستخدم:
مثال
أظهر رسالة خطأ إذا تم لمس الحقل وكان فارغًا:
<input name="myName" ng-model="myName" required>
<span ng-show="myForm.myName.$touched
&& myForm.myName.$invalid">The name is required.</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 القياسي:
<style>
input.ng-invalid {
background-color: pink;
}
input.ng-valid {
background-color: lightgreen;
}
</style>
يمكن أيضًا تصميم النماذج:
مثال
تطبيق الأنماط على النماذج (الأصلية) غير المعدلة ، وللنماذج المعدلة:
<style>
form.ng-pristine {
background-color: lightblue;
}
form.ng-dirty {
background-color: pink;
}
</style>
التحقق المخصص
يعد إنشاء وظيفة التحقق الخاصة بك أمرًا صعبًا بعض الشيء ؛ يجب عليك إضافة توجيه جديد إلى التطبيق الخاص بك ، والتعامل مع التحقق من الصحة داخل دالة باستخدام وسيطات محددة معينة.
مثال
قم بإنشاء التوجيه الخاص بك ، الذي يحتوي على وظيفة التحقق من الصحة المخصصة ، والرجوع إليها باستخدام my-directive.
سيكون الحقل صالحًا فقط إذا كانت القيمة تحتوي على الحرف "e":
<form name="myForm">
<input name="myInput" ng-model="myInput" required
my-directive>
</form>
<script>
var app = angular.module('myApp',
[]);
app.directive('myDirective', function() {
return {
require: 'ngModel',
link: function(scope, element,
attr, mCtrl) {
function myValidation(value)
{
if (value.indexOf("e") > -1)
{
mCtrl.$setValidity('charE',
true);
} else {
mCtrl.$setValidity('charE', false);
}
return value;
}
mCtrl.$parsers.push(myValidation);
}
};
});
</script>
شرح المثال:
في HTML ، سيشار إلى التوجيه الجديد باستخدام السمة
my-directive.
في JavaScript نبدأ بإضافة توجيه جديد باسم myDirective.
تذكر ، عند تسمية التوجيه ، يجب عليك استخدام اسم حالة الجمل
myDirective، ولكن عند استدعائها ، يجب استخدام -اسم منفصل ،
my-directive.
بعد ذلك ، قم بإرجاع الكائن الذي تحدده الذي نطلبه ngModel، وهو ngModelController.
قم بعمل دالة ربط تأخذ بعض الوسيطات ، حيث تكون الوسيطة الرابعة mCtrlهي ngModelController،
ثم حدد وظيفة ، في هذه الحالة تسمى myValidation، والتي تأخذ وسيطة واحدة ، هذه الوسيطة هي قيمة عنصر الإدخال.
اختبر ما إذا كانت القيمة تحتوي على الحرف "e" ، واضبط صلاحية وحدة التحكم في النموذج على إما trueأو false.
أخيرًا ، mCtrl.$parsers.push(myValidation);ستضيف
myValidationالوظيفة إلى مجموعة من الوظائف الأخرى ، والتي سيتم تنفيذها في كل مرة تتغير فيها قيمة الإدخال.
مثال التحقق
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>
<h2>Validation Example</h2>
<form ng-app="myApp"
ng-controller="validateCtrl"
name="myForm" novalidate>
<p>Username:<br>
<input type="text" name="user" ng-model="user"
required>
<span style="color:red" ng-show="myForm.user.$dirty &&
myForm.user.$invalid">
<span ng-show="myForm.user.$error.required">Username
is required.</span>
</span>
</p>
<p>Email:<br>
<input type="email" name="email" ng-model="email" required>
<span
style="color:red" ng-show="myForm.email.$dirty && myForm.email.$invalid">
<span ng-show="myForm.email.$error.required">Email is required.</span>
<span ng-show="myForm.email.$error.email">Invalid email address.</span>
</span>
</p>
<p>
<input type="submit"
ng-disabled="myForm.user.$dirty && myForm.user.$invalid ||
myForm.email.$dirty && myForm.email.$invalid">
</p>
</form>
<script>
var app = angular.module('myApp', []);
app.controller('validateCtrl',
function($scope) {
$scope.user = 'John Doe';
$scope.email = '[email protected]';
});
</script>
</body>
</html>
يتم استخدام سمة نموذج HTML novalidate لتعطيل التحقق الافتراضي من المستعرض.
شرح المثال
يربط نموذج ng التوجيهي AngularJS عناصر الإدخال بالنموذج.
كائن النموذج له خاصيتان: المستخدم والبريد الإلكتروني .
بسبب ng-show ، يتم عرض الامتدادات ذات اللون: الأحمر فقط عندما يكون المستخدم أو البريد الإلكتروني متسخًا و $ غير صالح .