AngularJS 的表單驗證

時間 2019-11-24

標籤 angularjs 表單驗證欄目 AngularJS 简体版

原文原文鏈接

最近開始學習angularjs，學到表單驗證的時候發現有必要學習下大神的好文章：javascript

轉：http://www.oschina.net/translate/angularjs-form-validationcss

今天咱們未來看看Angular如何幫助作表單驗證. 咱們將討論更多使用angular進行有關表單操做的東西（就像咱們另外的一篇文章: 提交Ajax表單：AngularJS的方式). 不過不用擔憂，那篇文章不必定要讀的.html

咱們將重點放在客戶端驗證上，並使用Angular內置的表單屬性。這裏有一個 demo.java

需求

Name 必填git
Username 非必填，最小長度3，最大長度8angularjs
Email 非必填，但必須是合法的emailgithub
驗證未經過的表單不能提交ajax
顯示一個必填或者非法email格式的錯誤信息express
若是正確提交就彈出一個祝賀信息bootstrap

如今知道咱們的目標了吧，讓咱們一塊兒來構建這個東西吧.

Angular 的表單屬性 $valid, $invalid, $pristine, $dirty

Angular 提供了有關表單的屬性來幫助咱們驗證表單. 他們給咱們提供了各類有關一個表單及其輸入的信息，而且應用到了表單和輸入.

屬性類		描述
$valid	ng-valid	Boolean 告訴咱們這一項當前基於你設定的規則是否驗證經過
$invalid	ng-invalid	Boolean 告訴咱們這一項當前基於你設定的規則是否驗證未經過
$pristine	ng-pristine	Boolean 若是表單或者輸入框沒有使用則爲True
$dirty	ng-dirty	Boolean 若是表單或者輸入框有使用到則爲True

Angular 也提供了有關表單及其輸入框的類，以便你可以依據每個狀態設置其樣式.

訪問表單屬性

方位表單: <form name>.<angular property>
訪問一個輸入框: <form name>.<input name>.<angular property>

設置咱們的表單

咱們將使用一個簡單的表單來作演示.

咱們將須要兩個文件:

index.html 咱們用來顯示錶單的代碼
app.js 咱們的Angular應用程序和控制器 (幾乎沒有任何代碼)

Our Form Code index.html

這裏列出了一些關鍵點:

novalidate: 它將會組織默認的HTML5驗證，由於這會由咱們本身來作(咱們本身的將會更棒)
咱們在輸入框上應用了ng-model，以便未來自表單的數據綁定到angular變量
username上的ng-minlength 和 ng-maxlength會本身建立其規則
name 輸入框是必填的
email 輸入框有屬性 type=」email」

驗證規則

Angular 有不少驗證規則，像是 tong-min leng than dng-max length.

Angular還能夠本身配置規則. Angular輸入指引上有說明 .

<input
   ng-model="{ string }"
   name="{ string }"
   required
   ng-required="{ boolean }"
   ng-minlength="{ number }"
   ng-maxlength="{ number }"
   ng-pattern="{ string }"
   ng-change="{ string }">
</input>

如今建好了表單, 接着建立Angular應用和控制器，ng-app ng-控制器.

應用的 Codeapp.js

// app.js
// create angular app
var validationApp = angular.module('validationApp', []);
 
// create angular controller
validationApp.controller('mainController', function($scope) {
 
    // function to submit the form after all validation has occurred            
    $scope.submitForm = function(isValid) {
 
        // check to make sure the form is completely valid
        if (isValid) {
            alert('our form is amazing');
        }
 
    };
 
});

使HTML5驗證器的novalidate

咱們將在咱們的表單使用novalidate。這是一個很好的作法，由於咱們將會本身處理驗證。若是咱們讓咱們的表單這樣作，它看起來很醜陋。

禁用提交按鈕 ng-disabled

如今真正的好戲上演了。咱們開始使用Angular的屬性 。首先讓咱們禁用咱們的提交按鈕。若是咱們的表單是$invalid的，咱們只想禁用它。

<!-- index.html -->
...
 
    <!-- SUBMIT BUTTON -->
    <button type="submit" class="btn btn-primary" ng-disabled="userForm.$invalid">Submit</button>
 
...

只使用一點代碼（ng-disabled），若是咱們的表單是$invalid的，表單按鈕將被禁用。這意味着，咱們的name input 字段是必需的，而且email input字段須要一個有效的電子郵件。

用 eng-show顯示錯誤信息

ng-valid 和ng-invalid 會基於提供的表單規則自動驗證輸入的有效性.

我們在輸入部分加一些錯誤信息，只要不等於$valid或是已經使用過的就行 (不能展現還沒使用).

<!-- index.html -->
...
 
    <!-- NAME -->
    <div class="form-group">
        <label>Name</label>
        <input type="text" name="name" class="form-control" ng-model="name" required>
        <p ng-show="userForm.name.$invalid && !userForm.name.$pristine" class="help-block">You name is required.</p>
    </div>
 
    <!-- USERNAME -->
    <div class="form-group">
        <label>Username</label>
        <input type="text" name="username" class="form-control" ng-model="user.username" ng-minlength="3" ng-maxlength="8">
        <p ng-show="userForm.username.$error.minlength" class="help-block">Username is too short.</p>
        <p ng-show="userForm.username.$error.maxlength" class="help-block">Username is too long.</p>
    </div>
     
    <!-- EMAIL -->
    <div class="form-group">
        <label>Email</label>
        <input type="email" name="email" class="form-control" ng-model="email">
        <p ng-show="userForm.email.$invalid && !userForm.email.$pristine" class="help-block">Enter a valid email.</p>
    </div>
 
...

