AngularJs实现ng1.3+表单验证


Posted in Javascript onDecember 10, 2015

前一篇文章详解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>

效果如下:

AngularJs实现ng1.3+表单验证

可以看出,其实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>

效果如下:

AngularJs实现ng1.3+表单验证

怎么复用?

我们的验证信息在一个项目中大多是通用性很高的(对于样式,描述等都有高度的统一性),因此我们这里也会考虑到复用,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>

效果如下:

AngularJs实现ng1.3+表单验证

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

<div class="error" ng-messages="signup_form.name.$error" 
ng-messages-include="templates/errors.html"> 
<!-- 
  按ng-message的顺序依次覆盖
--> 
</div>

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

Javascript 相关文章推荐
JavaScript对象链式操作代码(jquery)
Jul 04 Javascript
jquery.cookie.js 操作cookie实现记住密码功能的实现代码
Apr 27 Javascript
JavaScript面向对象程序设计教程
Mar 29 Javascript
JS针对浏览器窗口关闭事件的监听方法集锦
Jun 24 Javascript
Angular.js 实现数字转换汉字实例代码
Jul 14 Javascript
HTML页面,测试JS对C函数的调用简单实例
Aug 09 Javascript
JavaScript基于DOM操作实现简单的数学运算功能示例
Jan 16 Javascript
javaScript之split与join的区别(详解)
Nov 08 Javascript
基于vue实现web端超大数据量表格的卡顿解决
Apr 02 Javascript
layui表格数据重载
Jul 27 Javascript
基于JavaScript实现表格隔行换色
May 08 Javascript
JS开发前端团队展示控制器来为成员引流
Aug 14 Javascript
理解AngularJs指令
Dec 10 #Javascript
详解AngularJS实现表单验证
Dec 10 #Javascript
jquery实现鼠标悬浮停止轮播特效
Aug 20 #Javascript
JavaScript动态创建form表单并提交的实现方法
Dec 10 #Javascript
jquery实现定时自动轮播特效
Dec 10 #Javascript
jQuery手动点击实现图片轮播特效
Apr 20 #Javascript
javascript实现unicode与ASCII相互转换的方法
Dec 10 #Javascript
You might like
如何开始收听短波广播
2021/03/01 无线电
php将数据库中的电话号码读取出来并生成图片
2008/08/31 PHP
php模板函数 正则实现代码
2012/10/15 PHP
深入解析PHP中的(伪)多线程与多进程
2013/07/01 PHP
php仿微信红包分配算法的实现方法
2016/05/13 PHP
PHP实现的多维数组去重操作示例
2018/07/21 PHP
PHP中ltrim()函数的用法与实例讲解
2019/03/28 PHP
php获取是星期几的的一些常用姿势
2019/12/15 PHP
jquery.ui.progressbar 中文文档
2009/11/26 Javascript
Ext.MessageBox工具类简介
2009/12/10 Javascript
script标签属性type与language使用选择
2012/12/02 Javascript
jquery显示和隐藏div特效实例
2013/02/27 Javascript
通过AJAX的JS、JQuery两种方式解析XML示例介绍
2013/09/23 Javascript
JavaScript极简入门教程(二):对象和函数
2014/10/25 Javascript
深入理解JavaScript系列(33):设计模式之策略模式详解
2015/03/03 Javascript
jquery任意位置浮动固定层插件用法实例
2015/05/29 Javascript
如何使用jquery修改css中带有!important的样式属性
2016/04/28 Javascript
js使用i18n实现页面国际化的方法
2017/05/09 Javascript
JS使用正则表达式验证身份证号码
2017/06/23 Javascript
vue.js与后台数据交互的实例讲解
2018/08/08 Javascript
Vue2.0+Vux搭建一个完整的移动webApp项目的示例
2019/03/19 Javascript
vue框架制作购物车小球动画效果实例代码
2019/09/26 Javascript
Vue利用localStorage本地缓存使页面刷新验证码不清零功能的实现
2020/09/04 Javascript
[41:20]2014 DOTA2华西杯精英邀请赛 5 24 NewBee VS DK
2014/05/26 DOTA
[02:37]2015国际邀请赛选手档案—LGD.Xiao8
2015/07/28 DOTA
Python中的模块和包概念介绍
2015/04/13 Python
Windows下anaconda安装第三方包的方法小结(tensorflow、gensim为例)
2018/04/05 Python
python飞机大战pygame游戏框架搭建操作详解
2019/12/17 Python
python线程池 ThreadPoolExecutor 的用法示例
2020/10/10 Python
CSS3 选择器 属性选择器介绍
2012/01/21 HTML / CSS
百联网上商城:i百联
2017/01/28 全球购物
Edwaybuy西班牙:小米在线商店
2019/12/04 全球购物
商品陈列协议书
2014/09/29 职场文书
挂职个人工作总结
2015/03/05 职场文书
防震减灾主题班会
2015/08/14 职场文书
Python insert() / append() 用法 Leetcode实战演示
2021/03/31 Python