文档章节

AngularJS validation with messages

Geek-S
 Geek-S
发布于 2015/12/30 10:24
字数 255
阅读 45
收藏 1

    接着上次的AngularJS remote validation,在表单验证中,我们有各种规则,eg:required,minlength,maxlength这些是H5提供的属性,AngularJS提供了ng-pattern用于正则表达式,一个表单有N个验证规则,那么我们如何进行不同提示信息的展示呢。

    0如果只是一种验证规则,我们可以简单的实现:

<div ng-show="form.$invalid">validation message</div>

    1如果是多个验证规则,通过这种方式,我们拿不到具体未通过的验证规则,所以采用AngularJS提供的angular-    messagers,(当然,并不是说angular-messagers只有这一个应用场景)参考:AngularJS-ngMessages

0在加载模块时,添加:
    angular.module('angularJS', 
		['ngMessages']);

1信息提示代码:
<form name="myForm">
  <label>
    Enter your name:    <input type="text"
           name="myName"
           ng-model="name"
           ng-minlength="5"
           ng-maxlength="20"
           required />
  </label>
  <pre>myForm.myName.$error = {{ myForm.myName.$error | json }}</pre>

  <div ng-messages="myForm.myName.$error" style="color:maroon" role="alert">
    <div ng-message="required">You did not enter a field</div>
    <div ng-message="minlength">Your field is too short</div>
    <div ng-message="maxlength">Your field is too long</div>
  </div>
</form>



© 著作权归作者所有

共有 人打赏支持
Geek-S
粉丝 11
博文 77
码字总数 18976
作品 0
大兴
程序员
私信 提问
material2 发布 7.0.1,Angular 的 Material Design 风格框架

Angular 的 Material Design 风格框架 material2 发布了 7.0.1 版本,这主要是一个 bug 修复版本: Bug 修复 autocomplete: not propagating same model value when reset while open (#136......

局长
2018/10/23
1K
1
Migrating a SpringWebMVC App from JSP to AngularJS

Migrating a Spring Web MVC application from JSP to AngularJS Engineering Michael Isvy August 19, 2015 Note on authors This post is a guest post by Han Lim and Tony Nguyen.Han an......

miscellanea
2015/08/24
0
0
AngularJS 1.3.3 发布,HTML 的 Web 框架

AngularJS 1.3.3 发布,Angular JS (Angular.JS) 是一组用来开发Web页面的框架、模板以及数据绑定和丰富UI组件。它支持整个开发进程,提供web应用的架构,无需进行手工DOM操作。 AngularJS很...

oschina
2014/11/19
3.6K
13
Angular CLI 常用命令

Angular CLI 是 Angular 客户端命令行工具,提供非常多的命令来简化 Angular 的开发。本文总结了在实际项目中经常会用到的 Angular CLI 命令。 获取帮助() 等同于,跟所有的其他命令行一样...

waylau
2018/11/09
0
0
AngularBeans —— Java EE 和 AngularJS 集成

Angular Beans 是一个使用 Java EE 7 和 CDI 规范轻松实现在 Java EE 应用中集成 AngularJS 框架的功能。 特性: 可以在 CDI Bean 注入和回调 AngularJS 服务 将 $scope 绑定到 Bean 模型 处...

oschina
2015/06/03
110
0

没有更多内容

加载失败,请刷新页面

加载更多

阿里强制要求的21条Java开发规范,可以避免很多坑

1. 【强制】避免通过一个类的对象引用访问此类的静态变量或静态方法,无谓增加编译器解析成本,直接用类名来访问即可。 2. 【强制】所有的覆写方法,必须加@Override注解。 说明:getObject...

天王盖地虎626
24分钟前
5
0
oracle dg 备库未设置convert参数导致ORA-01111,ORA-01110

查看trace 文件: MRP0: Background Managed Standby Recovery process started (amls) started logmerger process Sun Jan 20 07:55:53 2019 Managed Standby Recovery starting Real Time ......

hnairdb
44分钟前
2
0
乱入Linux界的我是如何学习的

欢迎来到建哥学Linux,咳!咳!咳!开个玩笑哈,我是一个IT男,IT界的入门选手,正在学习Linux。 在之前,一直想进军IT界,学习IT技术,但是苦于没有人指导,也不知道学什么,最开始我自己在...

linux-tao
今天
1
0
乱入Linux界的我是如何学习的

欢迎来到建哥学Linux,咳!咳!咳!开个玩笑哈,我是一个IT男,IT界的入门选手,正在学习Linux。 在之前,一直想进军IT界,学习IT技术,但是苦于没有人指导,也不知道学什么,最开始我自己在...

linuxprobe16
今天
9
0
OSChina 周日乱弹 —— 没时间 没头发 但有钱

Osc乱弹歌单(2019)请戳(这里) 【今日歌曲】 @开源中国总经办主任 :分享齐一的单曲《这个年纪》 《这个年纪》- 齐一 手机党少年们想听歌,请使劲儿戳(这里) @肿肿卷 :我真的可以睡一天...

小小编辑
今天
162
7

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部