يمكن 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 الطبقات المغلق لأشكال وحقول الإدخال اعتمادا على دولهم.
وأضاف الفئات التالية، أو إزالتها من، حقول الإدخال:
-
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 .
يبقى الميدان صحيحا إلا إذا كانت قيمة تحتوي على الحرف "ه":
<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 .
في جافا سكريبت نبدأ بإضافة توجيه جديد اسمه myDirective .
تذكر، عند تسمية التوجيه، يجب عليك استخدام اسم قضية الجمل، myDirective ، ولكن عندما تتذرع بها، يجب عليك استخدام - اسم فصل، my-directive .
ثم، والعودة كائن حيث يمكنك تحديد أن نطلب ngModel ، وهو ngModelController.
جعل وظيفة الربط الذي يحتاج إلى بعض الحجج، حيث الوسيطة الرابعة، mCtrl ، هو ngModelController ،
ثم حدد وظيفة، في هذه الحالة يدعى myValidation ، والتي تأخذ وسيطة واحدة، هذه الحجة هي قيمة عنصر الإدخال.
اختبار إذا كانت قيمة تحتوي على الحرف "e"، ومجموعة من صلاحية تحكم نموذج إما true أو false .
في الماضي، mCtrl.$parsers.push(myValidation); وإضافة myValidation وظيفة لمجموعة من الوظائف الأخرى، والتي سوف يتم تنفيذها في كل مرة تتغير قيمة المدخلات.
التحقق من صحة مثال
<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/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 السمة شكل لتعطيل التحقق من صحة المتصفح الافتراضي. |
|---|
وأوضح مثال
وAngularJS التوجيه نانوغرام نموذج يربط العناصر والمدخلات للنموذج.
الكائن نموذج لديه خاصيتين: المستخدم والبريد الإلكتروني.
بسبب نغ المعرض، يمتد مع اللون: الأحمر يتم عرض فقط عندما المستخدم أو البريد الإلكتروني هو $ القذرة و$ صالح.