摘要：在自定義的指令中，我們可以添加我們的驗(yàn)證方法到的對象上。驗(yàn)證碼在表單不合法時(shí)禁用提交按鈕提交保存成功判斷手機(jī)號是否重復(fù)驗(yàn)證兩次輸入的密碼是否相同的自定義驗(yàn)證當(dāng)值為空時(shí)，通過驗(yàn)證，因?yàn)橛?/p>

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

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

  
    
  
          
            手機(jī)號(不能重復(fù)):  
          
          
    
  
    
  
          
            用戶名(必須大于五位):  
          
          
    
  
    提交  
  
用戶對象
  
  
    {{ 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  
]  

效果:

下面一個(gè)完整的用戶注冊的表單驗(yàn)證:
html:

  
            
  
                用戶名:  
  
                  
                  
                  
            
  
            
  
                請注意！  
                用戶名不能帶#號。  
            
  
            
  
                請注意！  
                用戶名不能為空。  
            
  
            
  
                密碼:  
  
                  
                  
                  
            
  
            
  
                請注意！  
                密碼長度不能少于八位。  
            
  
            
  
                請注意！  
                密碼不能為空。  
            
  
            
  
                確認(rèn)密碼:  
                  
                  
            
  
            
  
                請注意！  
                兩次輸入的密碼不相同。  
            
  
            
  
                請注意！  
                請?jiān)俅屋斎朊艽a。  
            
  
            
  
                手機(jī)號:  
                
  
                    
  
                          
                    
  
                    
  
                        發(fā)送驗(yàn)證碼  
                    
  
                
  
                  
            
  
            
  
                請注意！  
                該手機(jī)號已注冊過，可直接登錄。  
            
  
            
  
                請注意！  
                請輸入正確的手機(jī)號。  
            
  
            
  
                驗(yàn)證碼:  
                  
                  
            
  
  
              
            提交  
        
  

"use strict";  
angular.module("app", [])  
.controller("myCtrl", function ($scope) {  
    $scope.data = {};  
    $scope.save = function () {  
        alert("保存成功！")  
    }  
})  
  
// 判斷手機(jī)號是否重復(fù)  
.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;  
            }  
        }  
    }  
})  
  
// 驗(yàn)證兩次輸入的密碼是否相同的自定義驗(yàn)證  
.directive("pwdRepeat", function () {  
    return {  
        require: "ngModel",  
        link: function (scope, ele, attrs, ctrl) {  
  
            ctrl.$validators.pwdRepeat = function (modelValue) {  
  
                // 當(dāng)值為空時(shí)，通過驗(yàn)證，因?yàn)橛衦equired  
                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";
}