اعتبارسنجی اطلاعات فرم ها در angular

به کمک انگولار می توانید صحت اطلاعات وارد شده در فرم ها را در سمت کاربر بررسی نمایید. انگولار به شما امکان بررسی محتوای کنترل های موجود در صفحه با هر تغییر را می دهد و بنا به وضعیت و مقدار آن می توانید عملیات مورد نیاز را پیاده سازی نمایید.

انگولار قابلیت مدیریت تمامی تگ های HTML5 را دارد و شما می توانید با استفاده از آنها، اعتبارسنجی اطلاعات ورودی را متناسب با نیاز خود انجام دهید.

همچنین با استفاده از انگولار می توان اعتبار سنجی سمت سرور (Server Side) را نیز انجام داد. برای مثال فرض کنید قصد دارید نام کاربری وارد شده را با اطلاعات موجود در پایگاه داده بررسی کنید و در صورت تکراری بودن آن، پیغام خطا به کاربر نمایش دهید. این نوع اعتبارسنجی، اعتبار سنجی سمت سرور نامیده می شود.

الزامی بودن یک فیلد

در آموزش HTML نحوه الزامی بودن یک فیلد توسط خاصیت required توضیح داده شد. به وسیله انگولار می توانید متن خطا را در محل مورد نظر نمایش دهید. به مثال زیر توجه کنید:

<!DOCTYPE html>
<html>
  <head>
    <title>Beno Academy | Angular Tutorial</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
  </head>
  <body ng-app="">
    <p>ورود اطلاعات</p>

    <form name="myForm">
      <input name="myInput" ng-model="myInput" required />
    </form>

    <p>پیغام :</p>
    <p>{{myForm.myInput.$valid}}</p>
  </body>
</html>

در این مثال تا زمانیکه اطلاعاتی درون input وارد نشده باشد، پیغام false و به محض ورود اطلاعات، پیغام true نمایش داده می شود.

نکته: برخلاف تمرین های قبلی، خاصیت ng-app مقدار دهی نشده است. علت این موضوع آن است که در این مثال، با استفاده از دستورات برنامه نویسی قصد مدیریت اطلاعات را نداشته ایم.

اعتبارسنجی ایمیل

یکی دیگر از موارد مهم در فرم های اینترنتی، صحت ورود ایمیل می باشد زیرا بسیاری از سایت ها برای ثبت نام و ورود به سایت، ایمیل را ملاک کار خود قرار می دهند. در صورتیکه قصد داشته باشید ایمیل وارد شده را از نظر ساختاری بررسی نمایید، می توانید به شکل زیر عمل کنید.

<!DOCTYPE html>
<html>
  <head>
    <title>Beno Academy | Angular Tutorial</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
  </head>
  <body ng-app="">
    <p>وارد کردن ایمیل</p>

    <form name="myForm">
      <input type="email" name="myInput" ng-model="myInput" />
    </form>

    <p>پیغام:</p>
    <p>{{myForm.myInput.$valid}}</p>
  </body>
</html>

در این مثال، تا زمانیکه کاربر ایمیل خود را وارد نکرده باشد، پیغام true نمایش داده می شود زیرا الزامی بودن آن ملاک نیست! اما به محض ورود اطلاعات، صحت آن بررسی می شود و تا زمانی که ساختار اطلاعات وارد شده همانند یک ایمیل استاندارد نباشد، پیغام false نمایش داده می شود.