index.html
1 <!doctype html> 2 <html > 3 <head> 4 <meta charset="utf-8"> 5 </head> 6 <style> 7 /*input.ng-invalid { 8 border: 1px solid red; 9 } 10 input.ng-valid { 11 border: 1px solid green; 12 }*/ 13 </style> 14 <script src="js/angular.js"></script> 15 <script src="js/clock.js"></script> 16 <script src="js/angular-messages.js"></script> 17 <script src="js/angular-messages.min.js"></script> 18 <body ng-app="myApp"> 19 <form name="form1" novalidate ng-submit="signupForm()" ng-controller="signupController"> 20 <label>Your name</label> 21 <input type="text" placeholder="Name" ng-model="name" name="name" ng-minlength="3" 22 ng-maxlength="20" required > 23 <div class="error" ng-messages="form1.name.$error" ><!-- 通過這句話可以引入調用的驗證頁面，如果想直接寫在本頁面，直接注銷下面注釋，同時把此句話注釋 --> 24 <div ng-messages-include="test/error.html"></div> 25 <!--<div ng-message="required">請輸入用戶名</div> 26 <div ng-message="minlength">少於3位</div> 27 <div ng-message="maxlength">多余20位</div>--> 28 </div> 29 <button type="submit">Submit</button> 30 </form> 31 </body> 32 </html>
error.html
1 <div ng-message="required">請輸入用戶名</div> 2 <div ng-message="minlength">少於3位</div> 3 <div ng-message="maxlength">多余20位</div>
另外在寫這個列子的時候，由於我的angularjs中的js文件是分開下載的，導致angularjs的版本和angular-messages.js的版本不一致，一直報錯