مقدمه
با عرض سلام و وقت بخیر خدمت کاربران سایت پی وی لرن . و کاربرانی که دوره کامل آموزش AngularJS را دنبال می کنند. این بخش در تکمیل بخش قبلی که با موضوع کار با عناصر فرم ها در AngularJS تدریس شد. ارائه شده است. هدف از ارائه این آموزش، آشنایی با مباحث validation در آنگولار جی اس یا اعتبار سنجی فرم ها در AngularJS ، می باشد.
validation یا اعتبار سنجی فرم ها، در Input ها یا عناصر ورودی فرم ها، کاربرد دارد. و عملکرد آن به این صورت است. که ورودی هایی مانند Email که در فرمت خاصی باید وارد شوند را چک می کند. که در فرمت صحیح خود، از طرف کاربر وارد شود. در ادامه بخش با استفاده کردن از این مبحث در آنگولار آشنا می شوید.
اعتبار سنجی فرم ها در AngularJS
AngularJS قابلیت اعتبار سنجی عناصر Input فرم ها را ارائه می دهد.
AngularJS وضعیت حالت فرم و ورودی (ورودی، متن را انتخاب کنید) را نظارت می کند. و به شما اجازه می دهد تا کاربر را در مورد وضعیت فعلی مطلع کنید.
AngularJS همچنین اطلاعاتی در مورد اینکه آیا آنها ویرایش شده اند یا اصلاح شده اند. یا خیر را ارائه می دهد.
شما می توانید از ویژگی های استاندارد HTML5 برای تأیید ورودی استفاده کنید. یا می توانید توابع اعتبار سنجی خود را در آنگولار ایجاد کنید.
اعتبار سنجی required
از ویژگی required در html5 می توانید برای مشخص کردن فیلدهایی که باید توسط کاربر پر شوند، استفاده کنید.
مثال :
| <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 نیز می توانید برای اعتبار سنجی فیلدهایی که نیاز به وارد کردن 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> |
Form State و Input State
AngularJS به طور مداوم وضعیت هر دو فرم و فیلد های ورودی را به روز می کند.
فیلدهای Input شامل حالت های زیر است:
$untouched : فیلد هنوز لمس نشده است.$touched : فیلد لمس شده است.$ prehistoric : این فیلد هنوز تغییر نکرده است.$ dirty : این فیلد اصلاح شده است.$invalid : محتوای فیلد معتبر نیست.$valid : محتوای فیلد معتبر است.
گزینه های بالا تمام خصوصیات فیلدهای Input است. که مقادیر 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-pristine : هیچ فیلدی اصلاح نشده است.ng-dirty : یک یا چند فیلد اصلاح شده است.ng-valid : محتوای فرم معتبر است.ng-invalid : محتوای فرم معتبر نیست.ng-valid-key : یک کلید که برای هر اعتبار سنجی به کار می رود. مثال: ng-valid-required، که برای زمانی که بیش از یک چیز وجود دارد که باید تایید شود.مفید است.
کلاس ها اگر مقدار false بگیرند، حذف می شوند.
Style ها را برای این کلاس ها، به سلیقه ی خود برای داشتن رابط کاربری بهتر و بصری تر، اضافه کنید.
مثال :
| <style> input.ng-invalid { background-color: pink; } input.ng-valid { background-color: lightgreen; } </style> |
فرم ها را نیز می توانید Style کنید.
مثال :
| <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 ، پرداختیم. تا شما را با مقوله ی اعتبار سنجی فیلد ورودی در آنگولار، آشنا کنیم.
فروشگاه
فیلم های آموزشی
کتاب های آموزشی
مقالات آموزشی
وردپرس
