$valid ng-valid Boolean 告訴我們這一項(xiàng)當(dāng)前基于你設(shè)定的規(guī)則是否驗(yàn)證通過
$invalid ng-invalid Boolean 告訴我們這一項(xiàng)當(dāng)前基于你設(shè)定的規(guī)則是否驗(yàn)證未通過
$pristine ng-pristine Boolean 如果表單或者輸入框沒有使用則為True
$dirty ng-dirty Boolean 如果表單或者輸入框有使用到則為True

Angular 也提供了有關(guān)表單及其輸入框的類，以便你能夠依據(jù)每一個(gè)狀態(tài)設(shè)置其樣式.
訪問表單屬性

方位表單: <form name>.<angular property>
訪問一個(gè)輸入框: <form name>.<input name>.<angular property>

設(shè)置我們的表單

我們將使用一個(gè)簡單的表單來做演示.

201561995404669.png (765×364)

我們將需要兩個(gè)文件:

index.html 我們用來顯示表單的代碼
app.js 我們的Angular應(yīng)用程序和控制器 (幾乎沒有任何代碼)

Our Form Code index.html

<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
  <!-- CSS ===================== -->
  <!-- load bootstrap -->
  <link rel="stylesheet" > 
  <style>
    body   { padding-top:30px; }
  </style>
   
  <!-- JS ===================== -->
  <!-- load angular -->
  <script src="http://code.angularjs.org/1.2.6/angular.js"></script> 
  <script src="app.js"></script>
</head>
 
<!-- apply angular app and controller to our body -->
<body ng-app="validationApp" ng-controller="mainController">
<div class="container">
<div class="col-sm-8 col-sm-offset-2">
   
  <!-- PAGE HEADER -->
  <div class="page-header"><h1>AngularJS Form Validation</h1></div>
  
  <!-- FORM -->
  <!-- pass in the variable if our form is valid or invalid -->
  <form name="userForm" ng-submit="submitForm(userForm.$valid)" novalidate> <!-- novalidate prevents HTML5 validation since we will be validating ourselves -->
 
    <!-- NAME -->
    <div class="form-group">
      <label>Name</label>
      <input type="text" name="name" class="form-control" ng-model="name" required>
    </div>
 
    <!-- USERNAME -->
    <div class="form-group">
      <label>Username</label>
      <input type="text" name="username" class="form-control" ng-model="user.username" ng-minlength="3" ng-maxlength="8">
    </div>
     
    <!-- EMAIL -->
    <div class="form-group">
      <label>Email</label>
      <input type="email" name="email" class="form-control" ng-model="email">
    </div>
     
    <!-- SUBMIT BUTTON -->
    <button type="submit" class="btn btn-primary">Submit</button>
     
  </form>
 
</div><!-- col-sm-8 -->
</div><!-- /container -->
</body>
</html>

這里列出了一些關(guān)鍵點(diǎn):

novalidate: 它將會(huì)組織默認(rèn)的HTML5驗(yàn)證，因?yàn)檫@會(huì)由我們自己來做(我們自己的將會(huì)更棒)
我們在輸入框上應(yīng)用了ng-model，以便將來自表單的數(shù)據(jù)綁定到angular變量
username上的ng-minlength 和 ng-maxlength會(huì)自己創(chuàng)建其規(guī)則
name 輸入框是必填的
email 輸入框有屬性 type=”email”

驗(yàn)證規(guī)則

Angular 有很多驗(yàn)證規(guī)則，像是 tong-min leng than dng-max length.

Angular還可以自己配置規(guī)則. Angular輸入指引上有說明 .

<input
  ng-model="{ string }"
  name="{ string }"
  required
  ng-required="{ boolean }"
  ng-minlength="{ number }"
  ng-maxlength="{ number }"
  ng-pattern="{ string }"
  ng-change="{ string }">
</input>

現(xiàn)在建好了表單, 接著創(chuàng)建Angular應(yīng)用和控制器，ng-app ng-控制器.
應(yīng)用的 Codeapp.js

// app.js
// create angular app
var validationApp = angular.module('validationApp', []);
 
