بررسی اعتبارسنجی (Validation) در فریم ورک AngularJS

بررسی اعتبارسنجی (Validation) در فریم ورک AngularJS

در این پست از وبسایت پرووید، در رابطه با بررسی اعتبارسنجی (Validation) در فریم ورک AngularJS صحبت خواهیم کرد. به ادامه ی مطلب بروید.

در این قسمت از این آموزش قصد داریم کاری را که در قسمت های قبلی شروع کرده ایم، کامل تر کنیم. همان طور که در قسمت های قبلی از این آموزش دیدید، یک فرم در AngularJS ساخته ایم.

بسته ی آموزش ویدئویی ساخت وب اپلیکیشن Full-stack با Angular و ASP.NET Core و EF Core

از شما دعوت می کنیم که از بسته ی آموزش ویدئویی ساخت وب اپلیکیشن Full-stack با Angular و ASP.NET Core و EF Core دیدن کنید.

حال میخواهیم بتوانیم اعتبار سنجی داده ها را در سمت Client پیاده سازی کنیم که پس از این اصطلاحاً به آن Client-side Validation نیز می گوییم.

در AngularJS به Directive های مختلفی برمیخوریم که تماماً کار Validation و یا اعتبار سنجی داده ها را انجام میدهند. جدول زیر این Directive ها را نشان می دهد.

حال اقدام به پیاده سازی Validation در فرم ساخته شده در قسمت های قبل می کنیم.

همان طور که به خاطر دارید این فرم برای دریافت داده های مربوط به یک دانش آموز و یا Student بود. برای داده های وارد شده برای First Name و Last Name و Email اقدام به پیاده سازی Validation می کنیم.

بسته ی آموزش ویدئویی ساخت وب اپلیکیشن Full-stack با Angular 2 و ASP.NET Core

از شما دعوت می کنیم که از بسته ی آموزش ویدئویی ساخت وب اپلیکیشن Full-stack با Angular 2 و ASP.NET Core دیدن کنید.

کد زیر این موضوع را نشان می دهد.

<!DOCTYPE html>
<html>
<head>
    <script src="~/Scripts/angular.js"></script>
</head>
<body ng-app >
    <form name="studentForm" novalidate>
        <label for="firstName">First Name: </label> <br />
            <input type="text" name="firstName" ng-model="student.firstName" ng-required="true" /> 
            <span ng-show="studentForm.firstName.$touched && studentForm.firstName.$error.required">First name is required.</span><br /><br />
            <label for="lastName">Last Name</label><br />
            <input type="text" name="lastName" ng-minlength="3" ng-maxlength="10" ng-model="student.lastName" /> 
            <span ng-show="studentForm.lastName.$touched && studentForm.lastName.$error.minlength">min 3 chars.</span>
            <span ng-show="studentForm.lastName.$touched && studentForm.lastName.$error.maxlength">Max 10 chars.</span><br /><br />
            <label for="dob">Email</label><br />
            <input type="email" id="email" ng-model="student.email" name="email" /> 
            <span ng-show="studentForm.email.$touched && studentForm.email.$error.email">Please enter valid email id.</span><br /><br />
        <input type="submit" value="Submit" />
    </form>
</body>
</html>

حال بیایید به صورت قدم به قدم به بررسی این کد بپردازیم.

  • از Attribute ای به نام novalidate در دستور <form> استفاده می کنیم. این Attribute باعث می شود عملیات Validation پیش فرض مرورگرتان غیر فعال شود.
  • در فرم و دیگر Element های موجود، name را به عنوان یک Attribute مقدار دهی کنید. این کار باعث می شود که بتوانیم به راحتی یک Reference به هر کدام از Element های مورد نظرمان به دست بیاوریم.
  • بر روی Input Element ای که وظیفه دریافت First Name را دارد از ng-required=”true” استفاده می کنیم. همچنین مقدار name را به عنوان یک Attribute با نام مربوط به Property مورد نظر که در Model تعریف شده است و “firstName” نام دارد، تنظیم می کنیم.
  • یک Element از نوع <span> ایجاد می کنیم تا بتوانیم Error Message های مربوط به هرکدام از این Field ها را در زمان رخ دادن یک Validation Error نشان بدهیم.
  • ng-show را به عنوان یک Attribute بر روی <span> تعریف شده در قسمت 4 تنظیم می کنیم. این موضوع با دستور “studentForm.firstName.$touched && studentForm.firstName.$error.required” انجام می شود. اگر کاربر بدون وارد کردن مقداری برای FirstName از Input Field با فشردن دکمه Tab خارج شد، این دستور True بر می گرداند.
  • از ng-minlength و ng-maxlength برای Last Name استفاده می کنیم. همچنین ng-show را با مقدار “studentForm.lastName.$touched && studentForm.lastName.$error.minlength” تنظیم کرده و آن را برای <span> ای که در کنار Last Name قراردارد اضافه می کنیم.
  • یک <span>دیگر برای Validation Message مربوط به maxlength ایجاد می کنیم.
  • مقدار وارد شده برای ایمیل به صورت خودکار توسط input type=email مورد ارزیابی و Validation قرار می گیرد. همچنین یک <span> برای Validation Message مربوط به Email ایجاد می کنیم.

