前一篇文章说过，ng1.3+以后对于表单验证有了优化，它不再需要一个详细的表达式状态创建元素显示或隐藏。

例如：我们在ng1.3之前的版本都需要如下写法：

<div class="error" ng-show="signup_form.name.$dirty && signup_form.name. $invalid && signup_form.submitted">

ng1.3之后新增了一个ngMessages指令，他被打包成一个模块发布，因此我们使用的时候只需要将这个依赖模块引入即可

angular.module('myApp', ['ngMessages']);

怎么用？

现在我们学习一下，它的用法，Code如下：

<!DOCTYPE html>

<html ng-app="myTest">

    <head>

        <meta name="viewport" content="width=device-width" />

        <title>Index</title>

        <link href="~/Content/css/bootstrap.min.css" rel="stylesheet" />

        <script src="~/Javascript/angular.js"></script>

        <script src="~/Javascript/angular-messages.js"></script>

        <style type="text/css">

            body {

                padding-top: 30px;

            }

        </style>

    </head>

    <body>

        <div class="col-md-6">

            <form role="form" name="myForm" class="form-horizontal" novalidate>

                <div class="form-group">

                    <div class="col-md-2">

                        用户名

                    </div>

                    <div class="col-md-10">

                        <input type="text" placeholder="ng-Messages测试" name="name" ng-model="username.name"

                               ng-minlength=3 ng-maxlength=20 required />

                        <hr/>

                        $error：{{myForm.name.$error}}

                        <hr/>

                        <div ng-messages="myForm.name.$error">

                            <div ng-message="required">必填项</div>

                            <div ng-message="minlength">字符太短小于3</div>

                            <div ng-message="maxlength">字符太长大于20</div>

                        </div>

                    </div>

                </div>

            </form>

        </div>

    </body>

</html>

<script type="text/javascript">

     angular.module("myTest", ['ngMessages']);

</script>

效果如下：

可以看出，其实ng是通过$error来监视模型的变化，因为$error中包含了错误的详细信息，同时，如果我们的应用场景中如果同时，有好几处错误，那么，上面代码按照ng-message的顺序只会显示一条错误信息，如果我们需要全部显示出来只需要添加 ng-messages-multiple

 <input type="text" placeholder="测试" name="name" ng-model="username.name" ng-minlength=3 ng-maxlength=20 required />
<div ng-messages="myForm.name.$error" ng-messages-multiple>

    <div ng-message="required">必填项</div>

    <div ng-message="email">邮件格式不对</div>

    <div ng-message="minlength">字符太短小于3</div>

    <div ng-message="maxlength">字符太长大于20</div>

</div>

效果如下：

怎么复用？

我们的验证信息在一个项目中大多是通用性很高的（对于样式，描述等都有高度的统一性），因此我们这里也会考虑到复用，ng中同样提供了解决方案

就是将其作为模板，指定请求路径由ng自动添加。这里再介绍一个指令 ng-messages-include

我们将上面的验证信息保存到一个独立的html静态页面中，然后使用ng-messages-include指定请求路径即可。

Code:

  <div ng-messages="myForm.name.$error" ng-messages-multiple

        ng-messages-include ="@Url.Content("~/Content/template/error.html")">

   </div>

error.html

<div ng-message="required">必填项</div>

<div ng-message="email">邮件格式不对</div>

<div ng-message="minlength">字符太短小于3</div>

<div ng-message="maxlength">字符太长大于20</div>

效果如下：

当然，模板可能在特殊的时期某些字段错误提示不能满足你的要求，你可以添加自定义的提示如下：

<div class="error" ng-messages="signup_form.name.$error"

ng-messages-include="templates/errors.html">

<!--

   按ng-message的顺序依次覆盖

-->

</div>

　　　　　自定义验证(指令)涉及到的细节知识点很多，如果简单地为了用而用，可能写得出功能，但是代码丑陋，太菜了，还需要花个把月方能弄懂 点皮毛，这部分暂告一段落，等彻底明白了，在大家分享，之后会对指令，服务先行学习下...

　　　　 备注：我也是刚刚开始学习，如果你喜欢本文的话，推荐共勉，谢谢！

