本文實例講述了AngularJS學習筆記之表單驗證功能。分享給大家供大家參考，具體如下：
一、執行基本的表單驗證
<!DOCTYPE html>
<html ng-app='exampleApp'>
<head>
<meta charset="UTF-8">
<title>表單</title>
<script src="../../js/angular.min.js" type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" type="text/css" href="../../css/bootstrap.css" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" />
<link rel="stylesheet" type="text/css" href="../../css/bootstrap-theme.css" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" />
<script type="text/javascript">
angular.module('exampleApp',[])
.controller('defaultCtrl',function($scope){
$scope.addUser=function(userDetails){
$scope.message=userDetails.name+"("+userDetails.email+")("+userDetails.agreed+")"
}
$scope.message='Ready';
});
</script>
</head>
<body>
<div id="todoPanel" class="panel" ng-controller='defaultCtrl'>
<form name='myForm' novalidate ng-submit='addUser(newUser)'>
<div class="well">
<div class="form-group">
<label for="">Name:</label>
<input type="text" name='userName' class="form-control" required ng-model='newUser.name'/>
</div>
<div class="form-group">
<label for="">Email:</label>
<input type="email" name='userEmail' class="form-control" required ng-model='newUser.email'/>
</div>
<div class="checkbox">
<label for="">
<input type="checkbox" ng-model='newUser.agreed' required />
I agree to the terms and conditions
</label>
</div>
<button type="submit" class="btn btn-primary btn-block" ng-disabled='myForm.$invalid'>OK</button>
</div>
<div class="well">
message:{{message}}
<div>
valid:{{myForm.$valid}}
</div>
</div>
</form>
</div>
</body>
</html>
在上述例子中，該HTML文檔被瀏覽器加載時的初始狀態是：有三個input元素以及一個被禁用且無法單擊的ok按鈕，當在文本框中輸入值并且勾選了復選框之后，按鈕將變為可用，從而允許用戶提交表單。
1、增加表單元素
（1）首先需要在form上設置一個name屬性
（2）需要給表單增添novalidate屬性，該屬性用于告訴瀏覽器不要自己校驗表單，從而允許AngularJS不受干擾的工作
（3）ng-submit指令為表單提交事件指定一個自定義的響應行為，將在用戶提交表單時觸發
2、使用校驗屬性
（1）為各個想要驗證的元素添加name屬性，這樣可以訪問到Angularjs所提供的各種特殊的變量
（2）設置type屬性，這個屬性指定了input元素將要接收的數據類型，這些類型告訴angularjs需要什么樣的校驗
（3）指定required屬性，這個屬性指定用戶必須為待校驗的表單提供一個輸入值
（4）在本例中input元素都使用ng-model指令來設置隱式定義的newUser對象的一個屬性
3、監控表單的有效性
AngularJS中用來替換標準表單元素的指令定義了一些特殊的變量，可以用來檢查表單中各個元素或整個表單的有效性狀態。
$pristine：如果用戶沒有與元素/表單產生交互，則返回true
$dirty：如果用戶與元素/表單產生過交互，則返回true
$valid：當元素/表單內容的校驗結果為有效時則返回true
$invalid：當元素/表單內容的校驗結果為無效時則返回true
$error：提供校驗錯誤的詳情信息
二、提供表單校驗反饋信息
在上面的例子中展示的效果是比較簡單的，ok按鈕將一直被禁用，直到所有的input元素可用，以阻止用戶輸入錯誤格式的或未填完的數據。在接下來我們將演示AngularJS為報告實時的校驗信息
1、使用css提供校驗反饋信息
ng-pristine：用戶未曾交互過的元素被添加到這個類
ng-dirty：用戶曾經交互過的元素被添加到這個類
ng-valid：校驗結果為有效的元素在這個類中
ng-invalid：校驗結果為無效的元素在這個類中
下面我們來看具體用法：
<!DOCTYPE html>
<html ng-app='exampleApp'>
<head>
<meta charset="UTF-8">
<title>表單</title>
<script src="../../js/angular.min.js" type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" type="text/css" href="../../css/bootstrap.css" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" />
<link rel="stylesheet" type="text/css" href="../../css/bootstrap-theme.css" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" />
<script type="text/javascript">
angular.module('exampleApp',[])
.controller('defaultCtrl',function($scope){
$scope.addUser=function(userDetails){
$scope.message=userDetails.name+"("+userDetails.email+")("+userDetails.agreed+")"
}
$scope.message='Ready';
});
</script>
<style type="text/css">
form .ng-invalid.ng-dirty{background-color: lightpink;}
form .ng-valid.ng-dirty{background-color: lightgreen;}
span.summary.ng-invalid{color: red;font-weight: bold;}
span.summary.ng-valid{color: green;}
</style>
</head>
<body>
<div id="todoPanel" class="panel" ng-controller='defaultCtrl'>
<form name='myForm' novalidate ng-submit='addUser(newUser)'>
<div class="well">
<div class="form-group">
<label for="">Name:</label>
<input type="text" name='userName' class="form-control" required ng-model='newUser.name'/>
</div>
<div class="form-group">
<label for="">Email:</label>
<input type="email" name='userEmail' class="form-control" required ng-model='newUser.email'/>
</div>
<div class="checkbox">
<label for="">
<input type="checkbox" ng-model='newUser.agreed' required />
I agree to the terms and conditions
</label>
</div>
<button type="submit" class="btn btn-primary btn-block" ng-disabled='myForm.$invalid'>OK</button>
</div>
<div class="well">
message:{{message}}
<div>
valid:
<span class="summary" ng-class="myForm.$valid?'ng-valid':'ng-invalid'">
{{myForm.$valid}}
</span>
</div>
</div>
</form>
</div>
</body>
</html>
在上述例子中，我們定義了四個樣式，頭兩個樣式用于選擇屬于ng-dirty類成員的元素，僅在用戶與之交互后應用到相應元素上。內容有效的元素是ng-valid類的成員，會被渲染為淡綠色背景，內容無效的元素是ng-invalid類的成員，會被渲染為淡粉色背景
2、使用特殊變量來提供反饋信息
<!DOCTYPE html>
<html ng-app='exampleApp'>
<head>
<meta charset="UTF-8">
<title>表單</title>
<script src="../../js/angular.min.js" type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" type="text/css" href="../../css/bootstrap.css" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" />
<link rel="stylesheet" type="text/css" href="../../css/bootstrap-theme.css" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" />
<script type="text/javascript">
angular.module('exampleApp',[])
.controller('defaultCtrl',function($scope){
$scope.addUser=function(userDetails){
$scope.message=userDetails.name+"("+userDetails.email+")("+userDetails.agreed+")"
}
$scope.message='Ready';
});
</script>
<style type="text/css">
form .ng-invalid-required.ng-dirty{background-color: lightpink;}
form .ng-invalid-email.ng-dirty{background-color: lightgoldenrodyellow;}
form .ng-valid.ng-dirty{background-color: lightgreen;}
span.summary.ng-invalid{color: red;font-weight: bold;}
span.summary.ng-valid{color: green;}
div.error{color:red;font-weight: bold;}
</style>
</head>
<body>
<div id="todoPanel" class="panel" ng-controller='defaultCtrl'>
<form name='myForm' novalidate ng-submit='addUser(newUser)'>
<div class="well">
<div class="form-group">
<label for="">Email:</label>
<input type="email" name='userEmail' class="form-control" required ng-model='newUser.email'/>
<div class="error" ng-show="myForm.userEmail.$invalid&&myForm.userEmail.$dirty">
<span ng-show="myForm.userEmail.$error.email">
please enter a valid email address
</span>
<span ng-show="myForm.userEmail.$error.required">
please enter a value
</span>
</div>
</div>
<button type="submit" class="btn btn-primary btn-block" ng-disabled='myForm.$invalid'>OK</button>
</div>
</form>
</div>
</body>
</html>
在本例中新增了一個新的div元素用于給用戶顯示校驗提示信息，新的div元素的可見性是受ng-show指令控制的，將會在input元素被輸入值，且輸入值未通過校驗時顯示該元素。這里是聯合使用form元素的name值和input的name值來訪問input元素的。在這個例子中，我們使用特殊校驗變量和其他指令聯合使用以增強用戶體驗。但是這樣可能會使頁面增加大量的相同冗余信息的元素，接下來我們做簡化
<!DOCTYPE html>
<html ng-app='exampleApp'>
<head>
<meta charset="UTF-8">
<title>表單</title>
<script src="../../js/angular.min.js" type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" type="text/css" href="../../css/bootstrap.css" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" />
<link rel="stylesheet" type="text/css" href="../../css/bootstrap-theme.css" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" />
<script type="text/javascript">
angular.module('exampleApp',[])
.controller('defaultCtrl',function($scope){
$scope.addUser=function(userDetails){
$scope.message=userDetails.name+"("+userDetails.email+")("+userDetails.agreed+")"
}
$scope.message='Ready';
$scope.getError=function(error){
if(angular.isDefined(error)){
if(error.required){
return 'please enter a value';
}else if(error.email){
return 'please enter a valid email address';
}
}
}
});
</script>
<style type="text/css">
form .ng-invalid-required.ng-dirty{background-color: lightpink;}
form .ng-invalid-email.ng-dirty{background-color: lightgoldenrodyellow;}
form .ng-valid.ng-dirty{background-color: lightgreen;}
span.summary.ng-invalid{color: red;font-weight: bold;}
span.summary.ng-valid{color: green;}
div.error{color:red;font-weight: bold;}
</style>
</head>
<body>
<div id="todoPanel" class="panel" ng-controller='defaultCtrl'>
<form name='myForm' novalidate ng-submit='addUser(newUser)'>
<div class="well">
<div class="form-group">
<label for="">Email:</label>
<input type="email" name='userEmail' class="form-control" required ng-model='newUser.email'/>
<div class="error" ng-show="myForm.userEmail.$invalid&&myForm.userEmail.$dirty">
{{getError(myForm.userEmail.$error)}}
</div>
</div>
<button type="submit" class="btn btn-primary btn-block" ng-disabled='myForm.$invalid'>OK</button>
</div>
</form>
</div>
</body>
</html>
更多關于AngularJS相關內容感興趣的讀者可查看本站專題：《AngularJS指令操作技巧總結》、《AngularJS入門與進階教程》及《AngularJS MVC架構總結》
希望本文所述對大家AngularJS程序設計有所幫助。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
