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

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

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

در این قسمت از آموزش از وب سایت پرووید در رابطه با CSS Class هایی که در AngularJS موجود هستند و به منظور اضافه کردن Style به فرم ها و Input Control ها استفاده می شوند صحبت خواهیم کرد. این Style ها بر اساس State مربوط به فرم و Input Control ها اضافه خواهند شد. جدول زیر برخی از این CSS Class ها را نشان می دهند.

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

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

نکته بسیار مهم این که باید برای هرکدام از این CSS Class ها یک پیاده سازی و یا اصطلاحاً Implementation ایجاد کرده و آن ها را در یک فایل CSS قرار بدهید. پس از آن AngularJS به صورت خودکار بر اساس State مربوط به Input Control ها از این Class ها و Style ها استفاده می کند.

مثال زیر نحوه استفاده از بعضی از این CSS Class ها، برای مثال ng-pristine ،ng-touched ،ng-valid و ng-invalid برای نشان دادن شرایط اعتبار سنجی مربوط به Input Control های یک فرم، نشان داده شده است.

<!DOCTYPE html>
<html>
<head>
    <script src="~/Scripts/angular.js"></script>
    <style>
        input.ng-pristine {
            background-color:yellow;
        }

        input.ng-touched.ng-invalid {
            background-color:red;
        }

        input.ng-touched.ng-valid {
            background-color:green;
        }
        
    </style>
</head>
<body ng-app>
     <form name="studentForm" novalidate class="student-form">
        <label for="firstName">First Name: </label> <br />
        <input type="text" name="firstName" ng-model="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="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="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="Save" />
    </form>
</body>
</html>

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

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

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

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

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

ارسال نظر

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