摘要：表單驗證表單驗證是一項重要的功能，能保證我們的應用不會被惡意或錯誤的輸入破壞。給加上意味著表單的名稱是。驗證提示這是在版本之后對表單驗證的優(yōu)化。

表單驗證是angularJS一項重要的功能，能保證我們的web應用不會被惡意或錯誤的輸入破壞。Angular表單驗證提供了很多表單驗證指令，并且能將html5表單驗證功能同他自己的驗證指令結(jié)合起來使用，進而在客戶端驗證時提供表單狀態(tài)的實時反饋。

要使用表單驗證，首先保證表單有一個name屬性，一般的輸入字段如最大，最小長度等，這些功能由html5表單屬性提供，如果我們想屏蔽瀏覽器對表單的默認驗證行為，可以在表單元素上添加novalidate標記。

插入一段項目中注冊的表單實例

//HTML


    用戶注冊


    

        
        
    
    

        

            手機號或郵箱不能為空
        
        

            手機號或郵箱格式錯誤
        
        

            手機號或郵箱長度不超過20位
        
    


    

        

            
            獲取動態(tài)驗證碼
            
        
    
    

        

            驗證碼不能為空
        
        

            驗證碼長度不超過20位
        
    
    

        
        

            {{errorMessage}}
            登錄
        
    


    
    
    我明白并同意
    《橙色云設(shè)計服務(wù)條款》
    
    
        注冊
    



 //注冊 JS
 var registUrl = "/cds/w/user/register.do";
 $scope.saveInfor = function(form) {
     form.$submitted = true;
     if (!form.$valid) return;
     var param = {
         loginId: $scope.model.loginId,
         password: $scope.model.password
     };
     $resource(registUrl + "?" + $scope._urlParamEncode(param), null, {
         "registerUser": {
             method: "POST"
         }
     }).registerUser(param).$promise.then(function(result) {
         if (result.status === "success") {
             $window.location.href = "/cds/portal/index.html";
         } else {
             $scope.registerResultStatus = true;
             if (result.message && result.message.indexOf("已注冊") > 0) {
                 var htmlMsg = "您的郵箱|手機號已注冊，請直接";
                 //登錄
                 $scope.showLoginLinkFlag = true;
                 $scope.errorMessage = $sce.trustAsHtml(htmlMsg);
             } else {
                 $scope.errorMessage = result.message;
             }

         }
     });
 };


//登錄按鈕是否禁用（同意條框）
 $scope.agreeOrCanel = function() {
     var checkedState = $("#agree").attr("checked"); //記錄當前選中狀態(tài)
     if (checkedState == "checked") {
         $("#registerCustom").removeAttr("disabled");
     } else {
         $scope.agreeDisable = false;
         $("#registerCustom").attr("disabled", true);
     }
 }
 

代碼放上來了。可以下大致看一下，發(fā)現(xiàn)和之前使用的有何不同之處。

下面我們列舉表單中input元素上用到的驗證選項，比如：
1.必填項，設(shè)置某個表單輸入是否已經(jīng)填寫，只需要在輸入字段元素上添加require標記即可。

2.最小（大）長度，驗證表單輸入的文本長度是否大于某個最小值，可以使用ng-minlength指令（ng-maxlength指令）

3.模式匹配，使用ng-pattern來確保輸入匹配指定的正則表達式

4.電子郵件，只需要把input的類型設(shè)置為email即可
數(shù)字，只需要將input的類型設(shè)置為number

在實例中，我們用到的是收拾好和郵箱都可驗證登錄，所以在匹配上的正則做文章。如下

5.同樣我們也可以根據(jù)自定義的屬性指令來定義一些校驗規(guī)則，這里不做詳細介紹。上一段代碼吧。

app.directive("checkUsername", function($http) {
 return {
    link: function(scope, ele, attrs, c) {
        scope.$watch(attrs.ngModel, function(n) {
            if (!n) return;
            $http({
                method: "POST",
                url: "/api/check/" + attrs.username,
                data: {
                    field: attrs.username,
                    value: scope.ngModel
                }
        }).success(function(data) {
                //code
            }).error(function(data) {
                //code
            })
        });
    }
}

});

由于表單的屬性可以在其$scope對象中訪問到，而我們又可以直接訪問到$scope，因此js可以間接的訪問DOM的表單屬性，借助這些屬性，我們可以對表單做出實時響應。
這些屬性有：

1.未修改的表單，用來判斷用戶是否修改了表單，如果修改了則為true，未修改則為false。

loginForm.loginId.$pristine

2.修改過的表單，只要用戶修改過表單，無論輸入是否通過驗證，該值都將返回true

loginForm.loginId.$dirty

3.合法的表單，這個屬性是用來判斷表單的內(nèi)容是否合法的，如果合法則該屬性的值為true

loginForm.loginId.$valid

4.不合法的表單，這個屬性與上個屬性正好相反，如果不合法，則該屬性值為true

loginForm.password.$invalid

5.錯誤，$error對象包含了當前表單的所有驗證內(nèi)容，以及它們是否合法的信息，如果驗證失敗，該屬性值為true，如果驗證成功，則該值為false

loginForm.password.$error

6.表單的提交驗證。

loginForm.$submitted

給form加上name="loginForm"意味著表單的名稱是loginForm。如何使用loginForm,比如我們驗證表單是否被修改過loginForm.$submitted;

loginForm是$scope中的一個屬性

ng-class根據(jù)注冊狀態(tài)和提交狀態(tài)獲取不同樣式。

這是在angular1.3版本之后對angular表單驗證的優(yōu)化。它不再需要一個詳細的表達式狀態(tài)創(chuàng)建元素顯示或隱藏。看看項目中的代碼。

    

        手機號或郵箱不能為空
    
    

        手機號或郵箱格式錯誤
    
    

        手機號或郵箱長度不超過20位
    

可以看出，angular通過$error來監(jiān)視模型的變化，因為$error中包含了錯誤的詳細信息，
用ng-message=""綁定驗證類型。會根據(jù)$error錯誤類型提示錯誤信息。
同時，如果我們的應用場景中如果同時，有好幾處錯誤，那么，上面代碼按照ng-message的順序只會顯示一條錯誤信息，如果我們需要全部顯示出來只需要添加 ng-messages-multiple。

這里只做范例介紹，小伙伴們在項目中合理運用就好。