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 相关文章推荐
JS提交并解析后台返回的XML的代码
Nov 03 Javascript
JS实现切换标签页效果实例代码
Nov 01 Javascript
javascript 动态创建表格
Jan 08 Javascript
JavaScript字符串常用的方法
Mar 10 Javascript
xmlplus组件设计系列之网格(DataGrid)(10)
May 05 Javascript
Angular2 父子组件数据通信实例
Jun 22 Javascript
Redux 和 Mobx的选择问题:让你不再困惑!
Sep 18 Javascript
基于vue 添加axios组件,解决post传参数为null的问题
Mar 05 Javascript
微信小程序开发实现的选项卡(窗口顶部/底部TabBar)页面切换功能图文详解
May 14 Javascript
详解微信小程序开发之formId使用(模板消息)
Aug 27 Javascript
在weex中愉快的使用scss的方法步骤
Jan 02 Javascript
vue单元格多列合并的实现
Nov 26 Vue.js
理解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
php强制更新图片缓存的方法
2015/02/11 PHP
php中执行系统命令的方法
2015/03/21 PHP
浅谈PHP eval()函数定义和用法
2016/06/21 PHP
老生常谈PHP面向对象之标识映射
2017/06/21 PHP
php生成静态页面并实现预览功能
2019/06/27 PHP
一个对于Array的简单扩展
2006/10/03 Javascript
javascript学习笔记(六) Date 日期类型
2012/06/19 Javascript
JS图像无缝滚动脚本非常好用
2014/02/10 Javascript
javascript实现简单的省市区三级联动
2015/05/14 Javascript
jquery实现的缩略图预览滑块实例
2015/06/25 Javascript
jquery验证手机号是否正确实例讲解
2015/11/17 Javascript
SelecT下拉框选中和取值的解决方法
2016/11/22 Javascript
JavaScript实现事件的中断传播和行为阻止方法示例
2017/01/20 Javascript
简单实现js无缝滚动效果
2017/02/05 Javascript
使用Node搭建reactSSR服务端渲染架构
2018/08/30 Javascript
javascript实现遮罩层动态效果实例
2019/05/14 Javascript
微信小程序 this.triggerEvent()的具体使用
2019/12/10 Javascript
js实现简单音乐播放器
2020/06/30 Javascript
解决vue中axios设置超时(超过5分钟)没反应的问题
2020/09/04 Javascript
[01:08:33]OG vs VGJ.T 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
Python内置的HTTP协议服务器SimpleHTTPServer使用指南
2016/03/30 Python
Python实现 版本号对比功能的实例代码
2019/04/18 Python
python文件写入write()的操作
2019/05/14 Python
Python搭建代理IP池实现获取IP的方法
2019/10/27 Python
Python过滤掉numpy.array中非nan数据实例
2020/06/08 Python
Python celery原理及运行流程解析
2020/06/13 Python
python如何编写类似nmap的扫描工具
2020/11/06 Python
html5指南-1.html5全局属性(html5 global attributes)深入理解
2013/01/07 HTML / CSS
英国泰坦旅游网站:全球陪同游览,邮轮和铁路旅行
2016/11/29 全球购物
英国拳击装备购物网站:RDX Sports
2018/01/23 全球购物
英国赛车、汽车改装和摩托车零件购物网站:Demon Tweeks
2018/10/29 全球购物
新东网科技Java笔试题
2012/07/13 面试题
工伤事故赔偿协议书(标准)
2014/09/29 职场文书
Log4j.properties配置及其使用
2021/08/02 Java/Android
Windows11里微软已经将驱动程序安装位置A盘删除
2021/11/21 数码科技
一文弄懂MySQL索引创建原则
2022/02/28 MySQL