AngularJs 入門系列-2 表單驗證

對於平常的開發來講，最多見的開發場景就是經過表單編輯數據，這裏涉及的問題就是驗證問題。

angularjs 內置已經支持了常見的驗證方式，能夠輕鬆實現表單驗證。

1. 綁定

爲了方便，咱們在 $scope 上下文對象上建立一個 model 來表示咱們編輯的內容。

$scope.model =  {
    id : 8,
    name: "alice",
    email: "alice@open.com"    
};

angularjs 的驗證須要表單的配合，爲了可以訪問表單，咱們須要爲表單起一個名字，相應的編輯項也須要有一個名字，使用 name 屬性完成，這樣咱們能夠訪問到這個編輯項。使用 ng-model 實現與模型的雙向綁定。固然了，提交數據並不須要表單。

<form name="myForm">
    <div>
        <label>Id:
            <input type="number" name="myId" ng-model="model.id" /></label>
    </div>
    <div>
        <label>Name:
            <input type="text" name="myName" ng-model="model.name" /></label>
    </div>
    <div>
        <label>Email:
            <input type="email" name="myEmail" ng-model="model.email" /></label>
    </div>
    <div>
        <button type="submit">Save</button>
    </div>
</form>

如今，運行頁面，應該能夠看到模型的內容已經被綁定到了編輯項中。

2. 驗證結果

 

angularjs 內置了對於驗證的支持，因此，如今表單已經被驗證了，什麼？我怎麼沒有看到任何提示呢？angularjs 將驗證的結果保存在模型上，你須要本身在視圖上展現出來。

$valid 

表單是否經過驗證能夠經過表單對象的 $valid 來獲取，經過驗證爲真，沒有經過爲假。

<i>myForm.$valid: {{myForm.$valid}}</i>

你會看到其實 angularjs 已經在 $scope 上建立了一個與你的表單同名的對象，這裏所說的 $valid 實際上是這個對象的一個屬性。咱們經過這個屬性來知道表單是否經過了驗證。

$invalid

這個屬性與 $valid 正好相反，是沒有經過驗證爲真，經過了爲假。

有什麼用呢？

考慮這樣的場景，咱們但願提交按鈕在表單經過驗證的狀況下可用，沒有經過驗證則禁用，就能夠這樣實現。

<button type="submit"ng-disabled="myForm.$invalid">Save</button>

也就是 $invalid 爲真則禁用，不然啓用。

$pristine

用戶是否與表單進行過交互呢？能夠經過 $pristine 來知道，用戶自打開頁面尚未編輯過表單的任何內容，$pristine 返回真，不然，返回假。

$dirty

這個正好與 $pristine 相反，只要表單一旦被編輯，哪怕從新修改回了原來的內容，也是修改過，數據已經變髒了。

$error

表單驗證中，哪一個驗證經過了，哪一個驗證沒有經過，均可以從 $error 中獲取詳細的信息。

上面的這些狀態不只表單有，每一個編輯對象也有，咱們也能夠獲取每一個編輯對象的上述 5 中狀態。

<ul>
    <li><i>myForm.$valid: {{myForm.$valid}}</i></li>
    <li><i>myForm.$invalid: {{myForm.$invalid}}</i></li>
    <li><i>myForm.$dirty {{myForm.$dirty}}</i></li>
    <li><i>myForm.$pristine {{myForm.$pristine}}</i></li>
    <li><i>myForm.$error {{myForm.$error}}</i></li>
</ul>
<ul>
    <li><i>myForm.myName.$valid {{myForm.myName.$valid}}</i></li>
    <li><i>myForm.myName.$error {{myForm.myName.$error}}</i></li>
</ul>

 

3. 驗證

angularjs 可以驗證哪些內容呢？

能夠分爲基本驗證和高級驗證兩個部分

基本驗證

基本驗證是指 HTML5 直接提供的驗證方式，好比必須提供的驗證，在 HTML5 中就有 required 屬性來表示。

另外 input 元素的 type 屬性實際上也對數據類型進行了驗證，好比輸入電子郵件地址的時候，顯然應該包含一個 @ 符號。

這些類型以下：

• number
• email
• url
• text
• checkbox
• radio 

 

高級驗證

基本驗證顯然不能知足的須要，angularjs 提供了本身的高級驗證指令。這些指令都支持表達式。

ng-minlength

一看就知道，用來設置最少長度

ng-maxlength

設置最大長度

<input type="text" name="myName" required ng-minlength="3" ng-maxlength="6" ng-model="model.name" />

 

ng-required

required 不是在 HTML5 中已經提供了嗎？這個能夠實現動態的是否必須，你能夠綁定一個模型來表示如今這個編輯框是否必須。

在模型上設置是否必須。

$scope.requireValue = true;

而後，動態綁定到元素上

<input type="text" name="myName" ng-model="model.name" ng-required="requireValue"/>

 

ng-pattern

前面的太簡單了？給你一個正則總能夠了，就看你的正則功力了。

好比說，但願驗證輸入的內容都是 0-9 數字 ，就既能夠直接寫一個正則表達式常量，也能夠綁定一個變量。

$scope.matchPattern = /\d+/;

視圖中。

<input type="text" name="myName" ng-model="model.name" ng-required="requireValue" ng-minlength="3" ng-maxlength="6" ng-pattern="/\d+/" />

<input type="text" name="myName" ng-model="model.name" ng-required="requireValue" ng-minlength="3" ng-maxlength="6" ng-pattern="matchPattern" />

注意，在 javascript 中，/\d+/ 表示一個正則表達式對象。

ng-change

若是你但願在編輯內容發生變化的時候，可以當即得到通知，以便進行自定義的處理，可使用 ng-change，與標準 HTML 元素的 change 不一樣的是，在內容發生變化以後，這個表達式會被當即執行，而不是在用戶退出編輯的時候。

$scope.myIdChanged = function (model) {
    console.info(model);
};

使用 ng-change

<input type="number" name="myId" ng-model="model.id" required ng-change="myIdChanged(model)" />

4. 驗證結果的樣式

當編輯項被驗證以後，angularjs 會跟據驗證的結果，爲編輯項添加相應的樣式。

• .ng-pristine
• ng-dirty
• ng-valid
• ng-invalid

你能夠經過這些樣式來修飾編輯項。

5. 顯示錯誤提示信息

能夠將錯誤提示信息預先加入頁面相應的位置，默認不顯示出來，在沒有經過相應驗證的狀況下，再顯示對應的錯誤提示信息。

ng-show 和 ng-hide 指令能夠實現根據綁定表達式的結果來決定是否顯示元素內容。

ngShow 和ngHide 容許咱們顯示或隱藏不一樣的元素。這有助於建立Angular應用時由於咱們的單頁程序會有許多的移動部件隨着應用狀態的改變而來來去去。

這些指令的最偉大的部分就是咱們沒必要使用CSS或者JS來操做顯示仍是隱藏。這些都是由老練的Angular來完成。

<span ng-show="myForm.$invalid">表單驗證失敗</span>

 

5. 統一處理驗證的錯誤提示信息

能夠寫一個函數統一處理全部的錯誤信息。

// 統一處理全部的錯誤提示信息
$scope.getErrorMessage = function (error) {
    if (angular.isDefined(error)) {
        if (error.required) {
            return "Please enter a value!";
        }
        else if (error.email) {
            return "Please enter a valid email address!";
        }
    }
};

而後，在視圖中綁定這個函數

<span ng-show="myForm.$invalid">{{getErrorMessage(myForm.$error)}}</span>