剛接觸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: 樣式為紅色表框等"）。
- 給校驗提示信息添加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