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中使用DOM复制(克隆)指定节点名数据到新的XML文件中的代码
Jul 27 Javascript
用Javascript获取页面元素的具体位置
Dec 09 Javascript
ExtJS4利根据登录后不同的角色分配不同的树形菜单
May 02 Javascript
JS实现从连接中获取youtube的key实例
Jul 02 Javascript
jquery实现页面虚拟键盘特效
Aug 08 Javascript
浅谈JavaScript变量的自动转换和语句
Jun 12 Javascript
js如何判断是否在iframe中及防止网页被别站用iframe嵌套
Jan 11 Javascript
bootstrap折叠调用collapse()后data-parent不生效的快速解决办法
Feb 23 Javascript
vue生命周期和react生命周期对比【推荐】
Sep 19 Javascript
highcharts.js数据绑定方式代码实例
Nov 13 Javascript
JS绘图Flot如何实现可选显示曲线图功能
Oct 16 Javascript
javascript实现前端分页功能
Nov 26 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
PHP nl2br函数 将换行字符转成 &amp;lt;br&amp;gt;
2009/08/21 PHP
PHP临时文件的安全性分析
2014/07/04 PHP
Laravel访问出错提示:`Warning: require(/vendor/autoload.php): failed to open stream: No such file or di解决方法
2019/04/02 PHP
Z-Blog中用到的js代码
2007/03/15 Javascript
jquery聚焦文本框与扩展文本框聚焦方法
2012/10/12 Javascript
js获取窗口相对于屏幕左边和上边的位置坐标
2014/05/15 Javascript
jQuery遍历之next()、nextAll()方法使用实例
2014/11/08 Javascript
JavaScript 面向对象与原型
2015/04/10 Javascript
js实现简单排列组合的方法
2016/01/27 Javascript
JS组件Bootstrap Table布局详解
2016/05/27 Javascript
JS模仿腾讯图片站的图片翻页按钮效果完整实例
2016/06/21 Javascript
js定时器实例分享
2016/12/20 Javascript
jQuery手风琴的简单制作
2017/05/12 jQuery
vue  directive定义全局和局部指令及指令简写
2018/11/20 Javascript
实例讲解v-if和v-show的区别
2019/01/31 Javascript
nodeJs的安装与npm全局环境变量的配置详解
2020/01/06 NodeJs
Javascript实现简易天数计算器
2020/05/18 Javascript
[49:27]LGD vs OG 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
python中的break、continue、exit()、pass全面解析
2017/08/05 Python
PyQt5笔记之弹出窗口大全
2019/06/20 Python
Django对models里的objects的使用详解
2019/08/17 Python
Python flask框架端口失效解决方案
2020/06/04 Python
为什么说python更适合树莓派编程
2020/07/20 Python
8种常用的Python工具
2020/08/05 Python
Python调用系统命令os.system()和os.popen()的实现
2020/12/31 Python
Giglio英国站:意大利奢侈品购物网
2018/03/06 全球购物
信息管理专业学生自荐信格式
2013/09/22 职场文书
高中军训广播稿
2014/01/14 职场文书
三月雷锋月活动总结
2014/07/03 职场文书
艺术学院毕业生自荐信
2014/07/05 职场文书
开会通知短信大全
2015/04/20 职场文书
预备党员群众意见
2015/06/01 职场文书
幼儿园大班教师随笔
2015/08/14 职场文书
团干部培训班心得体会
2016/01/06 职场文书
详解Go语言运用广度优先搜索走迷宫
2021/06/23 Python
vue使用refs获取嵌套组件中的值过程
2022/03/31 Vue.js