با عرض سلام و وقت بخیر خدمت کاربران سایت پی وی لرن . و کاربرانی که دوره کامل آموزش AngularJS را دنبال می کنند. این بخش در تکمیل بخش قبلی که با موضوع کار با عناصر فرم ها در AngularJS تدریس شد. ارائه شده است. هدف از ارائه این آموزش، آشنایی با مباحث validation در آنگولار جی اس یا اعتبار سنجی فرم ها در AngularJS ، می باشد.
validation یا اعتبار سنجی فرم ها، در Input ها یا عناصر ورودی فرم ها، کاربرد دارد. و عملکرد آن به این صورت است. که ورودی هایی مانند Email که در فرمت خاصی باید وارد شوند را چک می کند. که در فرمت صحیح خود، از طرف کاربر وارد شود. در ادامه بخش با استفاده کردن از این مبحث در آنگولار آشنا می شوید.
AngularJS قابلیت اعتبار سنجی عناصر Input فرم ها را ارائه می دهد.
AngularJS وضعیت حالت فرم و ورودی (ورودی، متن را انتخاب کنید) را نظارت می کند. و به شما اجازه می دهد تا کاربر را در مورد وضعیت فعلی مطلع کنید.
AngularJS همچنین اطلاعاتی در مورد اینکه آیا آنها ویرایش شده اند یا اصلاح شده اند. یا خیر را ارائه می دهد.
شما می توانید از ویژگی های استاندارد HTML5 برای تأیید ورودی استفاده کنید. یا می توانید توابع اعتبار سنجی خود را در آنگولار ایجاد کنید.
از ویژگی required در html5 می توانید برای مشخص کردن فیلدهایی که باید توسط کاربر پر شوند، استفاده کنید.
1 2 3 4 5 6 | <form name="myForm"> <input name="myInput" ng-model="myInput" required> </form> <p>The input's valid state is:</p> <h1>{{myForm.myInput.$valid}}</h1> |
از ویژگی نوع email نیز می توانید برای اعتبار سنجی فیلدهایی که نیاز به وارد کردن email دارند. استفاده کنید.
1 2 3 4 5 6 | <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 به طور مداوم وضعیت هر دو فرم و فیلد های ورودی را به روز می کند.
فیلدهای Input شامل حالت های زیر است:
$untouched
: فیلد هنوز لمس نشده است.$touched
: فیلد لمس شده است.$ prehistoric
: این فیلد هنوز تغییر نکرده است.$ dirty
: این فیلد اصلاح شده است.$invalid
: محتوای فیلد معتبر نیست.$valid
: محتوای فیلد معتبر است.گزینه های بالا تمام خصوصیات فیلدهای Input است. که مقادیر true
یا false
را می پذیرد.
فرم ها دارای حالت های زیر است:
$pristine
: فیلدی هنوز دستکاری نشده است.$dirty
: یک فیلد یا بیشتر تغییر کرده است.$invalid
: محتوای فرم نا معتبر است.$valid
: محتوای فرم معتبر است.$submitted
: محتوای فرم ارسال شده است.گزینه های بالا تمام خصوصیات فرم هاست. که مقادیر true
یا false
را می پذیرد.
شما می توانید از این حالت های فوق، برای نشان دادن پیام های معنی دار به کاربر استفاده کنید. به عنوان مثال، اگر فیلد مورد نیاز است و کاربر آن را خالی بگذارد، باید یک هشدار را به کاربر بدهید:
1 2 | <input name="myName" ng-model="myName" required> <span ng-show="myForm.myName.$touched && myForm.myName.$invalid">The name is required.</span> |
AngularJS کلاس های CSS را به فرم ها و فیلد های ورودی بسته به حالت های آنها اضافه می کند.
کلاس های زیر به فیلدهای ورودی اضافه شده یا حذف می شوند:
ng-untouched
: این فیلد هنوز لمس نشده است.ng-touched
: این فیلد لمس شده است.ng-pristine
: این فیلد هنوز تغییر نکرده است.ng-dirty
: فیلد اصلاح شده است.ng-valid
: محتوای فیلد معتبر است.ng-invalid
: محتویات فیلد معتبر نیست.ng-valid-key
: یک کلید که برای هر اعتبار سنجی به کار می رود. مثال: ng-valid-required،
که برای زمانی که بیش از یک چیز وجود دارد که باید تایید شود.مفید است.کلاس های زیر به فرم ها، اضافه شده یا حذف می شوند:
ng-pristine
: هیچ فیلدی اصلاح نشده است.ng-dirty
: یک یا چند فیلد اصلاح شده است.ng-valid
: محتوای فرم معتبر است.ng-invalid
: محتوای فرم معتبر نیست.ng-valid-key
: یک کلید که برای هر اعتبار سنجی به کار می رود. مثال: ng-valid-required
، که برای زمانی که بیش از یک چیز وجود دارد که باید تایید شود.مفید است.کلاس ها اگر مقدار false
بگیرند، حذف می شوند.
Style ها را برای این کلاس ها، به سلیقه ی خود برای داشتن رابط کاربری بهتر و بصری تر، اضافه کنید.
1 2 3 4 5 6 7 8 | <style> input.ng-invalid { background-color: pink; } input.ng-valid { background-color: lightgreen; } </style> |
فرم ها را نیز می توانید Style کنید.
1 2 3 4 5 6 7 8 | <style> form.ng-pristine { background-color: lightblue; } form.ng-dirty { background-color: pink; } </style> |
ایجاد یک تابع اعتبار سنجی جدید کمی پیچیده تر است. شما باید یک دستورالعمل جدید را به برنامه خود اضافه کنید. و با اعتبار سنجی درون یک تابع با آرگومان های مشخص، مقادیر را مبادله کنید:
مثال:
دستورالعمل خود را که حاوی یک تابع اعتبار سنجی سفارشی باشد را ایجاد کنید، و با استفاده از my-directive
از اعتبار سنجی جدید، استفاده کنید.
در این مثال ورودی فیلد، معتبر خواهد بود اگر مقدار شامل حرف”e” باشد:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | <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
درواقع mCtrlngModelController
است
سپس یک تابع را با نام myValidation
مشخص می کنیم. که یک آرگومان را می گیرد، این آرگومان ارزش عنصر ورودی است.
تست به این صورت است که اگر مقدار حاوی حرف “e” باشد. اعتبار سنجی درست یا غلط بودن را مشخص می کند.
در نهایت، (mCtrl $ parsers.push (myValidation
تابع myValidation
را به آرایه ای از توابع دیگر اضافه می کند. که هر بار مقدار ورودی تغییر می کند اجرا می شود.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 | <!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> |
تشریح مثال فوق:
دستور ng-directive
عناصر ورودی را به مدل متصل می کند.
شیء مدل دارای دو ویژگی است: user (کاربر) و email (ایمیل).
به دلیل استفاده از ng-show عناصر span با رنگ قرمز نمایش داده می شود. البته تنها زمانی که user یا email برابر با $dirty یا $invalid باشد.
به منظور اهمیت مبحث اعتبار سنجی عناصر ورودی فرم ها و استفاده ی گسترده ی آن در صفحات وب، در این بخش ما به آموزش موضوع اعتبار سنجی فرم ها در AngularJS ، پرداختیم. تا شما را با مقوله ی اعتبار سنجی فیلد ورودی در آنگولار، آشنا کنیم.