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 相关文章推荐
jQuery select控制插件
Aug 17 Javascript
禁止js文件缓存的代码
Apr 09 Javascript
20款非常优秀的 jQuery 工具提示插件 推荐
Jul 15 Javascript
用js写了一个类似php的print_r输出换行功能
Feb 18 Javascript
jquery简单实现鼠标经过导航条改变背景图
Dec 17 Javascript
js获取光标位置和设置文本框光标位置示例代码
Jan 09 Javascript
js根据日期判断星座的示例代码
Jan 23 Javascript
解析浏览器端的AJAX缓存机制
Jun 21 Javascript
JS基于面向对象实现的多个倒计时器功能示例
Feb 28 Javascript
微信小程序实现验证码获取倒计时效果
Feb 08 Javascript
微信小程序--特定区域滚动到顶部时固定的方法
Apr 28 Javascript
javascript实现用户必须勾选协议实例讲解
Mar 24 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
利用文件属性结合Session实现在线人数统计
2006/10/09 PHP
smarty模板嵌套之include与fetch性能测试
2010/12/05 PHP
解析PHP中ob_start()函数的用法
2013/06/24 PHP
总结对比php中的多种序列化
2016/08/28 PHP
PHP Socket网络操作类定义与用法示例
2017/08/30 PHP
Laravel框架中自定义模板指令总结
2017/12/17 PHP
thinkPHP框架RBAC实现原理分析
2019/02/01 PHP
JavaScript跨域方法汇总
2014/10/16 Javascript
jQuery解决input元素的blur事件和其他非表单元素的click事件冲突问题
2016/08/15 Javascript
javascript常用经典算法详解
2017/01/11 Javascript
JS简单验证上传文件类型的方法
2017/04/17 Javascript
vue下跨域设置的相关介绍
2017/08/26 Javascript
vue父组件点击触发子组件事件的实例讲解
2018/02/08 Javascript
在 Vue-CLI 中引入 simple-mock实现简易的 API Mock 接口数据模拟
2018/11/28 Javascript
JavaScript之Blob对象类型的具体使用方法
2019/11/29 Javascript
如何HttpServletRequest文件对象并储存
2020/08/14 Javascript
Openlayers实现扩散的动态点(水纹效果)
2020/08/17 Javascript
[03:49]显微镜下的DOTA2第十五期—VG登基之路完美团
2014/06/24 DOTA
[02:42]完美大师赛主赛事淘汰赛第三日观众采访
2017/11/25 DOTA
python获取当前运行函数名称的方法实例代码
2017/04/06 Python
Python编程之Re模块下的函数介绍
2017/10/28 Python
详解如何为eclipse安装合适版本的python插件pydev
2018/11/04 Python
python使用循环打印所有三位数水仙花数的实例
2018/11/13 Python
tensor和numpy的互相转换的实现示例
2019/08/02 Python
Python中zipfile压缩文件模块的基本使用教程
2020/06/14 Python
python获取时间戳的实现示例(10位和13位)
2020/09/23 Python
Foreo国际站:Foreo International
2018/10/29 全球购物
this关键字的作用
2016/01/30 面试题
学院书画协会部门职责
2013/11/28 职场文书
生产操作工岗位职责
2014/09/16 职场文书
临时工聘用合同协议书
2014/10/29 职场文书
大学生在校表现评语
2014/12/31 职场文书
服务承诺书
2015/01/19 职场文书
消防安全培训工作总结
2015/10/23 职场文书
教师正风肃纪心得体会
2016/01/15 职场文书
Golang 结构体数据集合
2022/04/22 Golang