AngularJS實作表單驗證_AngularJS

雖然我不是前端程式設計師，但明白前端做好驗證是多麼重要。

因為這樣後端就可以多喘口氣了，而且比起後端什麼的果然還是前端可以提高用戶的幸福感。

AngularJS提供了很方便的表單驗證功能，在此記錄一番。

先從下面這段程式碼開始

複製程式碼 程式碼如下:

   

Email:
       
       
            Email is required.
            Invalid email address.
       
   

   

       
   

<script><br /> angular.module('myApp',[])<br /> .controller('validationController', ['$scope',function($scope) {<br />     $scope.user = 'Kavlez';<br />     $scope.email = <a href="mailto:'sweet_dreams@aliyun.com'">'sweet_dreams@aliyun.com';<br /> }]);<br /> </script>

input標籤的一些驗證選項，通常和HTML5標記搭配使用。

必填

長度

使用指令ng-minlength/ng-maxlength

特定格式
例如電子郵件、URL、數字，將type設定為對應類型即可，例如：

複製程式碼 程式碼如下:

模式匹配

使用指令ng-pattern，例如：

複製程式碼 程式碼如下:

表單屬性，透過這些屬性可以更容易地對表單進行操作

pristine/dirty
表示是否已修改，例如

複製程式碼 程式碼如下:

    {{mainForm.userEmail.$pristine}}
    {{mainForm.userEmail.$dirty}}

以formName.fieldName.$pristine方式訪問，input必須有ng-model聲明。

複製程式碼 程式碼如下:

valid/invalid

表示是否通過驗證。

複製程式碼 程式碼如下:

$error

表單驗證訊息，驗證不通過時傳回對應訊息。

AngularJS為表單狀態提供了相應地css class

複製程式碼 程式碼如下:

.ng-pristine
.ng-dirty
.ng-valid
.ng-invalid

例如，讓驗證通過為綠色，失敗為紅色:

複製程式碼 程式碼如下:

input.ng-valid {
    color: green;
}
input.ng-invalid {
    color: green;
}

給的例子中僅是一個email的驗證就寫了這麼多，如果再加幾個field，再加幾種不同的提示，再加上幾個事件，程式碼會變得雜亂不堪。

事實上不建議這樣做，我們有更好的方法。
就是使用angular-messages.js

首先，不要忘了這兩步

複製程式碼 程式碼如下:

angular.module('myApp', ['ngMessages'])

好，先用ng-messages和ng-message替換掉那些重複的東西，上面的例子變成:

複製程式碼 程式碼如下:

   

Email:
                type="email" name="email" ng-model="myEmail" ng-minlength="3" ng-maxlength="50" required />
       

           

Email is required.

           

Invalid email address.

           

min length 10

           

max length 50

       

   
   

       
   

功能上沒有任何變化，只是把重複的程式碼全部去掉了。
注意區分ng-messasges和ng-message，有沒有感覺有點像with()? 後面的ng-messages-multiple，這裡用作同時讓多個提示出現。

但這樣還是不夠好，就算省去了ng-message中的內容，但是多個field中都存在required驗證時仍然會有重複。
而且，如果不同頁面中的表單都涉及相同的內容時重複的驗證提示會越來越多。
為了解決這個問題，我們可以使用ng-messages-include指令。
這個指令用來引用模板，例如上面的例子變成:

複製程式碼 程式碼如下:

   

Email:
                type="email" name="email" ng-model="myEmail" ng-minlength="3" ng-maxlength="50" required />
       

       

   
   

       
   

並不複雜，我們再加點東西。
為了讓提示更友善(?)一些，我們試試實現遊標離開後出現提示的效果。
這時候用指令(directive)會方便很多，這裡先涉及一點和指令相關的內容。

先運作起來再說:

複製程式碼 程式碼如下:

var myApp = angular.module('myApp',[])
    .controller('validationController', ['$scope',function($scope) {
        $scope.user = 'Kavlez';
        $scope.email = 'sweet_dreams@aliyun.com';
    }])
    .directive('hintOnBlur', [function() {
        return {
            require: 'ngModel',
            link: function(scope, element, attrs, ctrl) {
                ctrl.focused = false;
                element.bind('focus', function(evt) {
                    scope.$apply(function() {ctrl.focused = true;});
                }).bind('blur', function(evt) {
                    scope.$apply(function() {ctrl.focused = false;});
                });
            }
        }
    }]);

此處我們用focused來判斷遊標是否在某個屬性上，當使用了hintOnBlur指令的物件上發生focus或blur事件時focused的狀態改變。

表單也跟著改變一下，使用方法如下:

複製程式碼 程式碼如下:

   

Email:
       

       

   
   

       
   

在ng-show中再加入對focused的判斷，false時出現提示。

現在看起來像那麼回事了。
自訂驗證方式與有效性(validity)，這也用到指令(directive)。
驗證填寫的email是否已佔用，這裡簡單模擬一下:

複製程式碼 程式碼如下:

.directive('isAlreadyTaken', function() {
    返回{
        要求：'ngModel'，
        連結：函數（範圍、ele、attrs、ctrl）{
            ctrl.$parsers.push(function(val) {
                ctrl.$setValidity('emailAvailable', false);
                var emailTable = [
                    'K@gmail.com'，
                    'a@gmail.com',
                    'v@gmail.com'，
                    'l@gmail.com',
                    'e@gmail.com'，
                    'z@gmail.com'];
                for (var i=0;i                     if(val==emailTable[i])
                        返回；
                ctrl.$setValidity('emailAvailable', true);
                傳回值；
            })
        }
    }
})

輸入元素中加上is-already-taken屬性，並且加上一個ng-message:

複製程式碼程式碼如下：

已被佔用！