AngularJS 表單驗證

AngularJS 能夠驗證輸入數據。

表單驗證

AngularJS 提供客戶端表單驗證。

AngularJS 監控表單和輸入字段（input、textarea、select）的狀態，并允許您向用戶通知當前狀態。

AngularJS 還包含有關它們是否已被觸摸或修改的信息。

您可以使用標準 HTML5 屬性來驗證輸入，也可以創建自己的驗證函數。

客戶端驗證不能單獨保護用戶輸入。服務器端驗證也是必要的。

required

使用 HTML5 屬性 required 指定必須填寫輸入字段：

實例

此輸入字段是必填的：

<form name="myForm">  
  <input name="myInput" ng-model="myInput" required>  
</form>  
<p>輸入的有效狀態是：</p>  
<h1>{{myForm.myInput.$valid}}</h1>

親自試一試

email

使用 HTML5 類型 email 指定該值必須是電子郵件：

實例

此輸入字段必須是電子郵件：

<form name="myForm">  
  <input name="myInput" ng-model="myInput" type="email">  
</form>  
<p>輸入的有效狀態是：</p>  
<h1>{{myForm.myInput.$valid}}</h1>

親自試一試

表單狀態和輸入狀態

AngularJS 會不斷更新表單和輸入字段的狀態。

輸入字段有以下狀態：

  • $untouched 該字段尚未被觸摸
  • $touched 該字段已被觸摸
  • $pristine 該字段尚未被修改
  • $dirty 該字段已被修改
  • $invalid 字段內容無效
  • $valid 字段內容有效

它們都是輸入字段的屬性，要么為真，要么為假。

表單有以下狀態：

  • $pristine 尚未修改任何字段
  • $dirty 個或多個字段已被修改
  • $invalid 表單內容無效
  • $valid 表單內容有效
  • $subscribed 表單已被提交

它們都是表單的屬性，可以為真或假。

您可以使用這些狀態向用戶顯示有意義的消息。例如，如果某個字段是必填項，而用戶將其留空，則應該向用戶發出警告：

實例

如果該字段已被觸摸且為空，則顯示錯誤消息：

<input name="myName" ng-model="myName" required>  
<span ng-show="myForm.myName.$touched && myForm.myName.$invalid">名稱是必填項。</span>

親自試一試

CSS 類

AngularJS 根據表單和輸入字段的狀態向它們添加 CSS 類。

以下類被添加到輸入字段或從輸入字段中移除：

  • ng-untouched 該字段尚未被觸摸
  • ng-touched 該字段已被觸摸
  • ng-pristine 該字段尚未被修改
  • ng-dirty 該字段已被修改
  • ng-valid 字段內容有效
  • ng-invalid 字段內容無效
  • ng-valid-key 每次驗證一個密鑰。例如：ng-valid-required，當有多個必須驗證的內容時非常有用
  • ng-invalid-key 例如：ng-invalid-required

以下類被添加到表單或從表單中移除：

  • ng-pristine 沒有字段尚未被修改
  • ng-dirty 一個或多個字段已被修改
  • ng-valid 表單內容有效
  • ng-invalid 表單內容無效
  • ng-valid-key 每次驗證一個密鑰。例如：ng-valid-required，當有多個必須驗證的內容時非常有用
  • ng-invalid-key 例如：ng-invalid-required

如果類代表的值為 false，則這些類將被刪除。

請為這些類添加樣式，為您的應用程序提供更好、更直觀的用戶界面。

實例

使用標準的 CSS 應用樣式：

<style>
input.ng-invalid {
  background-color: pink;
}
input.ng-valid {
  background-color: lightgreen;
}
</style>

親自試一試

也可以設置表單的樣式。

實例

為未修改的（原始的）表單和已修改的表單應用樣式：

<style>
form.ng-pristine {
  background-color: lightblue;
}
form.ng-dirty {
  background-color: pink;
}
</style>

親自試一試

自定義驗證

創建一個自己的驗證函數需要一些技巧；您必須向應用程序添加新指令，并使用某些指定參數處理函數內部的驗證。

實例

創建您自己的指令，包含自定義驗證函數，并通過使用 my-directive 引用它。

僅當值包含字符 "e" 時，該字段才有效：

<form name="myForm">
<input name="myInput" ng-model="myInput" required my-directive>
</form>
<script>
var app = angular.module('myApp', []);
app.directive('myDirective', function() {
  return {
    require: 'ngModel',
    link: function(scope, element, attr, mCtrl) {
      function myValidation(value) {
        if (value.indexOf("e") > -1) {
          mCtrl.$setValidity('charE', true);
        } else {
          mCtrl.$setValidity('charE', false);
        }
        return value;
      }
      mCtrl.$parsers.push(myValidation);
    }
  };
});
</script>

親自試一試

Example Explained:

在 HTML 中，新指令將通過使用屬性 my-directive 來引用。

在 JavaScript 中，我們首先添加一個名為 myDirective 的新指令。

記住，當命名一個指令時，你必須使用駝峰式命名法，如 myDirective，但調用它時，你必須使用連字符分隔的名稱，如 my-directive。

然后，返回一個對象，其中指定我們需要 ngModel，即 ngModelController。

創建一個鏈接函數，它接受一些參數，其中第四個參數 mCtrl 是 ngModelController。

然后指定一個函數，在本例中名為 myValidation，它接受一個參數，該參數是輸入元素的值。

測試該值是否包含字母 "e"，并將模型控制器的有效性設置為 true 或 false。

最后，mCtrl.$parsers.push(myValidation); 會將 myValidation 函數添加到其他函數的數組中，這些函數將在每次輸入值更改時執行。

驗證示例

<!DOCTYPE html>
<html>
<script src="https://cdn.staticfile.net/angular.js/1.6.9/angular.min.js"></script>
<body>
<h2>驗證示例</h2>
<form ng-app="myApp"  ng-controller="validateCtrl"
name="myForm" novalidate>
<p>用戶名：<br>
  <input type="text" name="user" ng-model="user" required>
  <span style="color:red" ng-show="myForm.user.$dirty && myForm.user.$invalid">
  <span ng-show="myForm.user.$error.required">用戶名是必填項。<</span>
  </span>
</p>
<p>電子郵件：<br>
  <input type="email" name="email" ng-model="email" required>
  <span style="color:red" ng-show="myForm.email.$dirty && myForm.email.$invalid">
  <span ng-show="myForm.email.$error.required">電子郵件是必填項。</span>
  <span ng-show="myForm.email.$error.email">無效的電子郵件地址。</span>
  </span>
</p>
<p>
  <input type="submit"
  ng-disabled="myForm.user.$dirty && myForm.user.$invalid ||
  myForm.email.$dirty && myForm.email.$invalid">
</p>
</form>
<script>
var app = angular.module('myApp', []);
app.controller('validateCtrl', function($scope) {
  $scope.user = 'Bill Gates';
  $scope.email = 'bill.gates@gmail.com';
});
</script>
</body>
</html>

親自試一試

HTML 表單屬性 novalidate 用于禁用默認的瀏覽器驗證。

例子解釋：

AngularJS 指令 ng-model 將輸入元素綁定到模型。

模型對象有兩個屬性：user 和 email。

由于 ng-show，只有當 user 或 email 為 $dirty 和 $invalid 時，才會顯示帶有 color:red 的 spans。