%45 تخفیف، با کد daneshjoo روی تمام آموزش ها، بمناسبت روز دانشجو
زمان باقی مانده (تمدید شد)
سبد (0)

تبلیغات

آموزش انگولار-اعتبارسنجی

فرم ها و کنترل های انگولار می توانند داده های ورودی را معتبر سازی کنند.


اعتبار سنجی وروی

در مقاله ی قبلی، شما در مورد فرم ها و کنترل های انگولار، مطالبی را آموختید. 

فرم ها و کنترل ای انگولار، می توانند سرویس های اعتبار سنجی را ارائه دهند و کاربران را از ورودی های(input) نامعتبر مطلع سازند.

Note

اعتبار سنجی سمت کاربر به تنهایی نمی تواند امنیت ورودی های کاربر را تامین کند. اعتبار سنجی سمت سرور هم مورد نیاز است. 


کد اپلیکیشن

<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/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 = این آدرس ایمیل توسط spambots حفاظت می شود. برای دیدن شما نیاز به جاوا اسکریپت دارید';
});
</script>

</body>
</html>
خودتان امتحان کنید »
Note

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


توضیح مثال

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

شیء model دو خصوصیت دارد: user و email .

به دلیل وجود دستور ng-show، عناصر span با ویژگی color:red تنها زمانی نمایش می یابند که user یا email برابر با dirty$ یا invalid$ باشند. 

خصوصیت توضیحات
dirty$ کاربر با فیلد مورد نظر تعامل کرده است. 
valid$ محتوای فیلد مورد نظر معتبر است. 
invalid$ محتوای فیلد مورد نظر نا معتبر است. 
pristine$

کاربر هنوز با فیلد مورد نظر تعامل نکرده است. 

تمامی محصولات و خدمات این وبسایت، حسب مورد دارای مجوزهای لازم از مراجع مربوطه می‌باشند و فعالیت‌های این سایت تابع قوانین و مقررات جمهوری اسلامی ایران است.
logo-samandehi مجوز نشر دیجیتال از وزرات فرهنگ و ارشاد اسلامی پرداخت آنلاین -  بانک ملت معرفی بیاموز در شبکه سه پرداخت آنلاین - بانک اقتصاد نوین پرداخت آنلاین - بانک سامان
 
دوره های آموزشی راه اندازی کسب و کارهای اینترنتی
تبلیغات اینترنتی