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

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

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

插入一段項(xiàng)目中注冊(cè)的表單實(shí)例

//HTML


    用戶注冊(cè)


    

        
        
    
    

        

            手機(jī)號(hào)或郵箱不能為空
        
        

            手機(jī)號(hào)或郵箱格式錯(cuò)誤
        
        

            手機(jī)號(hào)或郵箱長(zhǎng)度不超過20位
        
    


    

        

            
            獲取動(dòng)態(tài)驗(yàn)證碼
            
        
    
    

        

            驗(yàn)證碼不能為空
        
        

            驗(yàn)證碼長(zhǎng)度不超過20位
        
    
    

        
        

            {{errorMessage}}
            登錄
        
    


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



 //注冊(cè) 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("已注冊(cè)") > 0) {
                 var htmlMsg = "您的郵箱|手機(jī)號(hào)已注冊(cè)，請(qǐng)直接";
                 //登錄
                 $scope.showLoginLinkFlag = true;
                 $scope.errorMessage = $sce.trustAsHtml(htmlMsg);
             } else {
                 $scope.errorMessage = result.message;
             }

         }
     });
 };


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

代碼放上來了?？梢韵麓笾驴匆幌?，發(fā)現(xiàn)和之前使用的有何不同之處。

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

2.最?。ù螅╅L(zhǎng)度，驗(yàn)證表單輸入的文本長(zhǎng)度是否大于某個(gè)最小值，可以使用ng-minlength指令（ng-maxlength指令）

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

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

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

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

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對(duì)象中訪問到，而我們又可以直接訪問到$scope，因此js可以間接的訪問DOM的表單屬性，借助這些屬性，我們可以對(duì)表單做出實(shí)時(shí)響應(yīng)。
這些屬性有：

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

loginForm.loginId.$pristine

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

loginForm.loginId.$dirty

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

loginForm.loginId.$valid

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

loginForm.password.$invalid

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

loginForm.password.$error

6.表單的提交驗(yàn)證。

loginForm.$submitted

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

loginForm是$scope中的一個(gè)屬性

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

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

    

        手機(jī)號(hào)或郵箱不能為空
    
    

        手機(jī)號(hào)或郵箱格式錯(cuò)誤
    
    

        手機(jī)號(hào)或郵箱長(zhǎng)度不超過20位
    

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

這里只做范例介紹，小伙伴們?cè)陧?xiàng)目中合理運(yùn)用就好。