angularjs表单验证 ngMessages简化验证

最新推荐文章于 2024-07-29 11:53:27 发布

weixin_30722589

最新推荐文章于 2024-07-29 11:53:27 发布

阅读量75

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/mrzhangkang/p/6072931.html

版权

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的版本不一致，一直报错

转载于:https://www.cnblogs.com/mrzhangkang/p/6072931.html

weixin_30722589

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
angularjs表单验证 ngMessages简化验证

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 ...
复制链接

扫一扫