就像這樣 Angular 會根據規則來驗證輸入部分的$invalid 和 $pristine properties屬性從而決定是否顯示錯誤信息.

格局類

Angular在驗證輸入或表單時的有效有否是已經提供了一些類，像是 (ng-valid,ng-invalid,ng-pristineandng-dirty).

你能夠編輯本身喜歡的CSS . 你能夠私有定製化這些類來實現特定的場景應用.

.ng-valid         {  }
.ng-invalid     {  }
.ng-pristine     {  }
.ng-dirty         {  }
 
/* really specific css rules applied by angular */
.ng-invalid-required         {  }
.ng-invalid-minlength         {  }
.ng-valid-max-length         {  }

使用 ng-class 根據條件添加類

由於咱們使用了 Bootstrap, 咱們將就使用它們提供的類(has-error). 這樣就能圍繞咱們的form-group得到漂亮的錯誤信息和顏色.

ng-class 容許咱們基於一個表達式添加類. 在這種狀況下，咱們想要想咱們的form-group添加一個 has-error 類，若是輸入框的狀態是$invalid或者不是pristine的話.

其工做的方式是 ng-class="{ <class-you-want> : <expression to be evaluated > }". 更多的信息，請讀一讀 Angular ngClass 文檔吧.

<!-- index.html -->
...
 
    <!-- NAME -->
    <div class="form-group" ng-class="{ 'has-error' : userForm.name.$invalid && !userForm.name.$pristine }">
        <label>Name</label>
        <input type="text" name="name" class="form-control" ng-model="user.name" required>
        <p ng-show="userForm.name.$invalid && !userForm.name.$pristine" class="help-block">You name is required.</p>
    </div>
     
    <!-- USERNAME -->
    <div class="form-group" ng-class="{ 'has-error' : userForm.username.$invalid && !userForm.username.$pristine }">
        <label>Username</label>
        <input type="text" name="username" class="form-control" ng-model="user.username" ng-minlength="3" ng-maxlength="8">
        <p ng-show="userForm.username.$error.minlength" class="help-block">Username is too short.</p>
        <p ng-show="userForm.username.$error.maxlength" class="help-block">Username is too long.</p>
    </div>
         
    <!-- EMAIL -->
    <div class="form-group" ng-class="{ 'has-error' : userForm.email.$invalid && !userForm.email.$pristine }">
        <label>Email</label>
        <input type="email" name="email" class="form-control" ng-model="user.email">
        <p ng-show="userForm.email.$invalid && !userForm.email.$pristine" class="help-block">Enter a valid email.</p>
    </div>
 
...

如今咱們的表單就有了恰當的Bootstrap錯誤類.

只在提交表單後顯示錯誤信息

有時候不想在用戶正在輸入的時候顯示錯誤信息. 當前錯誤信息會在用戶輸入表單時當即顯示. 因爲Angular很棒的數據綁定特性，這是能夠發生的. 由於全部的事務均可以在一瞬間發生改變，這在表單驗證時會有反作用.

對於你想要只在表單正要提交以後才顯示錯誤消息的場景, 你就須要對上面的代碼作一些小調整.

你要去掉提交按鈕上的ng-disabled，由於咱們想要用戶即便是在表單沒有所有驗證完的狀況下也能點擊提交.
你要在表單已經被提交以後添加一個變量. 在你的 submitForm() 函數中, 只要加入 $scope.submitted = true 就好了;. 一旦表單被提交，它就會保存提交值爲true的submitted變量.
將錯誤規則從ng-class="{ 'has-error' : userForm.name.$invalid && !userForm.name.$pristine }" 調整爲 ng-class="{ 'has-error' : userForm.name.$invalid && !userForm.name.$pristine && submitted }". 這就確保了錯誤消息只會在表單被提交時被顯示出來. 你也許會須要爲這個變量調整全部其它的 ng-class 和 ng-show.

如今，只有在submitted變量被設置爲true時纔會顯示錯誤信息.

只有在輸入框以外點擊時才顯示錯誤消息

只有在輸入框以外點擊時才顯示錯誤消息（也被叫作失去焦點 blur) 這一需求比在提交時驗證要複雜一點. 在失去焦點時驗證表單須要一個custom指令. 這是一個可讓你操做DOM的指令.

咱們正在寫一篇文章專門討論此話題。同時，還有其餘的一些資源討論了建立custom指令來處理失去焦點的狀況:

所有完成

如今一旦咱們正確填寫了全部的信息，咱們的表單提交按鈕就能使用了. 一旦咱們提交了表單，咱們將會見到咱們設置的彈出消息.

用了幾行咱們就能夠:

進行輸入框驗證
顯示錶單錯誤消息
定製樣式類
自動禁止和啓用表單
定製規則

如你所見，咱們使用了Angular內置的表單驗證技術來建立一個客戶端驗證表單.

將來

照如今的狀況，在用戶在輸入框以外點擊時作驗證不是一個簡單的過程. Angular團建已經意識到這個問題，他們已經宣稱計劃要添加更多的狀態來處理像 form.submitted,input.$visited, input.$blurred, or input.$touched的狀況. 這裏有一些有關將來的表單驗證的資源:

但願儘快能有輕鬆作表單驗證的方案出來，用以處理咱們的應用程序的不一樣狀態.

編輯 #1: 添加有關在表單提交或者失去焦點以後進行驗證的信息. 還添加了一些資源. 編輯 #2: 修改表單函數的處理過程來得到valid參數. 對於建立可測試控制器的幫助. 這一點要感謝 Fredrik Bostrom.

本文是AngularJS 表單系列的一部分.

查看代碼 : http://plnkr.co/edit/lCRwhj?p=preview