angularjs 表单验证ngMessages和创建自定义指令结合
2016-11-17 11:21
429 查看
index.html
clock.js
E代表元素 A代表属性 C代表类 M代表注释
<my-error></my-error> 可以换成<div my-error></div>
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 <my-error></my-error> 25 </div> 26 <button type="submit">Submit</button> 27 </form> 28 </body> 29 </html>
clock.js
1 var app=angular.module('myApp',['ngMessages']); 2 app.directive('myError',function(){ 3 return{ 4 restrict:'EAC', 5 template:'<div ng-message="required">请输入用户名 </div> <div ng-message="minlength">少于3位</div> <div ng-message="maxlength">多余20位</div>' 6 } 7 })
E代表元素 A代表属性 C代表类 M代表注释
<my-error></my-error> 可以换成<div my-error></div>
相关文章推荐
- angularjs 表单密码验证自定义指令实现代码
- AngularJS使用ngMessages进行表单验证
- AngularJS使用ngMessages进行表单验证
- AngularJS使用ngMessages进行表单验证
- angularjs表单验证 ngMessages简化验证
- 【转载】表单验证<AngularJs>
- 走进AngularJs(九)表单及表单验证
- Angularjs系列之表单验证
- 使用原生javascript创建通用表单验证 —— 更锋利的使用dom对象
- (译) 在AngularJS中使用的表单验证功能
- angularJs -- 简单表单验证
- Struts2中ajax结合action实现表单时时验证
- 带你走近AngularJS 之创建自定义指令
- 带你走近AngularJS - 创建自定义指令
- ui.popover 一个轻量级AngularJS表单验证提示解决方案
- Struts1学习笔记(4)-----用Action表单创建登陆程序并简单的验证
- 操作 AutoIT:界面与自动化操作结合来简化日常劳动: .Net Reactor验证License,设置License,创建License,截图AutoIt自动化实现。(六)
- 番茄的表单验证类-omeweb修改美化版,结合JQ
- AutoIT:界面与自动化操作结合来简化日常劳动: .Net Reactor验证License,设置License,创建License,截图AutoIt自动化实现。(一)