اعتبارسنجی (Validation)
اینجا «اعتبارسنجی فرم AngularJS» را یاد می گیریم. اعتبارسنجی (Validation) یعنی بررسیِ درست بودن ورودی؛ مثل تصحیح برگه امتحان. سپس با حالت های فرم پیام درست نشان می دهیم.
اعتبارسنجی سمت کاربر با HTML5 و AngularJS
AngularJS وضعیت ورودی ها را رصد می کند. بنابراین سریع هشدار می دهیم. همچنین می توانیم از ویژگی های HTML5 مثل required و type="email" کمک بگیریم.
اجباری بودن فیلد (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>
اعتبارسنجی ایمیل (type="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 پرچم هایی مثل $touched، $dirty، $valid دارد. بنابراین طبق وضعیت، پیام مناسب نمایش بده.
<input name="myName" ng-model="myName" required>
<span ng-show="myForm.myName.$touched && myForm.myName.$invalid">The name is required.</span>
کلاس های CSS خودکار
AngularJS کلاس هایی مثل ng-valid و ng-invalid اضافه می کند. بنابراین با CSS بازخورد بده.
<style>
input.ng-invalid {
background-color: pink;
}
input.ng-valid {
background-color: lightgreen;
}
</style>
فرم ها نیز با کلاس های ng-pristine و ng-dirty استایل می گیرند.
<style>
form.ng-pristine {
background-color: lightblue;
}
form.ng-dirty {
background-color: pink;
}
</style>
اعتبارسنجی سفارشی با دایرکتیو
می توانیم دایرکتیو بسازیم. سپس منطق خودمان را روی مقدار ورودی اعمال کنیم.
<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>
نمونه کامل اعتبارسنجی فرم AngularJS
در این نمونه، فیلدها $dirty و نامعتبر که شدند، پیام خطا می بینی. دکمه ارسال هم غیرفعال می شود.
<!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 = 'john.doe@gmail.com';
});
<\/script>
<\/body>
<\/html>
گام های عملی
- برای هر ورودی، name بگذار.
- ng-model را تنظیم کن.
- ویژگی های HTML5 مثل required را بیفزا.
- بر اساس $touched و $invalid پیام بده.
نکته: برای مرور کلی فرم ها به فرم ها در AngularJS برو. برای ادامه «اعتبارسنجی فرم AngularJS» نمونه های بیشتر را در AngularJS API ببین.
جمع بندی سریع
- اعتبارسنجی سمت کاربر سریع است.
- همیشه سرور را هم بررسی کن.
- از کلاس های CSS آماده استفاده کن.
- دایرکتیو سفارشی، انعطاف می دهد.