最新的Web開發教程
 

AngularJS表單驗證

❮上一頁 下一頁章❯

AngularJS可以驗證輸入的數據。

表單驗證

AngularJS提供客戶端表單驗證。

AngularJS監控表單和輸入字段（輸入，文本區域，選擇）的狀態，並讓您通知有關當前狀態的用戶。

AngularJS還擁有自己是否已經被觸及，或修改，或沒有信息。

您可以使用標準的HTML5屬性來驗證輸入，也可以使自己的驗證功能。

注意 客戶端驗證不能單獨安全的用戶輸入。 服務器端驗證也是必要的。

需要

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

例

輸入字段是必需的：

<form name="myForm">
<input name="myInput" ng-model="myInput" required>
</form>

<p>The input's valid state is:</p>
<h1>{{myForm.myInput.$valid}}</h1>
試一試»

電子郵件

使用HTML5類型email到指定的值必須是一個電子郵件：

例

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

<form name="myForm">
<input name="myInput" ng-model="myInput" type="email">
</form>

<p>The input's valid state is:</p>
<h1>{{myForm.myInput.$valid}}</h1>
試一試»

形式的國家和輸入國

AngularJS是不斷更新的形式和輸入字段的狀態。

輸入字段具有以下狀態：

  • $untouched的領域還沒有被觸及尚未
  • $touched的領域已經被觸及
  • $pristine字段還未被修改的
  • $dirty現場已被修改
  • $invalid的字段內容無效
  • $valid的字段內容是有效的

他們是輸入字段的所有屬性，要么是true還是false 。

形式有以下狀態：

  • $pristine任何字段都尚未修改
  • $dirty的一個或多個已被修改
  • $invalid形式的內容是無效的
  • $valid形式的內容是有效的
  • $submitted表單提交

他們是表格的所有屬性，要么是true還是false 。

您可以使用這些狀態展現給用戶有意義的信息。 例如，如果需要的字段，以及用戶離開空白，你應該給用戶一個警告：

例

如果該字段已經被感動，是空的顯示錯誤信息：

<input name="myName" ng-model="myName" required>
<span ng-show="myForm.myName.$touched && myForm.myName.$invalid">The name is required.</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>
試一試»

例子解釋：

在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="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>

<h2>Validation Example</h2>

<form  ng-app="myApp"  ng-controller="validateCtrl"
name="myForm" novalidate>

<p>Username:<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">Username is required.</span>
  </span>
</p>

<p>Email:<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">Email is required.</span>
  <span ng-show="myForm.email.$error.email">Invalid email address.</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 = 'John Doe';
    $scope.email = '[email protected]';
});
</script>

</body>
</html>
試一試»
注意 HTML表單屬性的novalidate用於禁用默認瀏覽器驗證。

例子解釋：

該AngularJS指令NG-模型綁定輸入元素到模型中。

該模型對象有兩個屬性： 用戶和電子郵件 。

由於NG-秀 ，色彩搭配跨度：當用戶或電子郵件為$骯髒和$無效的紅色，才會顯示。


❮上一頁 下一頁章❯