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二级导航内容均分的原理及实现
Aug 13 Javascript
Jquery Uploadify多文件上传带进度条且传递自己的参数
Aug 28 Javascript
详解JavaScript中的every()方法
Jun 08 Javascript
jquery操作angularjs对象
Jun 26 Javascript
基于JS实现PHP的sprintf函数实例
Nov 14 Javascript
Angular 根据 service 的状态更新 directive
Apr 03 Javascript
javascript表单事件处理方法详解
May 15 Javascript
基于JS实现省市联动效果代码分享
Jun 06 Javascript
简单实现js浮动框
Dec 13 Javascript
利用vueJs实现图片轮播实例代码
Jun 03 Javascript
JavaScript框架Angular和React深度对比
Nov 20 Javascript
js验证账户名是否重复
May 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制作简单的内容采集器的代码
2007/11/28 PHP
PHP 简单数组排序实现代码
2009/08/05 PHP
用php将任何格式视频转为flv的代码
2009/09/03 PHP
如何在PHP中使用正则表达式进行查找替换
2013/06/13 PHP
PHP+jQuery 注册模块的改进(一):验证码存入SESSION
2014/10/14 PHP
php生成rss类用法实例
2015/04/14 PHP
PHP 微信支付类 demo
2015/11/30 PHP
JavaScript修改css样式style
2008/04/15 Javascript
自己动手制作jquery插件之自动添加删除行功能介绍
2011/10/14 Javascript
图片img的src不变让浏览器重新加载实现方法
2013/03/29 Javascript
JS完成代码前最好对其做5件事
2013/04/07 Javascript
js网页版计算器的简单实现
2013/07/02 Javascript
浅析JQuery中的html(),text(),val()区别
2014/09/01 Javascript
深入讲解AngularJS中的自定义指令的使用
2015/06/18 Javascript
如何检测JavaScript的各种类型
2016/07/30 Javascript
详解Vue-基本标签和自定义控件
2017/03/24 Javascript
jQuery发请求传输中文参数乱码问题的解决方案
2018/05/22 jQuery
简单说说如何使用vue-router插件的方法
2019/04/08 Javascript
vue服务端渲染操作简单入门实例分析
2019/08/28 Javascript
js Math数学简单使用操作示例
2020/03/13 Javascript
基于leaflet.js实现修改地图主题样式的流程分析
2020/05/15 Javascript
Python 通过调用接口获取公交信息的实例
2018/12/17 Python
pyqt远程批量执行Linux命令程序的方法
2019/02/14 Python
Python实现定期检查源目录与备份目录的差异并进行备份功能示例
2019/02/27 Python
Python生命游戏实现原理及过程解析(附源代码)
2019/08/01 Python
tensorflow如何批量读取图片
2019/08/29 Python
numpy:np.newaxis 实现将行向量转换成列向量
2019/11/30 Python
台湾前三大B2C购物网站:MOMO购物网
2017/04/27 全球购物
What's the difference between an interface and abstract class? (接口与抽象类有什么区别)
2012/10/29 面试题
优秀员工个人的自我评价
2013/11/29 职场文书
义务教育学校标准化建设汇报材料
2014/08/16 职场文书
长城导游词400字
2015/01/30 职场文书
2016年优秀共青团员事迹材料
2016/02/25 职场文书
浅谈Redis存储数据类型及存取值方法
2021/05/08 Redis
使用php的mail()函数实现发送邮件功能
2021/06/03 PHP
Spring事务管理下synchronized锁失效问题的解决方法
2022/03/31 Java/Android