تأیید فرم AngularJS

AngularJS قادر به تأیید داده‌های ورودی است.

تأیید فرم

AngularJS تأیید فرم را ارائه می‌دهد.

AngularJS وضعیت فرم و فیلدهای ورودی (input، textarea، select) را نظارت کرده و به شما اجازه می‌دهد که به کاربر اطلاع دهید که وضعیت فعلی چیست.

AngularJS همچنین اطلاعات مربوط به اینکه آیا آن‌ها لمس یا تغییر کرده‌اند را شامل می‌شود.

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

تأیید کلاینت به تنهایی نمی‌تواند ورودی کاربر را محافظت کند. تأیید سرور نیز ضروری است.

اجباری

از ویژگی HTML5 استفاده کنید اجباری این مقدار باید پر شود:

مثال

این فیلد ورودی باید اجباری باشد:

<form name="myForm">  
  <input name="myInput" ng-model="myInput" required>  
</form>  
<p>وضعیت معتبر ورودی است:</p>  
<h1>{{myForm.myInput.$valid}}</h1>

آزمایش کنید

email

از نوع HTML5 استفاده کنید email این مقدار باید یک ایمیل باشد:

مثال

این فیلد ورودی باید یک ایمیل باشد:

<form name="myForm">  
  <input name="myInput" ng-model="myInput" type="email">  
</form>  
<p>وضعیت معتبر ورودی است:</p>  
<h1>{{myForm.myInput.$valid}}</h1>

آزمایش کنید

وضعیت فرم و وضعیت ورودی

AngularJS به طور مداوم وضعیت فرم و فیلد ورودی را به‌روزرسانی می‌کند.

فیلد ورودی دارای این وضعیت‌ها است:

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

این‌ها همه ویژگی‌های فیلد ورودی هستند که می‌توانند درست یا غلط باشند.

فرم دارای این وضعیت‌ها است:

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

این‌ها همه ویژگی‌های فرم هستند که می‌توانند درست یا غلط باشند.

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

مثال

اگر این فیلد لمس شده باشد و خالی باشد، پیام خطا نمایش داده خواهد شد:

<input name="myName" ng-model="myName" required>  
<span ng-show="myForm.myName.$touched && myForm.myName.$invalid">نام یک الزام است.</span>

آزمایش کنید

کلاس‌های CSS

AngularJS بر اساس وضعیت فرم و فیلد ورودی کلاس‌های CSS را به آنها اضافه می‌کند.

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

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

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

• ng-pristine هیچ فیلد تغییر نکرده است
• ng-dirty یک یا چند فیلد تغییر کرده است
• ng-valid محتوای فرم معتبر است
• ng-invalid محتوای فرم معتبر نیست
• ng-valid-key هر بار یک کلید را بررسی کنید. مثلاً:ng-valid-required، در صورت داشتن چندین محتوا الزامی که باید بررسی شوند بسیار مفید است.
• ng-invalid-key مثلاً:ng-invalid-required

اگر مقدار کلاس نمایانگر باشد: false، در این صورت این کلاس‌ها حذف خواهند شد.

لطفاً استایل‌های این کلاس‌ها را اضافه کنید تا رابط کاربری بهتری و مستقیم‌تری برای برنامه خود فراهم کنید.

مثال

استایل‌های استاندارد CSS را اعمال کنید:

<style>
input.ng-invalid {
  background-color: pink;
};
input.ng-valid {
  background-color: lightgreen;
};
</style>

آزمایش کنید

همچنین می‌توانید استایل فرم را تنظیم کنید.

مثال

استایل‌های فرم‌های (ابتدایی) بدون تغییر و تغییردهنده را اعمال کنید:

<style>
form.ng-pristine {
  background-color: lightblue;
};
form.ng-dirty {
  background-color: pink;
};
</style>

آزمایش کنید

تأیید شخصی

برای ایجاد یک تابع تأیید شخصی نیاز به مهارت‌های خاصی است؛ باید دستورالعمل جدیدی به برنامه اضافه کنید و از برخی از پارامترهای مشخص برای پردازش تأیید درون تابع استفاده کنید.

مثال

دستورالعمل خود را ایجاد کنید که شامل یک تابع تأیید شخصی است و از طریق my-directive به آن ارجاع کنید.

این فیلد تنها زمانی معتبر است که شامل حرف "e" باشد:

<form name="myForm">
<input name="myInput" ng-model="myInput" required my-directive>
</form>
<script>
var app = angular.module('myApp', []);
app.directive('myDirective', function() {
  return {
    require: 'ngModel',
    link: function(scope, element, attr, mCtrl) {
      function myValidation(value) {
        if (value.indexOf("e") > -1) {
          mCtrl.$setValidity('charE', true);
        } else {
          mCtrl.$setValidity('charE', false);
        };
        return value;
      };
      mCtrl.$parsers.push(myValidation);
    };
  };
});
</script>

آزمایش کنید

در HTML، دستورالعمل جدید از طریق استفاده از ویژگی my-directive برای ارجاع به آن اضافه می‌کنیم.

در JavaScript، ابتدا یک نام به نام myDirective دستورالعمل جدید.

به یاد داشته باشید که هنگام نام‌گذاری یک دستورالعمل، باید از روش نام‌گذاری قوزحی استفاده کنید، مانند myDirective، اما هنگام فراخوانی آن، باید نام را با خط تیره جدا کنید، مانند my-directive.

سپس، یک شیء بازگردانید که مشخص می‌کند ما نیاز داریم ngModelکه ngModelController.

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

سپس یک تابع مشخص کنید، در این مثال به نام myValidationکه یک پارامتر می‌پذیرد، که آن ارزش ورودی عنصر است.

آیا این مقدار شامل حرف "e" است و اعتبار مدل کنترلر را تنظیم می‌کند، true یا false.

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

مثال براي تایید

<!DOCTYPE html>
<html>
<script src="https://cdn.staticfile.net/angular.js/1.6.9/angular.min.js"></script>
<body>
<h2>مثال براي تایید</h2>
<form ng-app="myApp"  ng-controller="validateCtrl"
name="myForm" novalidate>
<p>用户名：<br>
  <input type="text" name="user" ng-model="user" required>
  <span style="color:red" ng-show="myForm.user.$dirty && myForm.user.$invalid">
  <span ng-show="myForm.user.$error.required">用户名是必填项。<
  </span>
</p>
<p>电子邮件：<br>
  <input type="email" name="email" ng-model="email" required>
  <span style="color:red" ng-show="myForm.email.$dirty && myForm.email.$invalid">
  <span ng-show="myForm.email.$error.required">电子邮件是必填项。</span>
  <span ng-show="myForm.email.$error.email">无效的电子邮件地址。</span>
  </span>
</p>
<p>
  <input type="submit"
  ng-disabled="myForm.user.$dirty && myForm.user.$invalid ||
  myForm.email.$dirty && myForm.email.$invalid">
</p>
</form>
<script>
var app = angular.module('myApp', []);
app.controller('validateCtrl', function($scope) {}}
  $scope.user = 'Bill Gates';
  $scope.email = 'bill.gates@gmail.com';
});
</script>
</body>
</html>

آزمایش کنید

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

توضیح مثال:

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

مدل‌های موجود در این مدل دو ویژگی دارند:user و email.

به دلیل ng-show، تنها زمانی که user یا email باشد $dirty و $invalid در این صورت، spans با رنگ red نمایش داده می‌شوند.