AngularJs实现ng1.3+表单验证  更新时间:2015年12月10日 10:49:32   作者:Halower   这篇文章主要介绍了AngularJs实现ng1.3+表单验证,感兴趣的小伙伴们可以参考一下 前一篇文章详解AngularJS实现表单验证说过,ng1.3+以后对于表单验证有了优化,它不再需要一个详细的表达式状态创建元素显示或隐藏。 例如:我们在ng1.3之前的版本都需要如下写法: 复制代码 代码如下: ng1.3之后新增了一个ngMessages指令,他被打包成一个模块发布,因此我们使用的时候只需要将这个依赖模块引入即可 复制代码 代码如下: angular.module(‘myApp’, [‘ngMessages’]); 怎么用? 现在我们学习一下,它的用法,Code如下: Index 用户名 $error:{{myForm.name.$error}} 必填项 字符太短小于3 字符太长大于20 效果如下: 可以看出,其实ng是通过$error来监视模型的变化,因为$error中包含了错误的详细信息,同时,如果我们的应用场景中如果同时,有好几处错误,那么,上面代码按照ng-message的顺序只会显示一条错误信息,如果我们需要全部显示出来只需要添加 ng-messages-multiple 必填项 邮件格式不对 字符太短小于3 字符太长大于20 效果如下: 怎么复用? 我们的验证信息在一个项目中大多是通用性很高的(对于样式,描述等都有高度的统一性),因此我们这里也会考虑到复用,ng中同样提供了解决方案 就是将其作为模板,指定请求路径由ng自动添加。这里再介绍一个指令 ng-messages-include 我们将上面的验证信息保存到一个独立的html静态页面中,然后使用ng-messages-include指定请求路径即可。 Code: error.html 必填项 邮件格式不对 字符太短小于3 字符太长大于20 效果如下: 当然,模板可能在特殊的时期某些字段错误提示不能满足你的要求,你可以添加自定义的提示如下: 自定义验证(指令)涉及到的细节知识点很多,如果简单地为了用而用,可能写得出功能,但是代码丑陋,太菜了,还需要花个把月方能弄懂点皮毛,这部分暂告一段落,等彻底明白了,在大家分享,大家亦可以结合《理解AngularJs指令》进行学习。 您可能感兴趣的文章: AngularJS实现表单验证 AngularJS使用ngMessages进行表单验证 详解AngularJS实现表单验证 AngularJS中实现用户访问的身份认证和表单验证功能 AngularJS使用angular-formly进行表单验证 详细解读AngularJS中的表单验证编程 AngularJS手动表单验证 AngularJS自动表单验证 详解AngularJS中的表单验证(推荐) 基于angularJS的表单验证指令介绍 AngularJS实现表单验证功能 AngularJS学习笔记之表单验证功能实例详解 AngularJs ng1.3+ 表单验证 相关文章 AngularJS初始化静态模板详解 这篇文章主要为大家介绍了AngularJS初始化静态模板,AngularJS初始化静态模板有两种方式,一是通过ng-app来自动初始化模块,也可以通过angular.bootstrap(document, [module])手动启动应用,感兴趣的小伙伴们可以参考一下 2016-01-01 使用JavaScript的AngularJS库编写hello world的方法 这篇文章主要介绍了使用JavaScript的AngularJS库编写hello world的方法,AngularJS是一款高人气的JavaScript库,需要的朋友可以参考下 2015-06-06 Angular实现类似博客评论的递归显示及获取回复评论的数据 这篇文章主要给大家介绍了关于Angular如何实现类似博客评论的递归显示及获取回复评论的数据的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧。 2017-11-11 深入探究AngularJS框架中Scope对象的超级教程 这篇文章主要介绍了AngularJS框架中Scope对象使用的相关学习教程,包括其和rootscope的区别介绍,需要的朋友可以参考下 2016-01-01 深究AngularJS中ng-drag、ng-drop的用法 本篇文章主要介绍了深究AngularJS中ng-drag、ng-drop的用法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧 2017-06-06 angular 服务随记小结 这篇文章主要介绍了angular 服务随记小结,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧 2019-05-05 AngularJS 单元测试(一)详解 这篇文章主要介绍了AngularJS 单元测试(一)详解的相关资料,需要的朋友可以参考下 2016-09-09 Angular.js中ng-if、ng-show和ng-hide的区别介绍 angularJS中的ng-show、ng-hide、ng-if指令都可以用来控制dom元素的显示或隐藏。那么这篇文章就给大家主要介绍了Angular.js中ng-if、ng-show和ng-hide的区别,需要的朋友可以参考借鉴,下面来一起看看吧。 2017-01-01 angular.js实现购物车功能 这篇文章主要为大家详细介绍了angular.js购物车功能的实现代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 2017-10-10 webapp框架AngularUI的demo改造之路 这篇文章主要介绍了webapp框架AngularUI的demo改造之路,需要的朋友可以参考下 2014-12-12 最新评论

前一篇文章详解AngularJS实现表单验证说过,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> 

自定义验证(指令)涉及到的细节知识点很多,如果简单地为了用而用,可能写得出功能,但是代码丑陋,太菜了,还需要花个把月方能弄懂点皮毛,这部分暂告一段落,等彻底明白了,在大家分享,大家亦可以结合《理解AngularJs指令》进行学习。

您可能感兴趣的文章:

  • AngularJS实现表单验证
  • AngularJS使用ngMessages进行表单验证
  • 详解AngularJS实现表单验证
  • AngularJS中实现用户访问的身份认证和表单验证功能
  • AngularJS使用angular-formly进行表单验证
  • 详细解读AngularJS中的表单验证编程
  • AngularJS手动表单验证
  • AngularJS自动表单验证
  • 详解AngularJS中的表单验证(推荐)
  • 基于angularJS的表单验证指令介绍
  • AngularJS实现表单验证功能
  • AngularJS学习笔记之表单验证功能实例详解
张贴在3