AngularJS 表單驗證
AngularJS 可以驗證輸入資料。
表單驗證
AngularJS 提供客戶端表單驗證。
AngularJS 監控表單和輸入欄位（input、textarea、select）的狀態，並允許您向用戶通知當前狀態。
AngularJS 還儲存有關它們是否已被觸控或修改的資訊。
您可以使用標準 HTML5 屬性來驗證輸入，也可以建立自己的驗證函式。
僅憑客戶端驗證無法確保使用者輸入的安全性。伺服器端驗證也是必要的。
必填
使用 HTML5 屬性 required 指定輸入欄位必須填寫
示例
此輸入欄位為必填項
<form name="myForm">
<input name="myInput" ng-model="myInput" required>
</form>
<p>輸入的有效狀態為:</p>
<h1>{{myForm.myInput.$valid}}</h1>
自己動手試一試 »
電子郵件
使用 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欄位內容有效
它們都是輸入欄位的屬性，值為 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">名稱為必填項。</span>
自己動手試一試 »
CSS 類
AngularJS 根據表單和輸入欄位的狀態新增 CSS 類。
以下類被新增或移除自輸入欄位
ng-untouched欄位尚未被觸控ng-touched欄位已被觸控ng-pristine欄位尚未被修改ng-dirty欄位已被修改ng-valid欄位內容有效ng-invalid欄位內容無效ng-valid-key每個驗證一個 key。例如：ng-valid-required，在有多個需要驗證的專案時很有用ng-invalid-key例如：ng-invalid-required
以下類被新增或移除自表單
ng-pristine尚無欄位被修改ng-dirty一個或多個欄位已被修改ng-valid表單內容有效ng-invalid表單內容無效ng-valid-key每個驗證一個 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>
自己動手試一試 »
表單也可以設定樣式
示例
為未修改（pristine）的表單和已修改的表單應用樣式
<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="https://ajax.googleapis.com/ajax/libs/angularjs/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 = 'John Doe';
$scope.email = 'john.doe@gmail.com';
});
</script>
</body>
</html>
自己動手試一試 »
HTML 表單屬性 novalidate 用於停用預設瀏覽器驗證。
示例解釋
AngularJS 指令 ng-model 將輸入元素繫結到模型。
模型物件有兩個屬性：user 和 email。
由於 ng-show，帶有 color:red 的 span 僅在 user 或 email 處於 $dirty 且 $invalid 狀態時顯示。