// create angular controller
validationApp.controller('mainController', function($scope) {
 
  // function to submit the form after all validation has occurred      
  $scope.submitForm = function(isValid) {
 
    // check to make sure the form is completely valid
    if (isValid) {
      alert('our form is amazing');
    }
 
  };
 
});

使HTML5驗(yàn)證器的novalidate

我們將在我們的表單使用novalidate。這是一個(gè)很好的做法，因?yàn)槲覀儗?huì)自己處理驗(yàn)證。如果我們讓我們的表單這樣做，它看起來很丑陋。

201561995443961.png (641×170)

禁用提交按鈕 ng-disabled

現(xiàn)在真正的好戲上演了。我們開始使用Angular的屬性。首先讓我們禁用我們的提交按鈕。如果我們的表單是$invalid的，我們只想禁用它。

<!-- index.html -->
...
 
  <!-- SUBMIT BUTTON -->
  <button type="submit" class="btn btn-primary" ng-disabled="userForm.$invalid">Submit</button>
 
...

只使用一點(diǎn)代碼（ng-disabled），如果我們的表單是$invalid的，表單按鈕將被禁用。
這意味著，我們的name input 字段是必需的，并且email input字段需要一個(gè)有效的電子郵件。

用 eng-show顯示錯(cuò)誤信息

ng-valid 和ng-invalid 會(huì)基于提供的表單規(guī)則自動(dòng)驗(yàn)證輸入的有效性.

咱們在輸入部分加一些錯(cuò)誤信息，只要不等于$valid或是已經(jīng)使用過的就行 (不能展示還沒使用).

<!-- index.html -->
...
 
  <!-- NAME -->
  <div class="form-group">
    <label>Name</label>
    <input type="text" name="name" class="form-control" ng-model="name" required>
    <p ng-show="userForm.name.$invalid && !userForm.name.$pristine" class="help-block">You name is required.</p>
  </div>
 
  <!-- USERNAME -->
  <div class="form-group">
    <label>Username</label>
    <input type="text" name="username" class="form-control" ng-model="user.username" ng-minlength="3" ng-maxlength="8">
    <p ng-show="userForm.username.$error.minlength" class="help-block">Username is too short.</p>
    <p ng-show="userForm.username.$error.maxlength" class="help-block">Username is too long.</p>
  </div>
   
  <!-- EMAIL -->
  <div class="form-group">
    <label>Email</label>
    <input type="email" name="email" class="form-control" ng-model="email">
    <p ng-show="userForm.email.$invalid && !userForm.email.$pristine" class="help-block">Enter a valid email.</p>
  </div>
 
...

就像這樣 Angular 會(huì)根據(jù)規(guī)則來驗(yàn)證輸入部分的$invalid 和 $pristine properties屬性從而決定是否顯示錯(cuò)誤信息.

201561995503615.png (799×437)

格局類

Angular在驗(yàn)證輸入或表單時(shí)的有效有否是已經(jīng)提供了一些類，像是 (ng-valid,ng-invalid,ng-pristineandng-dirty).

你可以編輯自己喜歡的CSS . 你可以私有定制化這些類來實(shí)現(xiàn)特定的場景應(yīng)用.

.ng-valid     { }
.ng-invalid   { }
.ng-pristine   { }
.ng-dirty     { }
 
/* really specific css rules applied by angular */
.ng-invalid-required     { }
.ng-invalid-minlength     { }
.ng-valid-max-length     { }

使用 ng-class 根據(jù)條件添加類

因?yàn)槲覀兪褂昧?Bootstrap, 我們將就使用它們提供的類(has-error). 這樣就能圍繞我們的form-group獲得漂亮的錯(cuò)誤信息和顏色.

ng-class 允許我們基于一個(gè)表達(dá)式添加類. 在這種情況下，我們想要想我們的form-group添加一個(gè) has-error 類，如果輸入框的狀態(tài)是$invalid或者不是pristine的話.

其工作的方式是 ng-class="{ <class-you-want> : <expression to be evaluated > }". 更多的信息，請讀一讀 Angular ngClass 文檔吧.

