Reference: http://www.tuicool.com/articles/2Qbiqi
客戶端表單驗證是AngularJS里面最酷的功能之一。 AngularJS表單驗證可以讓你從一開始就寫出一個具有交互性和可相應的現代HTML5表單。
在AngularJS中，有許多表單驗證指令。在這里，我們將談談幾個最流行指令，然后我們將討論如何編寫自定義的驗證。
<form name="form"> <label name="email">Your email</label> <input type="email" name="email" ng-model="email" placeholder="Email Address" /> </form>
AngularJS使得我們可以在不用額外努力的情況下輕松的處理客戶端表單驗證。雖然我們不能僅靠客戶端驗證來保持我們的Web應用程序的安全性，但他們提供了良好即時反饋到表單上。
要使用表單驗證，我們首先必須確保 form 標簽有一個 name 屬性，像上面的例子一樣。明白了嗎？太好了！
所有輸入字段可以進行一些基本的驗證，例如最小長度，最大長度，等等，這些都是HTML5標簽的屬性驗證。
通常需要在 form 標簽中加上 novalidate 屬性， 這將禁用瀏覽器自帶的驗證功能，從而使用AngularJS提供的驗證。
讓我們來看看我們可以在input設置哪些驗證：
必填
驗證是否已輸入字符，只需在標簽上加上 required ：
<input type="text" required />
最小長度
驗證輸入至少輸入{number}個字符，使用AngularJS指令的 ng-minlength=“{number}” ：
<input type="text" ng-minlength=5 />
最大長度
驗證輸入字符要小於等於{number}個字符，使用AngularJS指令的 ng-maxlength=“{number}” ：
<input type="text" ng-maxlength=20 />
正則匹配
要確保輸入匹配一個正則表達式，使用AngularJS的指令 ng-pattern="/PATTERN/" :
<input type="text" ng-pattern="/a-zA-Z/" />
驗證輸入字符是一個電子郵件地址，只需設定 input 的 type 屬性為 email ，像這樣：
<input type="email" name="email" ng-model="user.email" />
數字
驗證輸入字符是一個數字，同樣只需設定 input 的 type 屬性為 number ，像這樣：
<input type="number" name="email" ng-model="user.age" />
Url
驗證輸入字符是一個URL地址，同樣只需設定 input 的 type 屬性為 url ，像這樣：
<input type="url" name="homepage" ng-model="user.facebook_url" />
自定義驗證
AngularJS可以很容易的使用指令來添加自定義驗證。例如，我們要驗證我們的用戶名是可用的（在數據庫中不重復）。要做到這一點，我們將實現一個指令，它在輸入字符變化時觸發一個Ajax請求：
var app = angular.module('validationExample', []); app.directive('ensureUnique', ['$http', function($http) { return { require: 'ngModel', link: function(scope, ele, attrs, c) { scope.$watch(attrs.ngModel, function() { $http({ method: 'POST', url: '/api/check/' + attrs.ensureUnique, data: {'field': attrs.ensureUnique} }).success(function(data, status, headers, cfg) { c.$setValidity('unique', data.isUnique); }).error(function(data, status, headers, cfg) { c.$setValidity('unique', false); }); }); } } }]);
驗證表單狀態
AngularJS將DOM驗證的結果保存在$scope對象中。這使我們能夠實時做出一些響應。提供給我們的屬性有：
請注意，這是這個屬性的格式：
formName.inputFieldName.property
未修改過的表單
布爾值屬性，表示用戶是否修改了表單。如果為 ture ，表示沒有修改過； false 表示修改過：
formName.inputFieldName.$pristine;
修改的表單
布爾型屬性，當且僅當用戶實際已經修改的表單。不管表單是否通過驗證：
formName.inputFieldName.$dirty
經過驗證的表單
布爾型屬性，它指示表單是否通過驗證。如果表單當前通過驗證，他將為 true ：
formName.inputFieldName.$valid
未通過驗證的表單
布爾型屬性，它指示表單是否通過驗證。如果表單當前沒有通過驗證，他將為 true：
formName.inputFieldName.$invalid
最后兩個屬性在用於DOM元素的顯示或隱藏時是特別有用的。同時，如果要設置特定的class時，他們也非常有用的。
錯誤
另一個有用的屬性是AngularJS提供給我們的$error對象。這個對象包含 input 的每一個驗證是有效的還是無效的（一個集合）。為了訪問這個屬性，使用下面的語法：
formName.inputfieldName.$error
如果驗證失敗，則此屬性將是true的，而如果它是false的，那么該值通過驗證的。
無害的一些樣式
當AngularJS處理的表單驗證時，它將根據驗證的狀態增加一些特定的class屬性。這些class被命名為類似的屬性，我們可以檢查。
.ng-pristine {}
.ng-dirty {} .ng-valid {} .ng-invalid {}
這些class對應着其對應的驗證對象的結果。
當一個字段是無效的， .ng-invalid 將被應用到這個字段上。我們可以通過css來設置這些class的樣式:
input.ng-invalid { border: 1px solid red; } input.ng-valid { border: 1px solid green; }
全部放在一起
讓我們編寫一個注冊表單。本申請表單將包括這個人的名字，他們的電子郵件，以及所需的用戶名。
讓我們定義一個 form 表單:
<form name="signup_form" novalidate ng-submit="signupForm()"> <fieldset> <legend>Signup</legend> <button type="submit" class="button radius">Submit</button> </fieldset> </form>
這個表單的名字是 signup_form ，當我們點擊提交時我們將調用 signupForm()方法 .
現在，讓我們添加用戶的 Name 屬性:
<div class="row"> <div class="large-12 columns"> <label>Your name</label> <input type="text" placeholder="Name" name="name" ng-model="signup.name" ng-minlength=3 ng-maxlength=20 required /> </div> </div>
首先我想說明我使用了 Foundation 作為我的css框架，所以你將在代碼中看到它的相關語法。 我們增加了一個名字為name的輸入框，並且對象綁定在 $scope 對象的signup.name 對象上（通過ng-model）。
我們還設置了幾個驗證。這些驗證分別是：我們必須有一個長度為3個或更多字符的名字。並且最大長度限制為20個字符（21或更多的個字符將是無效的）。最后，我們設置名稱應該是必填的。
當如果表單無效時，讓我們用屬性來控制顯示還是隱藏錯誤列表。我們還將使用 $dirty 屬性，以確保當用戶沒有輸入字符前錯誤提示不顯示：
<div class="row"> <div class="large-12 columns"> <label>Your name</label> <input type="text" placeholder="Name" name="name" ng-model="signup.name" ng-minlength=3 ng-maxlength=20 required /> <div class="error" ng-show="signup_form.name.$dirty && signup_form.name.$invalid"> <small class="error" ng-show="signup_form.name.$error.required"> Your name is required. </small> <small class="error" ng-show="signup_form.name.$error.minlength"> Your name is required to be at least 3 characters </small> <small class="error" ng-show="signup_form.name.$error.maxlength"> Your name cannot be longer than 20 characters </small> </div> </div> </div>
讓我們來看看接下來的驗證，一個電子郵件:
<div class="row"> <div class="large-12 columns"> <label>Your email</label> <input type="email" placeholder="Email" name="email" ng-model="signup.email" ng-minlength=3 ng-maxlength=20 required /> <div class="error" ng-show="signup_form.email.$dirty && signup_form.email.$invalid"> <small class="error" ng-show="signup_form.email.$error.required"> Your email is required. </small> <small class="error" ng-show="signup_form.email.$error.minlength"> Your email is required to be at least 3 characters </small> <small class="error" ng-show="signup_form.email.$error.email"> That is not a valid email. Please input a valid email. </small> <small class="error" ng-show="signup_form.email.$error.maxlength"> Your email cannot be longer than 20 characters </small> </div> </div> </div>