ng1.3+表单验证<AngularJs>的更多相关文章

  1. 表单验证<AngularJs>

    常用的表单验证指令 1. 必填项验证 某个表单输入是否已填写,只要在输入字段元素上添加HTML5标记required即可: <input type="text" requir ...

  2. 【转载】表单验证<AngularJs>

    原文地址:http://www.cnblogs.com/rohelm/archive/2014/10/19/4033513.html 常用的表单验证指令 1. 必填项验证 某个表单输入是否已填写,只要 ...

  3. 表单验证(AngularJs)

    这次,学习angularjs的表单的验证,angularjs提供上表几种状态验证: 状态 描述 $invalid 未通过验证 $valid 经过验证 $pristine 未修改过 $dirty 修改 ...

  4. AngularJS中的表单验证

    AngularJS中的表单验证 AngularJS自带了很多验证,什么必填,最大长度,最小长度...,这里记录几个有用的正则式验证 1.使用angularjs的表单验证 正则式验证 只需要配置一个正则 ...

  5. 【AngularJS学习笔记】AngularJS表单验证

    AngularJS表单验证 AngularJS提供了一些自带的验证属性 1.novalidate:添加到HTML的表单属性中,用于禁用浏览器默认的验证. 2.$dirty   表单有填写记录 3.$v ...

  6. angular.js表单验证

    表单验证<AngularJs> 常用的表单验证指令 1. 必填项验证 某个表单输入是否已填写,只要在输入字段元素上添加HTML5标记required即可: <input type=& ...

  7. 表单验证&lt;AngularJs&gt;

    经常使用的表单验证指令 1. 必填项验证 某个表单输入是否已填写,仅仅要在输入字段元素上加入HTML5标记required就可以: <input type="text" re ...

  8. 走进AngularJs 表单及表单验证

    年底了越来越懒散,AngularJs的学习落了一段时间,博客最近也没更新.惭愧~前段时间有试了一下用yeoman构建Angular项目,感觉学的差不多了想做个项目练练手,谁知遇到了一系列问题.yeom ...

  9. AngularJS表单验证实现方法详解

    本文主要是通过源码实例和大家分享AngularJS中的表单验证相关知识,希望通过本文的分享,对大家学习AngularJS有所帮助. 1.常规表单验证: 2.AngularJs中提供的表单验证实例. 实 ...

随机推荐

  1. 【转】Python实现不同格式打印九九乘法表

    前言:最近在学习Python,学习资源有慕课网上的视频教程.菜鸟教程以及Python官方文档tutorial.虽然了解了Python的基本语法,但是还没有真正意义上输出自己写的代码.代码小白,之前仅学 ...

  2. spring事务传播性与隔离级别

    事务的7种传播级别: 1)PROPAGATION_REQUIRED:支持当前事务,没有事务就新建一个. 2)PROPAGATION_SUPPORTS:支持当前事务,如果没有事务,以非事务方式处理 3) ...

  3. 5天揭秘js高级技术-第二天

    一.数组 1. 什么是数组? 数组就是一组数据的集合: 其表现形式就是内存中的一段连续的内存地址: 数组名称其实就是连续内存地址的首地址: 2. 关于js中的数组定义 数组定义无需指定数据类型: 数组 ...

  4. 5. web前端开发分享-css,js深化篇

    一. css练习网易专题: 1. http://news.163.com/ 新闻 跟腾讯的新闻版式大体没有大的变化,只是细节. 2. http://news.163.com/photo/#Curren ...

  5. 04 MapReduce原理介绍

    大数据实战(上) # MapReduce原理介绍 大纲: * Mapreduce介绍 * MapReduce2运行原理 * shuffle及排序    定义 * Mapreduce 最早是由googl ...

  6. REDHAT一总复习1 ssh配置 禁用root用户SSH连接

    生成SSH公钥 $ ssh-keygen 生成的公钥安装到指定的服务器上,这里安装到desktop0上的student账户 $ ssh-copy-id desktop0 $ su - 禁用root用户 ...

  7. 如何配置IIS处理多并发请求及存在的问题

    很多时候多线程能快速高效独立的计算数据,应用比较多. 但今天遇到的多进程下的问题更是让人觉得复杂 多进程下static变量都要失效,就目前的平台和产品static使用是很多的,各种session.ca ...

  8. MySQL收藏

    MySQL手册:5.5手册 .5.6手册 cd /usr/local/mysql/bin mysql -uroot -p show processlist;   // 显示系统中正在运行的所有进程 M ...

  9. sublime自动生成头部注释

    1.在tool->new snippet-创建一个新的snippet sublime text2 用snippet 创建文件头部信息 Snippets are smart templates t ...

  10. docker笔记

    安装...不说了 docker info 查看信息 docker pull ...拉取镜像 docker run -it [镜像名] 运行 docker ps查看当前运行的容器  docker ps ...