<!-- index.html -->
...
 
  <!-- NAME -->
  <div class="form-group" ng-class="{ 'has-error' : userForm.name.$invalid && !userForm.name.$pristine }">
    <label>Name</label>
    <input type="text" name="name" class="form-control" ng-model="user.name" required>
    <p ng-show="userForm.name.$invalid && !userForm.name.$pristine" class="help-block">You name is required.</p>
  </div>
   
  <!-- USERNAME -->
  <div class="form-group" ng-class="{ 'has-error' : userForm.username.$invalid && !userForm.username.$pristine }">
    <label>Username</label>
    <input type="text" name="username" class="form-control" ng-model="user.username" ng-minlength="3" ng-maxlength="8">
    <p ng-show="userForm.username.$error.minlength" class="help-block">Username is too short.</p>
    <p ng-show="userForm.username.$error.maxlength" class="help-block">Username is too long.</p>
  </div>
     
  <!-- EMAIL -->
  <div class="form-group" ng-class="{ 'has-error' : userForm.email.$invalid && !userForm.email.$pristine }">
    <label>Email</label>
    <input type="email" name="email" class="form-control" ng-model="user.email">
    <p ng-show="userForm.email.$invalid && !userForm.email.$pristine" class="help-block">Enter a valid email.</p>
  </div>
 
...

現(xiàn)在我們的表單就有了恰當(dāng)?shù)腂ootstrap錯(cuò)誤類.

201561995526100.png (770×449)

只在提交表單后顯示錯(cuò)誤信息

有時(shí)候不想在用戶正在輸入的時(shí)候顯示錯(cuò)誤信息. 當(dāng)前錯(cuò)誤信息會(huì)在用戶輸入表單時(shí)立即顯示. 由于Angular很棒的數(shù)據(jù)綁定特性，這是可以發(fā)生的. 因?yàn)樗械氖聞?wù)都可以在一瞬間發(fā)生改變，這在表單驗(yàn)證時(shí)會(huì)有副作用.

對于你想要只在表單正要提交之后才顯示錯(cuò)誤消息的場景, 你就需要對上面的代碼做一些小調(diào)整.

你要去掉提交按鈕上的ng-disabled，因?yàn)槲覀兿胍脩艏词故窃诒韱螞]有全部驗(yàn)證完的情況下也能點(diǎn)擊提交.
你要在表單已經(jīng)被提交之后添加一個(gè)變量. 在你的 submitForm() 函數(shù)中, 只要加入 $scope.submitted = true 就行了;. 一旦表單被提交，它就會(huì)保存提交值為true的submitted變量.
將錯(cuò)誤規(guī)則從ng-class="{ 'has-error' : userForm.name.$invalid && !userForm.name.$pristine }" 調(diào)整為 ng-class="{ 'has-error' : userForm.name.$invalid && !userForm.name.$pristine && submitted }". 這就確保了錯(cuò)誤消息只會(huì)在表單被提交時(shí)被顯示出來. 你也許會(huì)需要為這個(gè)變量調(diào)整所有其它的 ng-class 和 ng-show.

現(xiàn)在，只有在submitted變量被設(shè)置為true時(shí)才會(huì)顯示錯(cuò)誤信息.

只有在輸入框之外點(diǎn)擊時(shí)才顯示錯(cuò)誤消息

只有在輸入框之外點(diǎn)擊時(shí)才顯示錯(cuò)誤消息（也被叫做失去焦點(diǎn) blur) 這一需求比在提交時(shí)驗(yàn)證要復(fù)雜一點(diǎn). 在失去焦點(diǎn)時(shí)驗(yàn)證表單需要一個(gè)custom指令. 這是一個(gè)可以讓你操作DOM的指令.

我們正在寫一篇文章專門討論此話題。同時(shí)，還有其他的一些資源討論了創(chuàng)建custom指令來處理失去焦點(diǎn)的情況:

http://coding-issues.blogspot.in/2013/10/angularjs-blur-directive.html
http://blog.ejci.net/2013/08/06/dealing-with-focus-and-blur-in-angularjs-directives/
http://plnkr.co/edit/Xfr7X6JXPhY9lFL3hnOw?p=preview

全部完成

現(xiàn)在一旦我們正確填寫了所有的信息，我們的表單提交按鈕就能使用了. 一旦我們提交了表單，我們將會(huì)見到我們設(shè)置的彈出消息.

201561995546318.png (376×169)