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的版本不一致，一直报错
扫一扫
243
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
