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

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

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

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

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

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

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

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

Required

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

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

<p>The input's valid state is:</p>
<h1>{{myForm.myInput.$valid}}</h1>

</form>

<p>The input's valid state is:</p>

<h1>{{myForm.myInput.$valid}}</h1>

مقالات

E-mail

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

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

<p>The input's valid state is:</p>
<h1>{{myForm.myInput.$valid}}</h1>

</form>

<p>The input's valid state is:</p>

<h1>{{myForm.myInput.$valid}}</h1>

Form State و Input State

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

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

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

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

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

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

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

مثال:

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

<input name="myName" ng-model="myName" required>
<span ng-show="myForm.myName.$touched && myForm.myName.$invalid">The name is required.</span>

1 2	<input name="myName" ng-model="myName" required> <span ng-show="myForm.myName.$touched && myForm.myName.$invalid">The name is required.</span>

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 برای این کلاس ها به درخواست خود را رابط کاربری بهتر و بصری تر.

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

<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>

<style>

form.ng-pristine {

background-color: lightblue;

}

form.ng-dirty {

background-color: pink;

}

</style>

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

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

دستور خود را ایجاد کنید، حاوی یک تابع اعتبار سنجی سفارشی، و با استفاده از 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>

</form>

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، دستور جدید با استفاده از 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 را به آرایه ای از توابع دیگر اضافه می کند که هر بار مقدار ورودی تغییر می کند اجرا می شود.

مثال:

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>

<h2>Validation Example</h2>

<form  ng-app="myApp"  ng-controller="validateCtrl"
name="myForm" novalidate>

<p>Username:<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">Username is required.</span>
  </span>
</p>

<p>Email:<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">Email is required.</span>
  <span ng-show="myForm.email.$error.email">Invalid email address.</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 = 'John Doe';
    $scope.email = 'john.doe@gmail.com';
});
</script>

</body>
</html>

<!DOCTYPE html>

<html>

<body>

<h2>Validation Example</h2>

<form ng-app="myApp" ng-controller="validateCtrl"

name="myForm" novalidate>

<p>Username:<br>

<span ng-show="myForm.user.$error.required">Username is required.</span>

</span>

</p>

<p>Email:<br>

<span ng-show="myForm.email.$error.required">Email is required.</span>

<span ng-show="myForm.email.$error.email">Invalid email address.</span>

</span>

</p>

<p>

<input type="submit"

ng-disabled="myForm.user.$dirty && myForm.user.$invalid ||

myForm.email.$dirty && myForm.email.$invalid">

</p>

</form>

var app = angular.module('myApp', []);

app.controller('validateCtrl', function($scope) {

$scope.user = 'John Doe';

$scope.email = 'john.doe@gmail.com';

});

</script>

</body>

</html>

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

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

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

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

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

5/5 - (1 امتیاز)

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

E-mail

Form State و Input State

CSS Classes

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

مطالب زیر را حتما مطالعه کنید

دیدگاهتان را بنویسید لغو پاسخ

E-mail

Form State و Input State

CSS Classes

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

مطالب زیر را حتما مطالعه کنید

مسیریابی انگولار AngularJS Routing

ساخت انیمیشن با انگولار – angularjs animation

AngularJS Includes

api آنگولار جی اس – Angularjs API

ساخت form با آنگولار جی اس – angular forms

کار با event ها در آنگولار – AngularJS Events

دیدگاهتان را بنویسید لغو پاسخ