（1）內置驗證指令
1.必填驗證
直接添加required即可
<input type="text" required /> 2.長度驗證
使用ng-minlength和ng-maxlength進行驗證
<input type="text" ng-minlength="5" ng-maxlength="20"/> 3.自定義正則驗證
使用ng-pattern="/PATTERN/"進行驗證
<input type="text" ng-pattern="/[a-zA-Z]/" /> 4.數字驗證
用來判斷輸入的數據是否是數字，與前面不同，更改input類型來實現
<input type="number" name="age" ng-model="user.age" /> 5.郵箱驗證
驗證輸入內容是否是合法的電子郵箱類型
<input type="email" name="email" ng-model="user.email" /> 6.URL驗證
驗證輸入的內容是否是url
<input type="url" name="homepage" ng-model="user.facebook_url" />（2）表單數據狀態
1.$dirty
表示數據被就改過
2.$valid
表示數據通過驗證
3.使用
formName.inputFieldName.狀態名稱myForm.name.$dirty如果有多個驗證，可以展示出是沒有通過哪個驗證
（3）表單狀態
1.$valid
表示整個表單都驗證通過
2.實例
<!DOCTYPE html>
<html ng-app="formCheckModule">
<head>
<meta charset="utf-8">
<link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"> </script>
</head>
<body>
<div ng-controller='SomeController'>
<div class="col-md-6">
<form role="form" name="myForm" ng-submit="submitForm(myForm.$valid)" class="form-horizontal" novalidate>
<div class="form-group has-feedback">
<div class="col-md-4">
<label for="name" >1.必填項</label>
</div>
<div class="col-md-8">
<input class="form-control" id="name" name="name" type="text" required ng-model='user.name' />
<span class="glyphicon glyphicon-ok form-control-feedback"
ng-show="myForm.name.$dirty && myForm.name.$valid"></span>
</div>
</div>
<div class="form-group has-feedback">
<div class="col-md-4">
<label for="minlength">2.最小長度=5</label>
</div>
<div class="col-md-8">
<input type="text" id="minlength" name="minlength" ng-minlength="5" ng-model="user.minlength" class="form-control" />
<span class="glyphicon glyphicon-ok form-control-feedback"
ng-show="myForm.minlength.$dirty && myForm.minlength.$valid"></span>
</div>
</div>
<div class="form-group has-feedback">
<div class="col-md-4">
<label for="maxlength">3.最大長度=20</label>
</div>
<div class="col-md-8">
<input type="text" id="maxlength" name="maxlength" ng-model="user.maxlength" ng-maxlength="20" class="form-control" />
<span class="glyphicon glyphicon-ok form-control-feedback"
ng-show="myForm.maxlength.$dirty && myForm.maxlength.$valid"></span>
</div>
</div>
<div class="form-group has-feedback">
<div class="col-md-4">
<label for="pattern">4. 模式匹配</label>
</div>
<div class="col-md-8">
<input type="text" id="pattern" name="pattern" ng-model="user.pattern" ng-pattern="/^[a-zA-Z]*\d$/" class="form-control" />
<span class="glyphicon glyphicon-ok form-control-feedback"
ng-show="myForm.pattern.$dirty && myForm.pattern.$valid"></span>
</div>
</div>
<div class="form-group has-feedback">
<div class="col-md-4">
<label for="email">5. 電子郵件</label>
</div>
<div class="col-md-8">
<input type="email" id="email" name="email" ng-model="user.email" class="form-control" />
<span class="glyphicon glyphicon-ok form-control-feedback"
ng-show="myForm.email.$dirty && myForm.email.$valid"></span>
</div>
</div>
<div class="form-group has-feedback">
<div class="col-md-4">
<label for="age">6. 數字</label>
</div>
<div class="col-md-8">
<input type="number" id="age" name="age" ng-model="user.age" class="form-control" />
<span class="glyphicon glyphicon-ok form-control-feedback"
ng-show="myForm.age.$dirty && myForm.age.$valid"></span>
</div>
</div>
<div class="form-group has-feedback">
<div class="col-md-4">
<label for="url"> 7. URL</label>
</div>
<div class="col-md-8">
<input type="url" id="url" name="url" ng-model="user.url" class="form-control" />
<span class="glyphicon glyphicon-ok form-control-feedback"
ng-show="myForm.url.$dirty && myForm.url.$valid"></span>
</div>
</div>
<div class="form-group text-center">
<input class="btn btn-primary btn-lg" ng-disabled="myForm.$invalid" type="submit" value="提交" />
</div>
</form>
</div>
</div>
<script type="text/javascript">
var formCheckModule=angular.module('formCheckModule', [])
formCheckModule.controller('SomeController',function($scope) {
});
</script>
</body>
</html>
（4）多種驗證並存
1.原始方法
假如一個表單字段有多種驗證，比如1.不能爲空，2.最小長度爲2 ，3.最大長度爲5
像這種要針對不同情況展示不同的錯誤提示，只能如下寫法
<form name="userForm">
<input
type="text"
name="username"
ng-model="user.username"
ng-minlength="3"
ng-maxlength="8"
required>
<p ng-show="userForm.username.$error.minlength">Username is too short.</p>
<p ng-show="userForm.username.$error.maxlength">Username is too long.</p>
<p ng-show="userForm.username.$error.required">Your username is required.</p>
</form>2.使用angular-messages.js
<1>使用npm install angular-messages 安裝angular-messages
<2>添加js
<script src="../lib/angular-messages.min.js"></script> var formCheckModule=angular.module('formCheckModule', ['ngMessages'])<form name="userForm" novalidate >
<div class="form-group" ng-class="{'has-error':userForm.name.$touched && userForm.name.$invalid}">
<label>用戶名</label>
<input type="text" name="name" class="form-control"
ng-model="main.name"
ng-minlength="5"
ng-maxlength="10" required/>
<div ng-messages="userForm.name.$error" ng-if="userForm.name.$touched">
<p ng-message="minlength">用戶名最小長度5</p>
<p ng-message="maxlength">用戶名最大長度10</p>
<p ng-message="required">用戶名必填</p>
</div>
</div>
<div class="form-group" ng-class="{'has-error':userForm.email.$touched && userForm.email.$invalid}">
<label>郵箱</label>
<input type="email" name="email" class="form-control"
ng-model="main.email"
ng-minlength="5"
ng-maxlength="20" required/>
<div ng-messages="userForm.email.$error" ng-if="userForm.email.$touched">
<div ng-messages-include="emailmessages.html"></div>
</div>
</div>
<div class="form-group">
<button type="submit" class="btn btn-danger">提交</button>
</div>
<pre>{{userForm.name.$error}}</pre>
<pre>{{userForm.email.$error}}</pre>
</form><5>重複提示覆用ng-messages-include
項目中可能有多個地方需要郵箱驗證，如果每個地方都寫一遍驗證信息就顯得非常麻煩，所以可以將錯誤提示信息寫在一個地方，然後引用進來即可，如下emailmessages.html
<p ng-message="required">郵箱必填</p>
<p ng-message="minlength">郵箱長度太短</p>
<p ng-message="maxlength">郵箱長度太長</p>
<p ng-message="email">郵箱無效</p>（5）自定義指令驗證
<!DOCTYPE html>
<html ng-app="formCheckModule">
<head>
<meta charset="utf-8">
<link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"> </script>
<script src="../lib/angular-messages.min.js"></script>
</head>
<body ng-controller='SomeController'>
<form name="userForm" novalidate >
<div class="form-group" ng-class="{'has-error':userForm.own.$touched && userForm.own.$invalid}">
<label>自定義</label>
<input type="text" name="own" class="form-control"
ng-model="main.own"
ng-maxlength="20" required
own />
<div ng-messages="userForm.own.$error" ng-if="userForm.own.$touched">
<p ng-message="isAdmin">測試不通過</p>
</div>
</div>
<div class="form-group">
<button type="submit" class="btn btn-danger">提交</button>
</div>
<pre>{{userForm.own.$error}}</pre>
</form>
<script type="text/javascript">
var formCheckModule=angular.module('formCheckModule', ['ngMessages']);
formCheckModule.controller('SomeController',function($scope) {
});
formCheckModule.directive("own",function(){
return {
require:'ngModel',
link:function(scope, element, attrs, modelController){
var customValidator = function (value) {
console.log(value);
var validity = ('test'==(value));
modelController.$setValidity("own", validity);
return validity ? value : undefined;
};
modelController.$formatters.push(customValidator);
modelController.$parsers.push(customValidator);
}
}
});
</script>
</body>
</html>
<pre code_snippet_id="1560066" snippet_file_name="blog_20160120_9_7030877" name="code" class="html" style="font-size: 13.3333px;"> 注意：1）函數中value就是表單中的數據 2）每次表單中數據修改都會進入
3）$setValidity就是設置$error中的值