آموزش گام به گام AngularJS قسمت چهارم: اعتبار سنجی ( Validation )

بازدید کنندگان : 1387 دسته بندی برنامه نویسی , برنامه نویسی سمت کلاینت , شروع کار با AngularJS
در مقالات قبلی با AngularJS و Directive و Model و Controller ها آشنا شدیم و نحوه بایند کردن اطلاعات و فیلترکردن 
را کار کردیم ، در این مقاله کمی راجع به اعتبار سنجی ( Validation ) صحبت خواهیم کرد


یک فرم حاوی دو input یکی برای اسم و دیگری برای ایمیل و یک دکمه برای تایید در نظر بگیرید ، میخواهیم این فرم را از نظر 
اطلاعات وارد شده اعتبار سنجی کنیم ، در صورتی که ایمیل با فرمت سازگاری داشت و مقدار نام وارد شده بود دکمه ثبت فعال شود :
<html>

<head>

 

    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>

 

</head>

<body ng-app="">

 

    <form name="myForm" novalidate>

        <p> name : <input type="text" ng-model="name" required />

        <p> email : <input type="email" ng-model="email" required /></p>

 

        <input type="submit" value="Submit" ng-disabled="myForm.$invalid" />

    </form>

</body>

</html> 
در کد فوق ابتدا ng-app تعریف شده است که در جلسه اول صحبت کردیم ، سپس یک فرم با خاصیت novalidate ایجاد کردیم ، دلیل 
اضافه کردن novalidate این است که میخواهیم validation پیشفرض html 5 غیرفعال گردد و اعتبارسنجی توسط خودمان صورت 
بگیرد . 
سپس یک input برای اسم با خاصیت required اضافه کردیم که اجباری بودن این فیلد را مشخص میکند ، در Input دوم که مربوط 
به ایمیل است type را برابر email قرار دادیم تا با فرمت ایمیل چک شود  
در نهایت یک input از نوع submit اضافه کردیم و از ng-disabled برای فعال و غیر فعال کردن دکمه استفاده کردیم ، اگر مقدار 
myForm.$invalid برابر true باشد ( یعنی فرم اعتبار نداشته باشد ) ng-disable برابر true شده و دکمه غیر فعال میگردد ، شما 
میتوانید از ng-hide هم استفاده کنید و دکمه را ناپدید نمایید و فقط در هنگامی که فرم اعتبار داشت نمایش داده شود . 
اکنون اگر بخواهیم جلوی هرفیلد خطا هم نشان داده شود میتوانیم یک span اضافه کرده و از ng-show جهت نمایش پیغام 
اعتبارسنجی استفاده کنیم :
<span ng-show="myForm.name.$invalid ">Please enter name field ...</span>
متن فوق در هنگام لود صفحه تا ورود اطلاعات درست نمایش داده خواهد شد ، اگر بخواهیم کد را به نحوی اصلاح کنیم که فقط زمانی 
که دیتا صحیح نیست اضافه شود از $touched به همراه $invalid استفاده می کنیم :
<span ng-show="myForm.name.$invalid && myForm.name.$touched" > Please enter name field  
...</span> 
وضعیت ( State ) های مختلف یک فیلد عبارت است از : 
 
invalid : اگر دیتای ورودی اعتبار نداشته باشد  
touched : اگر فیلد کلیک یا تغییر کرده باشد 
pristine : اگر فیلد دست نخورده باشد  
dirty : اگر فیلد دست خورده باشد 
valid : اگر دیتای ورودی معتبر باشد 
untouched : اگر فیلد کلیک یا تغییر داده نشده باشد 
 
همچنین AngularJS کلاس های CSS نیز برای اعتبار سنجی قرار داده است که برخی از این کلاس ها عبارتند از :
.ng-valid       {  } 
.ng-invalid     {  } 
.ng-pristine    {  } 
.ng-dirty       {  } 
.ng-touched     {  } 
.ng-invalid-required        {  } 
.ng-invalid-minlength       {  } 
.ng-valid-max-length        {  } 
به عنوان مثال اگر در کد فوق بخواهیم input ها در هنگام دیتای غلط قرمز شوند کافیست کد های css زیر را به head اضافه کنید :
   <style> 
        input.ng-invalid { 
            background-color: pink; 
        } 
 
        input.ng-valid { 
            background-color: lightgreen; 
        } 
    </style> 
نتیجه نهایی به شکل زیر خواهد بود :

  ​

نظرات کاربران