آموزش انگولار

اعتبارسنجی فرم ها با آنگولار – AngularJS Form Validation

AngularJS می تواند داده های ورودی را تایید کند.

اعتبار سنجی فرم – Form Validation

AngularJS اعتبار سنجی client-side یا سمت سرویس گیرنده را ارائه می دهد.

AngularJS وضعیت حالت فرم و ورودی input, textarea, select) را نظارت می کند و به شما اجازه می دهد تا کاربر را در مورد وضعیت فعلی مطلع کنید.

AngularJS همچنین اطلاعاتی در مورد اینکه آیا آنها لمس شده اند یا اصلاح شده اند یا نه.

شما می توانید از ویژگی های استاندارد HTML5 برای تأیید ورودی استفاده کنید یا می توانید توابع اعتبار سنجی خود را ایجاد کنید.

اعتبار سنجی سمت سرویس گیرنده client-side تنها نمی تواند ورودی کاربر را حفظ کند. تأیید صحت سرور نیز ضروری است.

 

Required

از ویژگی Required ت HTML5  برای مشخص کردن فیلد ورودی باید پر کنید.

 

E-mail

از  Email-type نوع ایمیل HTML5 برای مشخص کردن مقدار باید یک پست الکترونیکی استفاده کنید:

Form State و Input State

فیلدهای ورودی input fileds دارای وضعیت های زیر می باشند.

  • $untouched : فیلد ها هنوز لمس نشده اند
  • $touched :فیلدها لمس شده اند
  • $pristine : فیلد ها هنوز تغییر نکرده اند
  • $dirty : فیلد ها تغییر کرده اند
  • $invalid : محتوا هنوز تایید نشده است.
  • $valid:محتوا تایید شده است.

آنها تمامی مشخصات فیلد input می باشند و ممکن است true یا false باشند.

فرم ها دارای وضعیت های زیر نیز می باشند:

  • $pristine:هیچ فیلدی هنوز تغییر نکرده است.
  • $dirty: یک فیلد یا بیشتر تغییر کرده است.
  • invalid: محتوای کانال تایید نشده است.
  • $valid: محتوای کانال تایید شده است.
  • submitted :فرم ارسال شده است.

آنها تمامی مشخات فرم می باشند و می توانند true یا false باشند.

شما می توانید از این حالت ها برای نشان دادن پیام های معنی دار به کاربر استفاده کنید. به عنوان مثال، اگر فیلد مورد نیاز است و کاربر آن را خالی بگذارد، باید یک هشدار را به کاربر بدهید:

مثال:

هشدار خطا نمایش داده می شود اگر فیلد لمس شود و خالی باشد ( یعنی چیزی در آن ننویسید)

CSS Classes

AngularJS کلاس های CSS را به فرم ها و زمینه های ورودی اضافه می کند بسته به وضعیت آنها.
کلاس های زیر به فیلدهای ورودی اضافه شده یا حذف می شوند:

  • ng-untouched : فیلد ها هنوز انتخاب نشده اند
  • ng-touched : فیلدها انتخاب شده اند.
  • ng-pristine: فیلدها هنوز تغییر نکرده اند.
  • ng-dirty: قیلد ها تغییر کرده اند.
  • ng-valid: محتوای فیلد معتبر است.
  • ng-unvalid : محتوای فیلد معتبر نمی باشد.
  • ng-valid-key : یک key برای هر اعتبارسنجی validation.
  • ng-valid-required :زمانی مناسب است که چیزهای زیادی برای اعتبارسنجی نیاز باشد.
  • ng-invalid-key :مثال : ng-invalid-required

کلاس های زیر به فرم ها اضافه می شود یا از فرم ها حذف می شوند:

  • ng-untouched : فیلد ها هنوز انتخاب نشده اند
  • ng-touched : فیلدها انتخاب شده اند.
  • ng-pristine: فیلدها هنوز تغییر نکرده اند.
  • ng-dirty: قیلد ها تغییر کرده اند.
  • ng-valid: محتوای فیلد معتبر است.
  • ng-unvalid : محتوای فیلد معتبر نمی باشد.
  • ng-valid-key : یک key برای هر اعتبارسنجی validation.
  • ng-valid-required :زمانی مناسب است که چیزهای زیادی برای اعتبارسنجی نیاز باشد.
  • ng-invalid-key :مثال : ng-invalid-required

اگر مقدار false باشد کلاس ها از فرم حذف می شوند.

اضافه کردن style برای این کلاس ها به درخواست خود را رابط کاربری بهتر و بصری تر.

مثال:

Custom Validation – اعتبارسنجی سفارشی

برای ایجاد تابع اعتبار سنجی خود کمی پیچیده تر است. شما باید یک دستور جدید را به برنامه خود اضافه کنید و با اعتبار سنجی درون یک تابع با آرگومان مشخص  معامله کنید.

دستور خود را ایجاد کنید، حاوی یک تابع اعتبار سنجی سفارشی، و با استفاده از my-directive مراجعه کنید.

فیلد معتبر خواهد بود اگر مقدار شامل کاراکتر”e” باشد:

توضیح مثال:

در HTML، دستور جدید با استفاده از attribute my-directive به آن اشاره خواهد شد.

در جاوا اسکریپت ما با اضافه کردن یک directive جدید به نام myDirective شروع می کنیم.

به خاطر داشته باشید هنگام نامگذاری یک دستور، شما باید نام camel case  یا حرف اول کوچک و حرف دوم بزرگ، myDirective را استفاده کنید، اما هنگام فراخوانی، باید از نام جدا شده، دستور من استفاده کنید.

سپس، جایی که شما مشخص می کنید، ما نیاز داریم ngModel، که ngModelController است، نیاز داریم.

یک تابع پیوند ایجاد می کند که برخی از آرگومان ها را در بر می گیرد، جایی که آرگومان چهارم، mCtrl، ngModelController است

سپس یک تابع را مشخص می کنیم، در این مورد به نام myValidation، که یک آرگومان را می گیرد، این آرگومان value عنصر input است.

تست اگر value حاوی حرف “e” باشد و اعتبار کنترل کننده model را true یا false تنظیم می کند

در نهایت، mCtrl $ parsers.push (myValidation)؛ تابع myValidation را به آرایه ای از توابع دیگر اضافه می کند که هر بار مقدار ورودی تغییر می کند اجرا می شود.

مثال:

فرم HTML فرم attribute novalidate برای غیر فعال کردن اعتبار سنجی مرورگر پیش فرض استفاده می شود.

مثال توضیح داده شده

دستور AngularJS “ng-model” عناصر ورودی را به مدل متصل می کند.

شیء model دارای دو ویژگی است: user یا email.

به دلیل “ng-show”، طولی با رنگ: قرمز نمایش داده می شود تنها زمانی که user یا ایمیل dirty$و $invalid است.

برچسب ها

نوشته های مشابه

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

بستن