همانطور که در مثال بالا دیدید ما از یک Expression به صورت “studentForm.firstName.$touched && studentForm.firstName.$error.required” برای <span> استفاده کردیم. در این مثال $touched و Property در واقع Error هایی هستند که به صورت Built-in تعریف شده اند و State مربوط به این Input Control ها و Form مورد نظر را بر می گردانند. در رابطه با State Property ها در قسمت زیر بیشتر صحبت خواهیم کرد.

بسته ی آموزش ویدئویی شروع به کار با Angular 2

از شما دعوت می کنیم که از بسته ی آموزش ویدئویی شروع به کار با Angular 2 دیدن کنید.

بررسی State Property ها

AngularJS دارای Property هایی است که مسئولیت آنها برگرداندن State مربوط به Form و Input Control ها است. در واقع State مربوط به یک Form و Input Control ها بر اساس داده هایی که کاربر در آن ها وارد می کنند و Validation Error هایی که رخ می دهند، تغییر می کنند. با استفاده از نام یک Form و یا نام Input Control ها می توانیم به این Property ها دسترسی پیدا کنیم.

برای مثال برای به دست آوردن State و یا همان حالت یک فرم می توانیم از نام آن Form و پس از آن نام Property مورد نظر را در قالب به صورت formName.propertyName استفاده کنیم. به همین ترتیب برای کنترل کردن State مربوط به یک فرم می توانیم از formName.inputFieldName.propertyName استفاده کنیم. جدولی که در قسمت زیر می بینید، تعدادی از State Property های موجود در AngularJS را نشان می دهد.

کدی که در قسمت زیر مشاهده می کنید، مثالی از نحوه استفاده کردن از این State Property ها را نشان می دهد.

<!DOCTYPE html>
<html>
<head>
    <script src="~/Scripts/angular.js"></script>
</head>
<body ng-app>
     <form name="studentForm" novalidate>
        <p>
            First Name Status: <br />
            Pristine: {{studentForm.firstName.$pristine}} <br />
            Touched: {{studentForm.firstName.$touched}}<br />
            Untouched: {{studentForm.firstName.$untouched}}<br />
            Valid: {{studentForm.firstName.$valid}} <br />
            Invalid: {{studentForm.firstName.$invalid}} <br />
            Dirty: {{studentForm.firstName.$dirty}} <br />
            Error: {{studentForm.firstName.$error}} <br />
        
        </p>
            <label for="firstName">First Name: </label> <br />
            <input type="text" name="firstName" ng-model="student.firstName" ng-required="true" />
            <span ng-show="studentForm.firstName.$touched && studentForm.firstName.$error.required">First name is required.</span><br /><br />
            <label for="lastName">Last Name</label><br />
            <input type="text" name="lastName" ng-minlength="3" ng-maxlength="10" ng-model="student.lastName" /> <br />
            <span ng-show="studentForm.lastName.$error.minlength">min 3 chars.</span>
            <span ng-show="studentForm.lastName.$error.maxlength">Max 10 chars.</span> <br />
        
        <input type="submit" value="Save" />
    </form>   
</body>
</html>

این قسمت را نیز در این جا به پایان می رسانیم و در قسمت بعد در رابطه با CSS Class هایی که برای Validation به صورت Built-in در AngularJS قرار داده شده اند، صحبت خواهیم کرد.

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

مرتضی گیتی
بدون نظر

ارسال نظر

نظر
نام
ایمیل
وب سایت