AngularJS中使用的表單驗證(轉)

本文轉載自查看原文 2013-11-15 15:39 4212 Javascript

(譯) AngularJS中使用的表單驗證

客戶端表單驗證是AngularJS里面最酷的功能之一。 AngularJS表單驗證可以讓你從一開始就寫出一個具有交互性和可相應的現代HTML5表單。

在AngularJS中，有許多表單驗證指令。在這里，我們將談談幾個最流行指令，然后我們將討論如何編寫自定義的驗證。

<form name="form">
  <label name="email">Your email</label>
  <input type="email" name="email" ng-model="email" placeholder="Email Address" />
</form>

AngularJS使得我們可以在不用額外努力的情況下輕松的處理客戶端表單驗證。雖然我們不能僅靠客戶端驗證來保持我們的Web應用程序的安全性，但他們提供了良好即時反饋到表單上。

要使用表單驗證，我們首先必須確保form標簽有一個name屬性，像上面的例子一樣。明白了嗎？太好了！

所有輸入字段可以進行一些基本的驗證，例如最小長度，最大長度，等等，這些都是HTML5標簽的屬性驗證。

通常需要在form標簽中加上novalidate屬性，這將禁用瀏覽器自帶的驗證功能，從而使用AngularJS提供的驗證。

讓我們來看看我們可以在input設置哪些驗證：

必填

驗證是否已輸入字符，只需在標簽上加上required：

<input type="text" required />

最小長度

驗證輸入至少輸入{number}個字符，使用AngularJS指令的ng-minlength=“{number}”：

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

最大長度

驗證輸入字符要小於等於{number}個字符，使用AngularJS指令的ng-maxlength=“{number}”：

<input type="text" ng-maxlength=20 />

正則匹配

要確保輸入匹配一個正則表達式，使用AngularJS的指令ng-pattern="/PATTERN/":

<input type="text" ng-pattern="/a-zA-Z/" />

Email

驗證輸入字符是一個電子郵件地址，只需設定input的type屬性為email，像這樣：

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

數字

驗證輸入字符是一個數字，同樣只需設定input的type屬性為number，像這樣：

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

Url

驗證輸入字符是一個URL地址，同樣只需設定input的type屬性為url，像這樣：

<input type="url" name="homepage" ng-model="user.facebook_url" />

自定義驗證

AngularJS可以很容易的使用指令來添加自定義驗證。例如，我們要驗證我們的用戶名是可用的（在數據庫中不重復）。要做到這一點，我們將實現一個指令，它在輸入字符變化時觸發一個Ajax請求：

var app = angular.module('validationExample', []);

app.directive('ensureUnique', ['$http', function($http) {
  return {
    require: 'ngModel',
    link: function(scope, ele, attrs, c) {
      scope.$watch(attrs.ngModel, function() {
        $http({
          method: 'POST',
          url: '/api/check/' + attrs.ensureUnique,
          data: {'field': attrs.ensureUnique}
        }).success(function(data, status, headers, cfg) {
          c.$setValidity('unique', data.isUnique);
        }).error(function(data, status, headers, cfg) {
          c.$setValidity('unique', false);
        });
      });
    }
  }
}]);

驗證表單狀態

AngularJS將DOM驗證的結果保存在$scope對象中。這使我們能夠實時做出一些響應。提供給我們的屬性有：

請注意，這是這個屬性的格式：

formName.inputFieldName.property

未修改過的表單

布爾值屬性，表示用戶是否修改了表單。如果為ture，表示沒有修改過；false表示修改過：

formName.inputFieldName.$pristine;

修改的表單

布爾型屬性，當且僅當用戶實際已經修改的表單。不管表單是否通過驗證：

formName.inputFieldName.$dirty

經過驗證的表單

布爾型屬性，它指示表單是否通過驗證。如果表單當前通過驗證，他將為true：

formName.inputFieldName.$valid

未通過驗證的表單

布爾型屬性，它指示表單是否通過驗證。如果表單當前沒有通過驗證，他將為true：

formName.inputFieldName.$invalid

最后兩個屬性在用於DOM元素的顯示或隱藏時是特別有用的。同時，如果要設置特定的class時，他們也非常有用的。

錯誤

另一個有用的屬性是AngularJS提供給我們的$error對象。這個對象包含input的每一個驗證是有效的還是無效的（一個集合）。為了訪問這個屬性，使用下面的語法：

formName.inputfieldName.$error

如果驗證失敗，則此屬性將是true的，而如果它是false的，那么該值通過驗證的。

無害的一些樣式

當AngularJS處理的表單驗證時，它將根據驗證的狀態增加一些特定的class屬性。這些class被命名為類似的屬性，我們可以檢查。

這些class是:

.ng-pristine {}
.ng-dirty {}
.ng-valid {}
.ng-invalid {}

