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

驗證功能是AngularJS里面最酷炫的功能之一，它可以讓你寫出一個具有良好用戶體驗的Web應用。

在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自帶的屬性驗證功能。

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

下面來看看我們可以在input中設置哪些驗證：

必填

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

<input type="text" required />

最小長度

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

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

最大長度

驗證至多輸入{number}個字符，使用指令ng-maxlength=“{number}”：

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

正則匹配

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

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

Email

驗證輸入是一個Email，設置input的type屬性為email：

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

數字

驗證輸入是一個數字，設置input的type屬性為number：

<input type="number" name="number" 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，表示沒有修改過：

formName.inputFieldName.$pristine;

修改的表單

當且用戶是否已經修改過表單：

formName.inputFieldName.$dirty

經過驗證的表單

表示否通過驗證：

formName.inputFieldName.$valid

未通過驗證的表單

表示否通過驗證。如果表單當前沒有通過驗證，他將為true：

formName.inputFieldName.$invalid

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

錯誤

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

formName.inputfieldName.$error

如果驗證失敗，則此屬性將是true的(因為length>0)。

控制驗證時的樣式

當AngularJS處理的驗證時，它將根據驗證的狀態增加一些特定的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;
}

 

全部放一起試試

讓我們編寫一個注冊表單。本申請表單將包括姓名，Email，以及用戶名。

 

讓我們定義一個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>
    <label>Your name</label>
    <input type="text" 
        placeholder="Name" 
        name="name" 
        ng-model="signup.name" 
        ng-minlength=3 
        ng-maxlength=20 required />
  </div>
</div>

 我們增加了一個名字為name的輸入框，並且將對象綁定在$scope對象的signup.name對象上（通過ng-model）。

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

讓我們用屬性來控制顯示還是隱藏錯誤信息。我們還將使用$dirty屬性，以確保當用戶沒有輸入字符前錯誤信息不會顯示：

<div class="row">
  <div>
    <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>

在之前，當輸入內容改變時它只能告訴我們我們輸入是否有效。現在，我們將看到當那些沒有通過的驗證時的錯誤信息。

讓我們接着看Email驗證:

<div class="row">          
  <div>
    <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>

這一次，我們增加了Email字段。請注意，我們設置了input的type屬性為email並且添加了$error.email錯誤信息。這是基於AngularJS的Email驗證（使用了HTML5屬性）。

最后，讓我們來看看在我們的最后一個驗證，用戶名：

<div>
  <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>

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

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

 現在，那個錯誤信息只將在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來進行驗證。

 

原文：Form validation with AngularJS (en)

注：原文有一些demo可供測試，若有需要請查看原文。