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_08_函数对象
Oct 15 Javascript
jquery打开直接跳到网页最下面、最低端实现代码
Apr 22 Javascript
JQ获取动态加载的图片大小的正确方法分享
Nov 08 Javascript
用jquery实现的一个超级简单的下拉菜单
May 18 Javascript
JS实现的用来对比两个用指定分隔符分割的字符串是否相同
Sep 19 Javascript
jquery左右全屏大尺寸多图滑动效果代码分享
Aug 28 Javascript
js内置对象处理_打印学生成绩单的简单实现
Sep 24 Javascript
Vue数据驱动模拟实现3
Jan 11 Javascript
JS失效 提示HTML1114: (UNICODE 字节顺序标记)的代码页 utf-8 覆盖(META 标记)的冲突的代码页 utf-8
Jun 23 Javascript
vue.js学习之UI组件开发教程
Jul 03 Javascript
Angular2生命周期钩子函数的详细介绍
Jul 10 Javascript
Vue动态组件实例解析
Aug 20 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
基于PHPExcel的常用方法总结
2013/06/13 PHP
php使用mkdir创建多级目录入门例子
2014/05/10 PHP
PHP实现通过中文字符比率来判断垃圾评论的方法
2014/10/20 PHP
php有道翻译api调用方法实例
2014/12/22 PHP
php通过asort()给关联数组按照值排序的方法
2015/03/18 PHP
详细解读PHP中接口的应用
2015/08/12 PHP
Zend Framework教程之Loader以及PluginLoader用法详解
2016/03/09 PHP
PHP获取网页所有连接的方法(附demo源码下载)
2016/03/30 PHP
php投票系统之增加与删除投票(管理员篇)
2016/07/01 PHP
javascript iframe中打开文件,并检测iframe存在否
2008/12/28 Javascript
利用JQuery+EasyDrag 实现弹出可拖动的Div,同时向Div传值,然后返回Div选中的值
2009/10/24 Javascript
jQuery帮助之筛选查找 children([expr])
2011/01/31 Javascript
Js参数值中含有单引号或双引号问题的解决方法
2013/11/06 Javascript
利用jQuary实现文字浮动提示效果示例代码
2013/12/26 Javascript
jQuery实现form表单基于ajax无刷新提交方法详解
2015/12/08 Javascript
javascript插件开发的一些感想和心得
2016/02/28 Javascript
jQuery ajax 当async为false时解决同步操作失败的问题
2016/11/18 Javascript
老生常谈angularjs中的$state.go
2017/04/24 Javascript
原生js封装运动框架的示例讲解
2017/10/01 Javascript
原生JS上传大文件显示进度条 php上传文件代码
2020/03/27 Javascript
layui表格checkbox选择全选样式及功能的实例
2018/03/07 Javascript
用Vue编写抽象组件的方法
2019/05/06 Javascript
Vue实现将数据库中带html标签的内容输出(原始HTML(Raw HTML))
2019/10/28 Javascript
JavaScript canvas基于数组生成柱状图代码实例
2020/03/06 Javascript
[01:27:44]DOTA2-DPC中国联赛 正赛 PSG.LGD vs Aster BO3 第一场 1月24日
2021/03/11 DOTA
python和shell变量互相传递的几种方法
2013/11/20 Python
Python中使用select模块实现非阻塞的IO
2015/02/03 Python
python通过smpt发送邮件的方法
2015/04/30 Python
Python用input输入列表的实例代码
2020/02/07 Python
Hoka One One法国官网:美国专业跑鞋品牌
2018/12/29 全球购物
意大利火车票和铁路通行证专家:ItaliaRail
2019/01/22 全球购物
澳大利亚最超值的自行车之家:Reid Cycles
2019/03/24 全球购物
介绍一下JNDI的基本概念
2013/07/26 面试题
中式餐厅创业计划书范文
2014/01/23 职场文书
幼儿教师工作感言
2014/02/14 职场文书
golang json数组拼接的实例
2021/04/28 Golang