這些class對應着其對應的驗證對象的結果。

當一個字段是無效的， .ng-invalid將被應用到這個字段上。我們可以通過css來設置這些class的樣式:

input.ng-invalid {
  border: 1px solid red;
}
input.ng-valid {
  border: 1px solid green;
}

全部放在一起

讓我們編寫一個注冊表單。本申請表單將包括這個人的名字，他們的電子郵件，以及所需的用戶名。

讓我們定義一個form表單:

<form name="signup_form" novalidate ng-submit="signupForm()">
  <fieldset>
    <legend>Signup</legend>

    <button type="submit" class="button radius">Submit</button>
  </fieldset>
</form>

這個表單的名字是signup_form ，當我們點擊提交時我們將調用signupForm()方法.

現在，讓我們添加用戶的Name屬性:

<div class="row">
  <div class="large-12 columns">
    <label>Your name</label>
    <input type="text" 
        placeholder="Name" 
        name="name" 
        ng-model="signup.name" 
        ng-minlength=3 
        ng-maxlength=20 required />
  </div>
</div>

首先我想說明我使用了 Foundation 作為我的css框架，所以你將在代碼中看到它的相關語法。我們增加了一個名字為name的輸入框，並且對象綁定在$scope對象的signup.name對象上（通過ng-model）。

我們還設置了幾個驗證。這些驗證分別是：我們必須有一個長度為3個或更多字符的名字。並且最大長度限制為20個字符（21或更多的個字符將是無效的）。最后，我們設置名稱應該是必填的。

當如果表單無效時，讓我們用屬性來控制顯示還是隱藏錯誤列表。我們還將使用$dirty屬性，以確保當用戶沒有輸入字符前錯誤提示不顯示：

<div class="row">
  <div class="large-12 columns">
    <label>Your name</label>
    <input type="text" 
        placeholder="Name" 
        name="name" 
        ng-model="signup.name" 
        ng-minlength=3 
        ng-maxlength=20 required />
   <div class="error" 
        ng-show="signup_form.name.$dirty && signup_form.name.$invalid">
    <small class="error" 
        ng-show="signup_form.name.$error.required">
        Your name is required.
    </small>
    <small class="error" 
            ng-show="signup_form.name.$error.minlength">
            Your name is required to be at least 3 characters
    </small>
    <small class="error" 
            ng-show="signup_form.name.$error.maxlength">
            Your name cannot be longer than 20 characters
    </small>
  </div>
  </div>
</div>

讓我們來看看接下來的驗證，一個電子郵件:

<div class="row">          
  <div class="large-12 columns">
    <label>Your email</label>
    <input type="email" 
      placeholder="Email" 
      name="email" 
      ng-model="signup.email" 
      ng-minlength=3 ng-maxlength=20 required />
    <div class="error" 
         ng-show="signup_form.email.$dirty && signup_form.email.$invalid">
      <small class="error" 
             ng-show="signup_form.email.$error.required">
             Your email is required.
      </small>
      <small class="error" 
             ng-show="signup_form.email.$error.minlength">
              Your email is required to be at least 3 characters
      </small>
      <small class="error" 
             ng-show="signup_form.email.$error.email">
             That is not a valid email. Please input a valid email.
      </small>
      <small class="error" 
             ng-show="signup_form.email.$error.maxlength">
              Your email cannot be longer than 20 characters
      </small>
    </div>
  </div>
</div>

這一次（包括整個表單），我們編寫電子郵件字段。請注意，我們設置了input的type屬性為email並且添加了$error.email錯誤信息。這是基於AngularJS的電子郵件驗證（使用HTML5的屬性）。

最后，讓我們來看看在我們的最后一個輸入框，用戶名：

<div class="large-12 columns">
  <label>Username</label>
    <input  type="text" 
            placeholder="Desired username" 
            name="username" 
            ng-model="signup.username" 
            ng-minlength=3 
            ng-maxlength=20 
            ensure-unique="username" required />
  <div class="error" ng-show="signup_form.username.$dirty && signup_form.username.$invalid">
    <small class="error" ng-show="signup_form.username.$error.required">Please input a username</small>
    <small class="error" ng-show="signup_form.username.$error.minlength">Your username is required to be at least 3 characters</small>
    <small class="error" ng-show="signup_form.username.$error.maxlength">Your username cannot be longer than 20 characters</small>
    <small class="error" ng-show="signup_form.username.$error.unique">That username is taken, please try another</small>
  </div>
</div>

在我們的最后一個字段，我們使用我們之前編寫的自定義驗證。這個自定義驗證使用的AngularJS指令：

