摘要：在自定義的指令中，我們可以添加我們的驗證方法到的對象上。驗證碼在表單不合法時禁用提交按鈕提交保存成功判斷手機號是否重復驗證兩次輸入的密碼是否相同的自定義驗證當值為空時，通過驗證，因為有

Angular實現了大部分常用的HTML5的表單控件的類型(text, number, url, email, date, radio, checkbox)，也實現了很多指令做為驗證(required, pattern, minlength, maxlength, min, max)。
在自定義的指令中，我們可以添加我們的驗證方法到ngModelController的$validators對象上。為了取得這個controller對象，我們需要requirengModel指令。
在$validators對象上的每個方法都接收modelValue和viewValue兩個值做為參數。在你綁定的驗證方法返回一個值(true,false)之后，Angular會在內部調用$setValidity方法。驗證會在每一次輸入框的值改變($setViewValue被調用)或者模型的值改變。驗證發生在$parsers和$formatters成功運行之后，驗證不通過的項會做為ngModelController.$error的屬性存儲起來。
另外，在這個controller對象上，還有一個$asyncValidators對象，如果你的驗證是異步的，則需要加驗證附加在這個對象上，比如說用戶注冊時輸入手機號，我們需要在后端驗證該手機號是否已經注冊，這個驗證方法必須return一個promise對象，然后在驗證通過時調用延遲對象的resolve，失敗時調用reject，還未完成的異步的驗證存儲在ngModelController.$pending中。

例如(注意其中的user對象，只有驗證通過了，才會將值綁定到模型上):

  
    
  
          
            手機號(不能重復):  
          
          
    
  
    
  
          
            用戶名(必須大于五位):  
          
          
    
  
    提交  
  
用戶對象
  
  
    {{ user | json }}  
  

"use strict";  
angular.module("app", [])  
  
.directive("phone", function ($q, $http) {  
    return {  
        require: "ngModel",  
        link: function (scope, ele, attrs, ctrl) {  
            ctrl.$asyncValidators.phone = function (modelValue, viewValue) {  
                var d = $q.defer();  
                $http.get("phone.json")  
                .success(function (phoneList) {  
                    if (phoneList.indexOf(parseInt(modelValue)) >= 0) {  
                        d.reject();  
                    } else {  
                        d.resolve();  
                    }  
                });  
                return d.promise;  
            }  
        }  
    }  
})  
  
.directive("username", function ($q, $http) {  
    return {  
        require: "ngModel",  
        link: function (scope, ele, attrs, ctrl) {  
            ctrl.$validators.username = function (modelValue, viewValue) {  
                if (modelValue) {  
                    return modelValue.length > 5 ? true : false;  
                };  
                return false;  
            }  
        }  
    }  
})  

[  
    13758262732,  
    15658898520,  
    13628389818,  
    18976176895,  
    13518077986  
]  

效果:

下面一個完整的用戶注冊的表單驗證:
html:

  
            
  
                用戶名:  
  
                  
                  
                  
            
  
            
  
                請注意！  
                用戶名不能帶#號。  
            
  
            
  
                請注意！  
                用戶名不能為空。  
            
  
            
  
                密碼:  
  
                  
                  
                  
            
  
            
  
                請注意！  
                密碼長度不能少于八位。  
            
  
            
  
                請注意！  
                密碼不能為空。  
            
  
            
  
                確認密碼:  
                  
                  
            
  
            
  
                請注意！  
                兩次輸入的密碼不相同。  
            
  
            
  
                請注意！  
                請再次輸入密碼。  
            
  
            
  
                手機號:  
                
  
                    
  
                          
                    
  
                    
  
                        發送驗證碼  
                    
  
                
  
                  
            
  
            
  
                請注意！  
                該手機號已注冊過，可直接登錄。  
            
  
            
  
                請注意！  
                請輸入正確的手機號。  
            
  
            
  
                驗證碼:  
                  
                  
            
  
  
              
            提交  
        
  

"use strict";  
angular.module("app", [])  
.controller("myCtrl", function ($scope) {  
    $scope.data = {};  
    $scope.save = function () {  
        alert("保存成功！")  
    }  
})  
  
// 判斷手機號是否重復  
.directive("phone", function ($q, $http) {  
    return {  
        require: "ngModel",  
        link: function (scope, ele, attrs, ctrl) {  
            ctrl.$asyncValidators.phone = function (modelValue, viewValue) {  
                var d = $q.defer();  
                $http.get("phone.json")  
                .success(function (phoneList) {  
                    if (phoneList.indexOf(parseInt(modelValue)) >= 0) {  
                        d.reject();  
                    } else {  
                        d.resolve();  
                    }  
                });  
                return d.promise;  
            }  
        }  
    }  
})  
  
// 驗證兩次輸入的密碼是否相同的自定義驗證  
.directive("pwdRepeat", function () {  
    return {  
        require: "ngModel",  
        link: function (scope, ele, attrs, ctrl) {  
  
            ctrl.$validators.pwdRepeat = function (modelValue) {  
  
                // 當值為空時，通過驗證，因為有required  
                if (ctrl.$isEmpty(modelValue)) {  
                    return true;  
                }  
  
                return modelValue === scope.data._password ? true : false;  
            }  
        }  
    }  
})  

form-group {  
    position: relative;  
}  
.right {  
    position: absolute;  
    right: 10px;  
    top: 34px; 
    color: green";
}