剛接觸angular1.x很多經常用到的ngMessages的地方，這裏順便記一下，效果如下圖：
如果引用了angular-messages.js報如下錯誤，說明你的angular.js和angular-messages.js版本不匹配，需要找到能用的版本。
可在這裏在線測試各個版本https://docs.angularjs.org/api/ngMessages
引入版本匹配的angular-mseeages.js後，接下來開始使用它提供的表單驗證提示吧。。。
最簡單的就是將提示內容直接寫在當前文件裏了，只需要將它的ng-messages指令裏的參數與需要檢驗的input的name一致即可，比如：
<form name="myForm">
<div class="form-group">
<label class="col-md-2">帳號：</label>
<input class="form-control" type="text" placeholder="請輸入帳號" name="name" ng-model="user.name" ng-minlength="3" ng-maxlength="9" required>
<div ng-messages="myForm.name.$error" role="alert">
<div ng-message="minlength">至少3位</div>
<div ng-message="maxlength">最多9位</div>
<div ng-message="required">不能爲空</div>
</div>
</form>
檢驗提示信息我放在input後面的，它的ng-messages裏的myForm對應的當前的form的name值，ng-messages裏myForm後面的name就是要校驗的input的name的值了，最後的$error表示這個input數據不對就顯示出來，可以在裏面繼續校驗具體哪裏不正確，比如這裏的子元素上添加ng-message="minlength"，就是當input設置了ng-minlength後，輸入的內容不滿足設置的minlength，就顯示minlength的提示信息。
當然，如果你只需要驗證一個條件的話也可以不用ngMessages，可以直接判斷myForm.name.$error.minlength （maxlength、required等）的真假，然後顯示最小長度（最大長度、不能爲空等）的提示，比如：
<div class="form-group">
<label class="col-md-2"><span class="req-red">*</span>帳號：</label>
<div ng-class="{'has-error':myForm.name.$invalid && !myForm.name.$pristine}">
<input class="form-control" type="text" placeholder="請輸入帳號" name="name" ng-model="user.name" ng-minlength="3" ng-maxlength="9" required>
</div>
<div ng-if="myForm.name.$error.minlength">至少3位數</div>
</div>
<div class="form-group">
<label class="col-md-2"><span class="req-red">*</span>帳號：</label>
<div ng-class="{'has-error':myForm.name2.$invalid && !myForm.name2.$pristine}">
<input class="form-control" type="text" placeholder="請輸入帳號" name="name2" ng-model="user.name" ng-maxlength="9" required>
</div>
<div ng-if="myForm.name2.$error.maxlength">最多9位數</div>
</div>
<div class="form-group">
<label class="col-md-2"><span class="req-red">*</span>帳號：</label>
<div ng-class="{'has-error':myForm.name3.$invalid && !myForm.name3.$pristine}">
<input class="form-control" type="text" placeholder="請輸入帳號" name="name3" ng-model="user.name" required>
</div>
<div ng-if="myForm.name3.$error.required">不能爲空</div>
</div>
下面貼上一個簡單的較爲完整的form表單校驗代碼，主要實現了：
- 任意一個input不滿足條件，submit按鈕不能點擊（給submit按鈕添加ng-disabled="myForm.$invalid",myForm爲表單的name值，$invalid表示未通過驗證）。
- 任意一個input不滿足條件，其邊框顏色變成紅色，滿足後返回原始樣式（給input添加ng-class="{'has-error':myForm.name.$invalid && !myForm.name.$pristine}，!myForm.name.$pristine有編輯過input內容並且myForm.name.$invalid表示input未通過驗證，添加類名has-error，bootstrap的CSS裏定義了.has-error .form-control{border-color: #a94442;}樣式爲紅色表框等"）。
- 給校驗提示信息添加ng-if="!myForm.name.$pristine"，爲了避免進入頁面就提示XXX不能爲空的信息，給校驗提示信息添加ng-if="myForm.name.$touched"，實現用戶點擊表單元素後失去焦點就觸發校驗。只有編輯過input或input失去焦點後仍不滿足校驗條件才顯示提示並且動態改變input邊框顏色。
修改：ng-class="{'has-error':myForm.name.$invalid && (myForm.name.$touched || !myForm.name.$pristine)}" 如果不加上
!myForm.name.$pristine(表單內容有改動就會觸發)，在input裏輸入的內容不滿足條件不會立即顯示紅色邊框，焦點離開纔會觸發
<body ng-app="myApp">
<div class="form" ng-controller="myCtrl">
<form name="myForm">
<div class="form-group">
<label class="col-md-2">帳號：</label>
<div ng-class="{'has-error':myForm.name.$invalid && (myForm.name.$touched || !myForm.name.$pristine)}">
<input class="form-control" type="text" placeholder="請輸入帳號" name="name" ng-model="user.name" ng-minlength="3" ng-maxlength="9" required>
</div>
<div ng-if="!myForm.name.$pristine || myForm.name.$touched" ng-messages="myForm.name.$error" role="alert">
<div ng-message="minlength">至少3位</div>
<div ng-message="maxlength">最多9位</div>
<div ng-message="required">不能爲空</div>
</div>
</div>
<div class="form-group">
<label class="col-md-2">密碼：</label>
<div ng-class="{'has-error':myForm.password.$invalid && (myForm.password.$touched || !myForm.password.$pristine)}">
<input class="form-control" type="password" placeholder="請輸入密碼" name="password" ng-model="user.password" ng-minlength="6" ng-maxlength="16" required>
</div>
<div ng-if="!myForm.password.$pristine || myForm.password.$touched" ng-messages="myForm.password.$error" role="alert">
<div ng-message="minlength">至少6位</div>
<div ng-message="maxlength">最多16位</div>
<div ng-message="required">不能爲空</div>
</div>
</div>
<div class="form-group">
<label class="col-md-2">年齡：</label>
<div ng-class="{'has-error':myForm.age.$invalid && (myForm.age.$touched || !myForm.age.$pristine)}">
<input class="form-control" type="number" placeholder="請輸入年齡" name="age" ng-model="user.age" required>
</div>
<div ng-if="!myForm.age.$pristine || myForm.age.$touched" ng-messages="myForm.age.$error" role="alert">
<div ng-message="number">必須位數字</div>
<div ng-message="required">不能爲空</div>
</div>
</div>
<div class="form-group">
<label class="col-md-2">Times：</label>
<div ng-class="{'has-error':myForm.times.$invalid && (myForm.times.$touched || !myForm.times.$pristine)}">
<select class="form-control" name="times" ng-minlength="1" ng-model="user.times" required>
<option value="">請選擇</option>
<option value="1">first</option>
<option value="2">second</option>
</select>
</div>
<div ng-if="!myForm.times.$pristine || myForm.times.$touched" ng-messages="myForm.times.$error" role="alert">
<div ng-message="minlength">必須選擇一個</div>
<div ng-message="required">不能爲空</div>
</div>
</div>
<input class="btn btn-success" type="submit" value="提交" ng-disabled="myForm.$invalid">
</form>
</div>
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdn.bootcss.com/angular.js/1.4.0-beta.4/angular-1.4.0-beta.5/angular.js"></script>
<script src="https://cdn.bootcss.com/angular-ui-router/1.0.3/angular-ui-router.min.js"></script>
<script src="//code.angularjs.org/1.5.4/angular-messages.js"></script>
<script src="https://cdn.bootcss.com/angular-ui-bootstrap/2.5.0/ui-bootstrap-tpls.js"></script>
<script>
angular.module('myApp', ['ngMessages','ui.bootstrap']).controller("myCtrl",function ($scope) {
})
</script>
</body>
有的時候會遇到幾個頁面的提示信息和校驗條件都一樣，那麼我們可以將所有的提示信息單獨放在一個html文件裏當公共模板使用，這樣修改起來也方便，那麼就需要用到ng-messages-include了，比如：
<form name="myForm">
<div class="form-group">
<label class="col-md-2"><span class="req-red">*</span>帳號：</label>
<div ng-class="{'has-error':myForm.name.$invalid && myForm.name.$touched}">
<input class="form-control" type="text" placeholder="請輸入帳號" name="name" ng-model="user.name" ng-minlength="3" ng-maxlength="9" required>
</div>
<div ng-if="!myForm.name.$pristine || myForm.name.$touched" ng-messages="myForm.name.$error" role="alert">
<ng-messages-include src="views/tpls/error.html"></ng-messages-include>
</div>
</div>
</form>
其中src="views/tpls/error.html"就是你提示信息的文件路徑了。其內容比如：
<div ng-message="minlength">至少3位</div> <div ng-message="maxlength">最多9位</div> <div ng-message="required">不能爲空</div>
可以看下方官網的介紹：
https://docs.angularjs.org/api/ngMessages/directive/ngMessagesInclude
$error
$error對象中保存着沒有通過驗證的驗證器名稱以及對應的錯誤信息。
$pristine
$pristine的值是布爾型的，可以告訴我們用戶是否對控件進行了修改。
$dirty
$dirty的值和$pristine相反，可以告訴我們用戶是否和控件進行過交互。
$valid
$valid值可以告訴我們當前的控件中是否有錯誤。當有錯誤時值爲false，沒有錯誤時值爲true。
$invalid
$invalid值可以告訴我們當前控件中是否存在至少一個錯誤，它的值和$valid相反。
$touched
表單項是否被訪問過，如果獲得過焦點，在失去時該值爲 true，與之相對的是 $untouched
具體的一些表單校驗狀態和方法可以看http://www.cnblogs.com/rohelm/p/4033513.html