app.directive('ensureUnique', ['$http', function($http) {
  return {
    require: 'ngModel',
    link: function(scope, ele, attrs, c) {
      scope.$watch(attrs.ngModel, function() {
        $http({
          method: 'POST',
          url: '/api/check/' + attrs.ensureUnique,
          data: {'field': attrs.ensureUnique}
        }).success(function(data, status, headers, cfg) {
          c.$setValidity('unique', data.isUnique);
        }).error(function(data, status, headers, cfg) {
          c.$setValidity('unique', false);
        });
      });
    }
  }
}]);

當表單輸入是有效的時，它將發送POST api/check/username請求到服務器來檢查用戶名是否可用。現在，很明顯，因為我們在這里只談論前端代碼，我們沒有為后端編寫測試，盡管很容易。

更新: 根據評論的意見，我已經加入了服務器超時檢查。要查看完整的源代碼，請點擊here。

最后，我們加上提交按鈕，我們可以使用ng-disabled指令來根據驗證是否有效控制按鈕的禁用和啟用：

<button type="submit" ng-disabled="signup_form.$invalid" class="button radius">Submit</button>

正如我們上面所說的，表單是否有效的屬性$invalid給我們提供了便利。

更新 2: 雖然立即驗證是很棒的，它可以立即提醒用戶，但是當他們正在輸入很長的能通過驗證的文字時，他們講在輸入中途看到錯誤提示。你可以更好的來處理這一點。當用戶點擊提交時，或者當他們將光標移開輸入框之后。讓我們來看看這2種方式。

點擊提交后顯示驗證信息

要在用戶試圖提交表單時顯示的驗證，你可以通過在scope中設置一個'submitted'值，並檢查該值來控制顯示錯誤。

例如，讓我們來看看第一個例子，只有在點擊提交表單時才顯示錯誤。使用ng-show指令來控制顯示，我們可以添加一個檢查，看是否已點擊提交按鈕：

<form name="signup_form" novalidate ng-submit="signupForm()">
  <fieldset>
    <legend>Signup</legend>
    <div class="row">
      <div class="large-12 columns">
        <label>Your name</label>
        <input type="text" 
            placeholder="Name" 
            name="name" 
            ng-model="signup.name" 
            ng-minlength=3 
            ng-maxlength=20 required />
       <div class="error" 
            ng-show="signup_form.name.$dirty && signup_form.name.$invalid && signup_form.submitted">
        <small class="error" 
            ng-show="signup_form.name.$error.required">
            Your name is required.
        </small>
        <small class="error" 
                ng-show="signup_form.name.$error.minlength">
                Your name is required to be at least 3 characters
        </small>
        <small class="error" 
                ng-show="signup_form.name.$error.maxlength">
                Your name cannot be longer than 20 characters
        </small>
      </div>
      </div>
    </div>
    <button type="submit" class="button radius">Submit</button>
  </fieldset>
</form>

現在，那個錯誤信息的div只將在signup_form.submitted為true時顯示。我們可以這樣實現這個signupForm方法：

app.controller('signupController', ['$scope', function($scope) {
  $scope.submitted = false;
  $scope.signupForm = function() {
    if ($scope.signup_form.$valid) {
      // Submit as normal
    } else {
      $scope.signup_form.submitted = true;
    }
  }
}]);

現在，當用戶嘗試提交表單並且同時有一個無效的元素時，你可以捕獲它，並告訴他們錯誤的原因。

當時去焦點時驗證錯誤

如果你想保留錯誤驗證的實時性，那么可以在用戶離開該輸入框時顯示錯誤信息。要做到這一點，我們可以添加一個指令，將添加一個新的變量。

我們使用ngFocus指令，它看起來像：

app.directive('ngFocus', [function() {
  var FOCUS_CLASS = "ng-focused";
  return {
    restrict: 'A',
    require: 'ngModel',
    link: function(scope, element, attrs, ctrl) {
      ctrl.$focused = false;
      element.bind('focus', function(evt) {
        element.addClass(FOCUS_CLASS);
        scope.$apply(function() {ctrl.$focused = true;});
      }).bind('blur', function(evt) {
        element.removeClass(FOCUS_CLASS);
        scope.$apply(function() {ctrl.$focused = false;});
      });
    }
  }
}]);

要使用ngFocus，我們只需要簡單加上這個指令到輸入框元素上，像這樣：

<input ng-class="{error: signup_form.name.$dirty && signup_form.name.$invalid}" type="text" placeholder="Name" name="name" ng-model="signup.name" ng-minlength=3 ng-maxlength=20 required ng-focus />

加上ngFocus指令后，將在輸入框的blur和focus事件中注冊相應操作，當焦點在該輸入框時，它添加一個class（ng-focused），並且該輸入框的$focused屬性也將變為true。因此，你可以根據需求是否在焦點上來個性化設置顯示錯誤消息。例如：

<div class="error" ng-show="signup_form.name.$dirty && signup_form.name.$invalid && !signup_form.name.$focused">

我希望這篇文章可以告訴你如何的很酷的使用AngularJS來進行表單驗證。