دوره آموزشی AngularJS به زبان فارسی - بخش سیزدهم
بسم الله الرحمن الرحیم
این دوره آموزشی تا بخش بیست و دوم مقدماتی خواهد بود اگر به این مطالب تسلط دارید لطفا به آموزش "طراحی یک Single Page Application با ASP.NET Web API و Angular.js " مراجعه کنید.
مشاهده تمامی آموزش های دوره AngularJS
آموزش AngularJS
بخش سیزدهم
AngularJS Input Validation
فرم های AngularJS و Controller ها می توانند داده های ورودی را اعتبارسنجی کنند.
Input Validation
در بخش قبل، فرم ها و Controller های AngularJS را یاد گرفتید.
فرم ها و Controller های AngularJS می توانند اعتبارسنجی مورد نیاز ما را فراهم کنند و اطلاعات نامعتبر کاربران را به آنها اطلاع دهند.
نکته: اعتبارسنجی سمت Client نمی تواند به تنهایی این اطمینان را به وجود آورد که اطلاعات وارد شده صحیح است و باید اعتبارسنجی سمت سرور نیز حتما صورت گیرد.
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>
</head>
<body>
<h2>Validation Example</h2>
<form ng-app="" 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>
function validateCtrl($scope) {
$scope.user = 'John Doe';
$scope.email = 'john.doe@gmail.com';
}
</script>
</body>
</html>
نکته: خاصیت novalidate برای غیرفعال کردن خاصیت validation پیش فرض مرورگر می باشد.
توضیح مثال
رهنمود ng-model عنصر های input را به Model ما مقید می کند.
شی Model ما دو پراپرتیuser و emailدارد.
تگ های span که با رنگ قرمز مشخص شده اند، توسط رهنمود ng-show در مواقعی که فیلدهایuser و emailما$dirty و $invalid شوند، نمایش داده خواهند شد.
pristine$
زمانی TRUE می باشد که user هنوز با فرم تعامل ندارد.
$dirty
زمانی که user با فرم ارتباط برقرار کرد TRUE می شود.
$valid
زمانی TRUE می باشد که همه محتویات صفحه و کنترل ها ولید باشند.
$invalid
زمانی TRUEخواهد بود که حداقل یکی از محتویات صفحه یا کنترلی invalid باشد
$error
این یک شی hash شده است که شامل ارجاع به تمام کنترلها و فرمهای invalid است به صورتی که:
کلیدها validation tokens هستند، در واقعه نام خطاها می باشند.
مقادیر () شامل آرایه ای از کنترل ها یا فرم های نامعتبری است که باعث آن خطا شده است
در اینجا برخی از validation tokens ها لیست شده اند که به وسیله آنها می توانید فرم های خود را بررسی کنید
max
maxlength
min
minlength
number
pattern
required
url
مشاهده تمامی آموزش های دوره AngularJS
نظرات (۲)
با عرض سلام
توضیحات بیشتری را در پایان مطلب قرار دادم انشالله که مشکل شما مرتفع گردد
باتشکر
موفق باشید
ng-disabled="myForm.user.$dirty && myForm.user.$invalid ||
myForm.email.$dirty && myForm.email.$invalid">