AngularJS（五）：表單及輸入驗證

時間 2019-11-17

原文原文鏈接

本文也同步發表在個人公衆號「個人天空」html

表單基礎html5

表單是HTML中很重要的一個部分，基本上咱們的信息錄入都依靠表單，接下來咱們學習如何在AngularJS中使用表單，首先看如下示例代碼：
git

<body ng-app="myApp" ng-controller="person">
       <form ng-submit="submit()">
       <p>用戶名:
            <input type="text" ng-model="user.name">
       </p>
       <p>郵箱:
            <input type="text" ng-model="user.email">
       </p>
       <input type="submit" value="提交">
      </form>
</body>
<script>
    var app=angular.module("myApp",[]);
   app.controller("person",function($scope){
       $scope.submit=function(){
           alert(JSON.stringify($scope.user));
       }
   });
</script>
github

示例代碼AngularJS_13.html
正則表達式

分析以上代碼，咱們添加了一個表單，在表單中增長了ng-submit指令，這樣咱們就無需在提交按鈕中添加ng-click了，二者的區別是，前者有多種方式觸發表單提交事件：單擊提交按鈕、文本框內回車等。瀏覽器

接下來要注意的是，咱們對於文本框的ng-model數據綁定不是「name」與「email」，而是「user.name」與「user.email」，可是在控制器代碼中，咱們並未聲明user對象，即沒有相似於「var user={}」對象聲明代碼。在AngularJS中，當使用ng-model時，其會自動建立所必須的對象和鍵來實例化數據綁定，所以，初始時是沒有user對象的，只有在當用戶名或email框中輸入字符時，纔會建立user對象，並賦值到相應的綁定字段。app

最後，咱們在submit方法中顯示user對象，爲了實現可見性，咱們使用了JSON.stringfy來將對象轉換成字符串以便顯示其內容。
學習

輸入驗證
ui

在表單的輸入中，老是離不開輸入驗證，如不能爲空、必須爲郵箱格式、是否爲數字、輸入字符長度範圍等，咱們來看看AngularJS是如何實現輸入驗證的，看如下代碼：
url

<body ng-app="myApp" ng-controller="person">
       <form ng-submit="submit()" name="myForm" novalidate>
       <p>用戶名:
            <input type="text" ng-model="user.name" ng-minlength="4" required>
       </p>
       <p>郵箱:
            <input type="email" ng-model="user.email" required>
       </p>
       <input type="submit" value="提交" ng-disabled="myForm.$invalid">
      </form>
</body>
<script>
    var app=angular.module("myApp",[]);
   app.controller("person",function($scope){
       $scope.submit=function(){
           alert(JSON.stringify($scope.user));
       }
   });
</script>

示例代碼AngularJS_14.html

以上代碼是在示例13上更改的，咱們主要分析一下變動的部分。

首先咱們爲表單指定了名稱爲「myForm」以便以後使用，同時在form中添加了「novalidate」屬性，這個是阻止html5默認的輸入驗證，由於咱們要使用本身的輸入驗證。

隨後在用戶名輸入框中，咱們增長了ng-minlength指令，規定了用戶名的最小長度爲4個字符，同時添加了「required」屬性，代表該字段不能爲空。在郵件輸入框中，咱們設置了「type='email'」，代表該輸入框須要對輸入內容作郵箱有效性驗證。

最後在提交按鈕中，咱們添加了指令ng-disabled來控制該按鈕的有效性，其值等於myForm.$invalid，若是在表單中，只要有不符合輸入驗證的，則該值便爲false，天然提交按鈕便無效。

在該段代碼中，咱們經過驗證器（如ng-minlength）、表單狀態(如$invalid)等的綜合使用來實現輸入驗證，咱們作一個總結：

AngularJS驗證器

required 確保字段必需
ng-required 確保字段必需，與required不一樣的是，咱們能夠對ng-required賦值
ng-minlength 規定字段的最小長度
ng-maxlength 規定字段的最大長度
ng-pattern 指定正則表達式對字段進行有效性檢查
type="email" 輸入字段必須爲郵箱
type="number" 輸入字段必須爲數字
type="date" 若是瀏覽器支持，顯示一個日期選擇器，不然做爲一個文本輸入
type="url" 輸入字段必須爲url

AngularJS表單狀態

$invalid 當任一字段驗證無效時
$valid 與$invalid相反，當全部字段驗證有效時
$pristine 表單的初始狀態，此時無任何被修改的表單元素
$dirty 與$pristine相反，代表表單元素髮生了修改
$error 代表表單元素驗證失敗

表單狀態均是布爾值，咱們通常利用其來顯示、隱藏、禁用或啓用HTML元素，對於$error狀態，咱們接下來將進一步說明。

在示例14中，當有字段驗證未經過時，咱們只是簡單的將提交按鈕設置爲無效，可是一般，咱們須要提供更多的錯誤信息，來引導客戶輸入正確的信息，這個通常就要用到$error了，來看如下代碼：

<body ng-app="myApp" ng-controller="person">
   <form ng-submit="submit()" name="myForm" novalidate>
       <p>用戶名:
       <input type="text" name="name" ng-model="user.name" ng-minlength="4" required>
       <span ng-show="myForm.name.$error.required">用戶名是必須的</span>
       <span ng-show="myForm.name.$error.minlength">用戶名長度必須大於4位</span>
       </p>
       <p>郵箱:
       <input type="email" name="email" ng-model="user.email" required>
       <span ng-show="myForm.email.$error.email">非法的郵箱</span>
       <span ng-show="myForm.email.$error.required">郵箱是必須的</span>
       </p>
       <input type="submit" value="提交" ng-disabled="myForm.$invalid">
   </form>
</body>
<script>
    var app=angular.module("myApp",[]);
   app.controller("person",function($scope){
       $scope.submit=function(){
           alert(JSON.stringify($scope.user));
       }
   });
</script>

示例代碼AngularJS_15.html

咱們來分析以上代碼，與示例14作比較，首先咱們爲輸入框添加了name屬性，接下來在輸入框後跟着span標籤，當輸入驗證不經過時顯示相應的信息，span標籤的顯隱由指令ng-show來控制，而其值是取決於$error的不一樣狀態，如當用戶名輸入框中輸入的字符長度小於4位時，則「myForm.name.$error.minlength」的值爲true，所以相應的span便顯示，提示用戶錯誤信息。

該系列的示例代碼

https://github.com/panyongwow/angularJS