angularJS中的表單驗證（包括自定義驗證）

時間 2019-11-12

原文原文鏈接

表單驗證是angularJS一項重要的功能，能保證咱們的web應用不會被惡意或錯誤的輸入破壞。Angular表單驗證提供了不少表單驗證指令，而且能將html5表單驗證功能同他本身的驗證指令結合起來使用，進而在客戶端驗證時提供表單狀態的實時反饋。html

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

表單基本格式以下：web

<form name="form" novalidate>
        <label for="email">你的郵箱：</label>
        <input type="email" name="email" id="email" ng-model="user.email" placeholder="郵箱地址">
</form>

固然在input元素上還可使用不少驗證選項，好比：
1.必填項，設置某個表單輸入是否已經填寫，只須要在輸入字段元素上添加require標記便可。正則表達式

<input type="text" required>

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

<input type="text" ng-minlength="5" ng-maxlength>

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

<input type="text"  ng-pattern="/^[a-zA-Z]$/">

4. 電子郵件，只須要把input的類型設置爲email便可app

<input type="email" name="email" ng-model="user.email" >

5.數字，只須要將input的類型設置爲numberui

<input type="number" name="age" ng-model="user.age">

6.URL，將input的類型設置爲urlurl

<input type="url" name="homepage" ng-modle="user.url">

7.自定義驗證，在實際項目中咱們一般會遇到比較複雜的驗證，這時咱們能夠採用自定義驗證。自定義驗證使用的是自定義指令的方式，處理表單輸入的內容，將結果轉化爲布爾值從而進行驗證。好比咱們須要向後臺請求數據來判斷用戶名是否有效：spa

Html：

<input type="text" placeholder="username" name="usrename" ng-model="user.username" check-username="username">

自定義指令部分：（只是一個簡單的勢力）

app.directive('checkUsername', function($http){

                            return {

                                     require: 'ngModel',

                                     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){

                                                                 c.$setValidity('unique', data.isUnique);

                                                        }).error(function(data){

                                                                 c.$setValidity('unique', false);

                                                        })

                                               });

                                     }

                            }

                   });