Validation Example

Username:
      Username is required.  

Email:
      Email is required.   Invalid email address.  

 

  نکته: خاصیت 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 ها لیست شده اند که به وسیله آنها می توانید فرم های خود را بررسی کنید   email max maxlength min minlength number pattern required url     مشاهده تمامی آموزش های دوره AngularJS ", "image": "/landingpages/images/blog-image-one.jpg", "author": { "@type": "", "name": "اسماعیل شیدایی", "url": "" }, "publisher": { "@type": "Organization", "name": "شرکت توسعه و مدیریت پارسیان زرین | Ably ابلای", "logo": { "@type": "ImageObject", "url": "https://ably.ir/" } }, "datePublished": "1393/7/27 7:31:33", "dateModified": "" }
a

دوره آموزشی AngularJS به زبان فارسی - بخش سیزدهم

صفحه اصلی / ABLY مقالات و مطالب مجموعه / دوره آموزشی AngularJS به زبان فارسی - بخش سیزدهم
دوره آموزشی AngularJS به زبان فارسی - بخش سیزدهم
نویسنده

دوره آموزشی AngularJS به زبان فارسی - بخش سیزدهم

بسم الله الرحمن الرحیم

 

این دوره آموزشی تا بخش بیست و دوم مقدماتی خواهد بود اگر به این مطالب تسلط دارید لطفا به آموزش "طراحی یک Single Page Application با ASP.NET Web API و  Angular.js " مراجعه کنید.

 

مشاهده تمامی آموزش های دوره AngularJS

آموزش AngularJS

بخش سیزدهم

 

 

AngularJS Input Validation

فرم های AngularJS و Controller ها می توانند داده های ورودی را اعتبارسنجی کنند.

 

Input Validation

در بخش قبل، فرم ها و Controller های AngularJS را یاد گرفتید.
فرم ها و Controller های AngularJS می توانند اعتبارسنجی مورد نیاز ما را فراهم کنند و اطلاعات نامعتبر کاربران را به آنها اطلاع دهند.
نکته: اعتبارسنجی سمت Client نمی تواند به تنهایی این اطمینان را به وجود آورد که اطلاعات وارد شده صحیح است و باید اعتبارسنجی سمت سرور نیز حتما صورت گیرد.

 

 

 

 

بسم الله الرحمن الرحیم

 

این دوره آموزشی تا بخش بیست و دوم مقدماتی خواهد بود اگر به این مطالب تسلط دارید لطفا به آموزش "طراحی یک 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 ها لیست شده اند که به وسیله آنها می توانید فرم های خود را بررسی کنید

 

email
max
maxlength
min
minlength
number
pattern
required
url

 

 

مشاهده تمامی آموزش های دوره AngularJS

نظرات

  • Hannah Martinez
    علی میلادیان
    دو شنبه 11 دی 1278 - 0:00

    سلام جناب شیدایی / با تشکر از شما 

    یه سوال 
    در صورتی که تعداد فیلد های فرم ما زیاد باشد استفاده از این روش زیر که شما پیشنهاد کردید سخت نیست ؟ / 
      <input type="submit"
      ng-disabled="myForm.user.$dirty && myForm.user.$invalid ||
      myForm.email.$dirty && myForm.email.$invalid">

    یعنی برای تمام فیلد ها باید این دستورات را نوشت / آیا راه حل بهتری هم هست ؟ 
    ممنون

  • Hannah Martinez
    علی میلادیان
    دو شنبه 11 دی 1278 - 0:00

    سلام آقایی شیدایی .. بینهایت سپساسگزارم .. با این خرف ها جبران این همه زحمات ارزشمند نمی شود ولی خوب باز هم تشکر مکی کنم .. 

    حناب شیدایی :  ممکنه یه کم در مورد این ها توضیح بدی : 
    $.dirty  / $.invalid  / $.erroe.required  / $.error.email

    ممنون

    • Judith Bell
      پاسخ
      اسماعیلشیدایی
      دو شنبه 11 دی 1278 - 0:00

      با عرض سلام

      توضیحات بیشتری را در پایان مطلب قرار دادم انشالله که مشکل شما مرتفع گردد

      باتشکر
      موفق باشید

نظرات یا سوالات خودرا با ما درمیان بگذارید

شرکت توسعه و مدیریت پارسیان زرین با برند ABLY با بیش از 14 سال سابقه فعالیت در حوزه نرم افزار و انجام بیش از 100 پروژه در ایران و اروپا در خدمت شما عزیزان میباشد.

تماس با ما
آدرس :   فارس - شیراز -بلوار دکتر شریعتی (معالی آباد) - ،کوچه9 ، ساختمان اداری یونیک، طبقه 5 واحد 25

شماره تماس: 07136251757

شماره تماس: 07136253909

شماره تماس: 09120975516

ایمیل: hello@ably.ir

وب سایت:

تماس با ما

ایمیل خود را وارد نمایید، تا همکاران ما در اسرع وقت با شما تماس بگیرند.

Copyrights © 1998 - 2024 Powered & Designed By ABLY Co, ABLY.ir

0912 097 5516 :شماره تماس
0713 625 1757 :شماره تماس