在input元素上使用的所有驗證選項
1.必填項
驗證某個表單輸入是否已填寫，只要在輸入字段元素上添加HTML5標記required即可：
<input type="text" required />
2.最小長度
驗證表單輸入的文本長度是否大于某個最小值，在輸入字段上使用AngularJS指令ng-minleng="{number}"：
<input type="text" ng-minlength="5" />
3.最大長度
驗證表單輸入的文本長度是否小于或等于某個最大值，在輸入字段上使用AngularJS指令
ng-maxlength="{number}"：
<input type="text" ng-maxlength="20" />
4.模式匹配
使用ng-pattern="/PATTERN/"來確保輸入能夠匹配指定的正則表達式：
<input type="text" ng-pattern="[a-zA-Z]" />
5.電子郵件
驗證輸入內(nèi)容是否是電子郵件，只要像下面這樣將input的類型設置為email即可：
<input type="email" name="email" ng-model="user.email" />
6.** 數(shù)字**
驗證輸入內(nèi)容是否是數(shù)字，將input的類型設置為number：
<input type="number" name="age" ng-model="user.age" />
7.URL
驗證輸入內(nèi)容是否是URL，將input的類型設置為 url：
<input type="url" name="homepage" ng-model="user.facebook_url" />
- 在表單中控制變量
表單的屬性可以在其所屬的$scope對象中訪問到，而我們又可以訪問$scope對象,我們可以使用下面方式訪問表單屬性：
formName.inputFieldName.property
- 未修改的表單
formName.inputFieldName.$pristine：這是一個布爾屬性，用來判斷用戶是否修改了表單。如果未修改，值為true，如果修改過值
為false
- 修改過的表單
formName.inputFieldName.$dirty：只要用戶修改過表單，無論輸入是否通過驗證，該值都返回true
- 合法的表單
formName.inputFieldName.$valid：這個布爾型的屬性用來判斷表單的內(nèi)容是否合法。如果當前表單內(nèi)容是合法的，下面屬性的值就是true
- 不合法的表單
formName.inputFieldName.$invalid：這個布爾屬性用來判斷表單的內(nèi)容是否不合法。如果當前表單內(nèi)容是不合法的，下面屬性的值為true
- 錯誤
formName.inputfieldName.$error：這是AngularJS提供的另外一個非常有用的屬性：$error對象。它包含當前表單的所有驗證內(nèi)容，以及它們是否合法的信息。用下面的語法訪問這個屬性，如果驗證失敗，這個屬性的值為true；如果值為false，說明輸入字段的值通過了驗證
9.** 一些有用的CSS樣式**
AngularJS處理表單時，會根據(jù)表單當前的狀態(tài)添加一些CSS類（例如當前是合法的、未發(fā)生
變化的，等等），這些CSS類的命名和前面介紹的屬性很相似。它們對應著表單輸入字段的特定狀態(tài)。當某個字段中的輸入非法時，.ng-invlid類會被添加到這個字段上。
.ng-pristine {}
.ng-dirty {}
.ng-valid {}
.ng-invalid {}
- 驗證用戶名的例子（當然要引入angular）
不使用實時驗證，而是使用在用戶失去焦點的時候驗證
<!DOCTYPE html>
<html>
<head>
<title>angular表單驗證</title>
</head>
<body ng-app="myApp" ng-controller="FormController">
<form name="form" ng-submit="" novalidate="novalidate">
<input type="text" name="name" placeholder=""請輸入用戶名 ng-model="uesr.name" ng-minlength="5" ng-maxlength="15" ng-blur="change=true" ng-focus="change=false" required >
<button type="submit" name="button"> 提交 </button>
</form>
<div class="error"
ng-show="form.name.$error.required && change">
Your name is required.
</div>
<div class="error"
ng-show="form.name.$error.minlength && change">
Your name is required to be at least 5 characters
</div>
<div class="error"
ng-show="form.name.$error.maxlength && change">
Your name cannot be longer than 20 characters
</div>
<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
<script type="text/javascript">
var app = angular.module('myApp', []);
app.controller('FormController',function($scope)
{
$scope.change = false;
});
</script>
</body>
</html>
