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

時間 2019-11-18

原文原文鏈接

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

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

在AngularJS中，有許多表單驗證指令。在這裏，咱們將談談幾個最流行指令，而後咱們將討論如何編寫自定義的驗證。html

<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屬性，像上面的例子同樣。明白了嗎？太好了！git

全部輸入字段能夠進行一些基本的驗證，例如最小長度，最大長度，等等，這些都是HTML5標籤的屬性驗證。github

一般須要在form標籤中加上novalidate屬性，這將禁用瀏覽器自帶的驗證功能，從而使用AngularJS提供的驗證。正則表達式

讓咱們來看看咱們能夠在input設置哪些驗證：數據庫

必填

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

<input type="text" required />

最小長度

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

<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來進行表單驗證。

(譯) 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 />