در این مقاله ما فیلد ها را براساس پرشدن یا نشدن، حاوی اطلاعات خاصی مانند ایمیل بودن یا نبودن چک می کنیم. در انتها هم یک قانون سفارشی برای قرار دادن یک کاراکتر خاص در فیلد تعیین میکنیم.
آنگولار میتواند عبارات داخل جعبه متن را تائید صحت کند.
تائید اعتبار در فرم ها
آنگولار پیشنهاد میدهد که تائید اعتبار فرم را در سمت کاربر انجام دهید.
آنگولار امکان کنترل مقادیر عبارات وارد شده در فیلد های فرم مانند input, textarea, select را دارد و به شما اجازه میدهد که در باره این فرم ها به کاربر اعلام های را نشان بدهید.
آنگولار همچنین امکان نگهداری اطلاعات ورود اطلاعات و تغییر آن را نیز دارد.
شما میتوانید از صفات HTML5 برای تائید صحت ورودی ها استفاده کنید. این امکان که یک تعیین اعتبار سفارشی برای مقادیر ورودی ایجاد کنید نیز موجود است.
نیازها
از صفات 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>
مشاهده نتیجه
ایمیل
از 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>
مشاهده نتیجه
وضعیت فرم و وضعیت فیلد ورود اطلاعات
آنگولار توان به روز کردن وضعیت فرم ها و فیلد های ورودی را دارد.
فیلد های ورودی دارای وضعیت های زیر است:
- $untouched : فیلد تا کنون کلیک نشده است.
- $touched : فیلد کلیک شده است.
- $pristine : فیلد ویرایش نشده است.
- $dirty : فیلد ویرایش شده است.
- $invalid : محتوای فیلد معتبر نیست.
- $valid : محتوای فیلد معتبر است.
تمام ویژگی های بالا بصورت 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>
مشاهده نتیجه
کلاس های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 ارجاع داده میشود.
در جاوا اسکریپت ما دستورالعمل جدید را با اسم myDirective ایجاد می کنیم.
بخاطر داشته باشید ، وقتیکه نام یک دستورالعمل را انتخاب میکنید باید از اصول Camel Case استفاده کنید. نام دستورالعمل بصورت MyDirective نوشته خواهد شد. هنگام استفاده از این دستورالعمل باید نام آن را بصورت my-directive استفاده کنید.
در مرحله بعد یک شیئ در هنگامیکه ngmodel درخواست میشود یک شیئ ngModelController را بازمیگرداند.
یک عملگر لینک شونده ایجاد کنید که چند آروگومان داشته باشد، در چهارمین آروگومان یعنی mCtrl برابر با ngModelController خواهد بود.
سپس یک عملگر به نام myValidation را تعریف کرده که یک آروگومان دریافت می کند.این آروگومان برابر با مقدار در تگ ورودی فرم خواهد بود.
در گام بعد تستی برای داشتن واژهe ایجاد کرده تا اعتبار آن را تعیین کرده و یکی از دو گزینه True یا False را برگرداند.
در آخر هم mCtrl.$parsers.push(myValidation); عملگر myValidation را به یک آرایه اضافه کرده، تا هربار که داده ای وارد میشود پردازش را انجام دهد.
مثال اعتبار سنجی:
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/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>
مشاهده نتیجه
صفت novalidate برای غیرفعال کرده اعتبارسنجی پیشفرض مرورگر بکار میرود.
توضیح مثال
دستورالعمل ng-model تگ ورودی را با model ترکیب می کنند.
شیئ model دو ویژگی : uer و email دارد.
بخاطر ng-show تگ span با صفت color:red تنها در زمانیکه ایمیل، صفات $dirty و $invalid را داشته باشد نمایش داده میشود.
براي بهره مندي از مشاوره تخصصي در زمینه طراحی سایت در کرج با شرکت سارگون تماس بگيريد