驗(yàn)證
表單驗(yàn)證
AngularJS 提供客戶端表單驗(yàn)證。
AngularJS 監(jiān)控表單和輸入字段（input、textarea、select）的狀態(tài)，并允許您向用戶通知當(dāng)前狀態(tài)。
AngularJS 還包含有關(guān)它們是否已被觸摸或修改的信息。
您可以使用標(biāo)準(zhǔn) HTML5 屬性來驗(yàn)證輸入，也可以創(chuàng)建自己的驗(yàn)證函數(shù)。
客戶端驗(yàn)證不能單獨(dú)保護(hù)用戶輸入。服務(wù)器端驗(yàn)證也是必要的。
required
使用 HTML5 屬性 required 指定必須填寫輸入字段：
實(shí)例
此輸入字段是必填的：
<form name="myForm">
<input name="myInput" ng-model="myInput" required>
</form>
<p>輸入的有效狀態(tài)是：</p>
<h1>{{myForm.myInput.$valid}}</h1>
運(yùn)行實(shí)例 ?點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例
使用 HTML5 類型 email 指定該值必須是電子郵件：
實(shí)例
此輸入字段必須是電子郵件：
<form name="myForm">
<input name="myInput" ng-model="myInput" type="email">
</form>
<p>輸入的有效狀態(tài)是：</p>
<h1>{{myForm.myInput.$valid}}</h1>
運(yùn)行實(shí)例 ?點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例
表單狀態(tài)和輸入狀態(tài)
AngularJS 會(huì)不斷更新表單和輸入字段的狀態(tài)。
輸入字段有以下狀態(tài)：
$untouched該字段尚未被觸摸$touched該字段已被觸摸$pristine該字段尚未被修改$dirty該字段已被修改$invalid字段內(nèi)容無效$valid字段內(nèi)容有效
它們都是輸入字段的屬性，要么為真，要么為假。
表單有以下狀態(tài)：
$pristine尚未修改任何字段$dirty個(gè)或多個(gè)字段已被修改$invalid表單內(nèi)容無效$valid表單內(nèi)容有效$subscribed表單已被提交
它們都是表單的屬性，可以為真或假。
您可以使用這些狀態(tài)向用戶顯示有意義的消息。例如，如果某個(gè)字段是必填項(xiàng)，而用戶將其留空，則應(yīng)該向用戶發(fā)出警告：
實(shí)例
如果該字段已被觸摸且為空，則顯示錯(cuò)誤消息：
<input name="myName" ng-model="myName" required> <span ng-show="myForm.myName.$touched && myForm.myName.$invalid">名稱是必填項(xiàng)。</span>運(yùn)行實(shí)例 ?
點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例
CSS 類
AngularJS 根據(jù)表單和輸入字段的狀態(tài)向它們添加 CSS 類。
以下類被添加到輸入字段或從輸入字段中移除：
ng-untouched該字段尚未被觸摸ng-touched該字段已被觸摸ng-pristine該字段尚未被修改ng-dirty該字段已被修改ng-valid字段內(nèi)容有效ng-invalid字段內(nèi)容無效ng-valid-key每次驗(yàn)證一個(gè)密鑰。例如：ng-valid-required，當(dāng)有多個(gè)必須驗(yàn)證的內(nèi)容時(shí)非常有用ng-invalid-key例如：ng-invalid-required
以下類被添加到表單或從表單中移除：
ng-pristine沒有字段尚未被修改ng-dirty一個(gè)或多個(gè)字段已被修改ng-valid表單內(nèi)容有效ng-invalid表單內(nèi)容無效ng-valid-key每次驗(yàn)證一個(gè)密鑰。例如：ng-valid-required，當(dāng)有多個(gè)必須驗(yàn)證的內(nèi)容時(shí)非常有用ng-invalid-key例如：ng-invalid-required
如果類代表的值為 false，則這些類將被刪除。
請(qǐng)為這些類添加樣式，為您的應(yīng)用程序提供更好、更直觀的用戶界面。
實(shí)例
使用標(biāo)準(zhǔn)的 CSS 應(yīng)用樣式：
<style>
input.ng-invalid {
background-color: pink;
}
input.ng-valid {
background-color: lightgreen;
}
</style>
運(yùn)行實(shí)例 ?點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例
也可以設(shè)置表單的樣式。
實(shí)例
為未修改的（原始的）表單和已修改的表單應(yīng)用樣式：
<style>
form.ng-pristine {
background-color: lightblue;
}
form.ng-dirty {
background-color: pink;
}
</style>
運(yùn)行實(shí)例 ?點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例
自定義驗(yàn)證
創(chuàng)建一個(gè)自己的驗(yàn)證函數(shù)需要一些技巧；您必須向應(yīng)用程序添加新指令，并使用某些指定參數(shù)處理函數(shù)內(nèi)部的驗(yàn)證。
實(shí)例
創(chuàng)建您自己的指令，包含自定義驗(yàn)證函數(shù)，并通過使用 my-directive 引用它。
僅當(dāng)值包含字符 "e" 時(shí)，該字段才有效：
<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>
運(yùn)行實(shí)例 ?點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例
Example Explained:在 HTML 中，新指令將通過使用屬性 my-directive 來引用。
在 JavaScript 中，我們首先添加一個(gè)名為 myDirective 的新指令。
記住，當(dāng)命名一個(gè)指令時(shí)，你必須使用駝峰式命名法，如 myDirective，但調(diào)用它時(shí)，你必須使用連字符分隔的名稱，如 my-directive。
然后，返回一個(gè)對(duì)象，其中指定我們需要 ngModel，即 ngModelController。
創(chuàng)建一個(gè)鏈接函數(shù)，它接受一些參數(shù)，其中第四個(gè)參數(shù) mCtrl 是 ngModelController。
然后指定一個(gè)函數(shù)，在本例中名為 myValidation，它接受一個(gè)參數(shù)，該參數(shù)是輸入元素的值。
測(cè)試該值是否包含字母 "e"，并將模型控制器的有效性設(shè)置為 true 或 false。
最后，mCtrl.$parsers.push(myValidation); 會(huì)將 myValidation 函數(shù)添加到其他函數(shù)的數(shù)組中，這些函數(shù)將在每次輸入值更改時(shí)執(zhí)行。
驗(yàn)證示例
<!DOCTYPE html>
<html>
<script src="https://cdn.staticfile.net/angular.js/1.6.9/angular.min.js"></script>
<body>
<h2>驗(yàn)證示例</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">用戶名是必填項(xiàng)。<</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">電子郵件是必填項(xiàng)。</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>
運(yùn)行實(shí)例 ?點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例
HTML 表單屬性 novalidate 用于禁用默認(rèn)的瀏覽器驗(yàn)證。
例子解釋：
AngularJS 指令 ng-model 將輸入元素綁定到模型。
模型對(duì)象有兩個(gè)屬性：user 和 email。
由于 ng-show，只有當(dāng) user 或 email 為 $dirty 和 $invalid 時(shí)，才會(huì)顯示帶有 color:red 的 spans。