對於日常的開發來說，最常見的開發場景就是通過表單編輯數據，這里涉及的問題就是驗證問題。
angularjs 內置已經支持了常見的驗證方式，可以輕松實現表單驗證。
1. 綁定
為了方便，我們在 $scope 上下文對象上創建一個 model 來表示我們編輯的內容。
$scope.model = { id : 8, name: "alice", email: "alice@open.com" };
angularjs 的驗證需要表單的配合，為了能夠訪問表單，我們需要為表單起一個名字，相應的編輯項也需要有一個名字，使用 name 屬性完成，這樣我們可以訪問到這個編輯項。使用 ng-model 實現與模型的雙向綁定。當然了，提交數據並不需要表單。
<form name="myForm"> <div> <label>Id: <input type="number" name="myId" ng-model="model.id" /></label> </div> <div> <label>Name: <input type="text" name="myName" ng-model="model.name" /></label> </div> <div> <label>Email: <input type="email" name="myEmail" ng-model="model.email" /></label> </div> <div> <button type="submit">Save</button> </div> </form>
現在，運行頁面，應該可以看到模型的內容已經被綁定到了編輯項中。
2. 驗證結果
angularjs 內置了對於驗證的支持，所以，現在表單已經被驗證了，什么？我怎么沒有看到任何提示呢？angularjs 將驗證的結果保存在模型上，你需要自己在視圖上展示出來。
$valid
表單是否通過驗證可以通過表單對象的 $valid 來獲取，通過驗證為真，沒有通過為假。
<i>myForm.$valid: {{myForm.$valid}}</i>
你會看到其實 angularjs 已經在 $scope 上創建了一個與你的表單同名的對象，這里所說的 $valid 其實是這個對象的一個屬性。我們通過這個屬性來知道表單是否通過了驗證。
$invalid
這個屬性與 $valid 正好相反，是沒有通過驗證為真，通過了為假。
有什么用呢？
考慮這樣的場景，我們希望提交按鈕在表單通過驗證的情況下可用，沒有通過驗證則禁用，就可以這樣實現。
<button type="submit"ng-disabled="myForm.$invalid">Save</button>
也就是 $invalid 為真則禁用，否則啟用。
$pristine
用戶是否與表單進行過交互呢？可以通過 $pristine 來知道，用戶自打開頁面還沒有編輯過表單的任何內容，$pristine 返回真，否則，返回假。
$dirty
這個正好與 $pristine 相反，只要表單一旦被編輯，哪怕重新修改回了原來的內容，也是修改過，數據已經變臟了。
$error
表單驗證中，哪個驗證通過了，哪個驗證沒有通過，都可以從 $error 中獲取詳細的信息。
上面的這些狀態不僅表單有，每個編輯對象也有，我們也可以獲取每個編輯對象的上述 5 中狀態。
<ul> <li><i>myForm.$valid: {{myForm.$valid}}</i></li> <li><i>myForm.$invalid: {{myForm.$invalid}}</i></li> <li><i>myForm.$dirty {{myForm.$dirty}}</i></li> <li><i>myForm.$pristine {{myForm.$pristine}}</i></li> <li><i>myForm.$error {{myForm.$error}}</i></li> </ul> <ul> <li><i>myForm.myName.$valid {{myForm.myName.$valid}}</i></li> <li><i>myForm.myName.$error {{myForm.myName.$error}}</i></li> </ul>
3. 驗證
angularjs 能夠驗證哪些內容呢？
可以分為基本驗證和高級驗證兩個部分
基本驗證
基本驗證是指 HTML5 直接提供的驗證方式，比如必須提供的驗證，在 HTML5 中就有 required 屬性來表示。
另外 input 元素的 type 屬性實際上也對數據類型進行了驗證，比如輸入電子郵件地址的時候，顯然應該包含一個 @ 符號。
這些類型如下：
- number
- url
- text
- checkbox
- radio
高級驗證
基本驗證顯然不能滿足的需要，angularjs 提供了自己的高級驗證指令。這些指令都支持表達式。
ng-minlength
一看就知道，用來設置最少長度
ng-maxlength
設置最大長度
<input type="text" name="myName" required ng-minlength="3" ng-maxlength="6" ng-model="model.name" />
ng-required
required 不是在 HTML5 中已經提供了嗎？這個可以實現動態的是否必須，你可以綁定一個模型來表示現在這個編輯框是否必須。
在模型上設置是否必須。
$scope.requireValue = true;
然后，動態綁定到元素上
<input type="text" name="myName" ng-model="model.name" ng-required="requireValue"/>
ng-pattern
前面的太簡單了？給你一個正則總可以了，就看你的正則功力了。
比如說，希望驗證輸入的內容都是 0-9 數字 ，就既可以直接寫一個正則表達式常量，也可以綁定一個變量。
$scope.matchPattern = /\d+/;
視圖中。
<input type="text" name="myName" ng-model="model.name" ng-required="requireValue" ng-minlength="3" ng-maxlength="6" ng-pattern="/\d+/" /> <input type="text" name="myName" ng-model="model.name" ng-required="requireValue" ng-minlength="3" ng-maxlength="6" ng-pattern="matchPattern" />
注意，在 javascript 中，/\d+/ 表示一個正則表達式對象。
ng-change
如果你希望在編輯內容發生變化的時候，能夠立即獲得通知，以便進行自定義的處理，可以使用 ng-change，與標准 HTML 元素的 change 不同的是，在內容發生變化之后，這個表達式會被立即執行，而不是在用戶退出編輯的時候。
$scope.myIdChanged = function (model) { console.info(model); };
使用 ng-change
<input type="number" name="myId" ng-model="model.id" required ng-change="myIdChanged(model)" />
4. 驗證結果的樣式
當編輯項被驗證之后，angularjs 會跟據驗證的結果，為編輯項添加相應的樣式。
- .ng-pristine
- ng-dirty
- ng-valid
- ng-invalid
你可以通過這些樣式來修飾編輯項。
5. 顯示錯誤提示信息
可以將錯誤提示信息預先加入頁面相應的位置，默認不顯示出來，在沒有通過相應驗證的情況下，再顯示對應的錯誤提示信息。
ng-show 和 ng-hide 指令可以實現根據綁定表達式的結果來決定是否顯示元素內容。
ngShow 和ngHide 允許我們顯示或隱藏不同的元素。這有助於創建Angular應用時因為我們的單頁程序會有許多的移動部件隨着應用狀態的改變而來來去去。
這些指令的最偉大的部分就是我們不必使用CSS或者JS來操作顯示還是隱藏。這些都是由老練的Angular來完成。
<span ng-show="myForm.$invalid">表單驗證失敗</span>
5. 統一處理驗證的錯誤提示信息
可以寫一個函數統一處理所有的錯誤信息。
// 統一處理所有的錯誤提示信息 $scope.getErrorMessage = function (error) { if (angular.isDefined(error)) { if (error.required) { return "Please enter a value!"; } else if (error.email) { return "Please enter a valid email address!"; } } };
然后，在視圖中綁定這個函數
<span ng-show="myForm.$invalid">{{getErrorMessage(myForm.$error)}}</span>