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 相关文章推荐
CSS+Table图文混排中实现文本自适应图片宽度(超简单+跨所有浏览器)
Feb 14 Javascript
js传中文参数controller里获取参数乱码问题解决方法
Jan 03 Javascript
浅谈jQuery异步对象(XMLHttpRequest)
Nov 17 Javascript
Javascript中With语句用法实例
May 14 Javascript
javascript对象的创建和访问
Mar 08 Javascript
浅谈JavaScript的内置对象和浏览器对象
Jun 03 Javascript
JS实现浏览上传文件的代码
Aug 23 Javascript
完美解决手机浏览器顶部下拉出现网页源或刷新的问题
Nov 30 Javascript
vue页面离开后执行函数的实例
Mar 13 Javascript
Element Notification通知的实现示例
Jul 27 Javascript
JS获取一个字符串中指定字符串第n次出现的位置
Feb 10 Javascript
Vue深入理解插槽slot的使用
Aug 05 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
日本十大最佳动漫,全都是二次元的神级作品
2019/10/05 日漫
解析php中die(),exit(),return的区别
2013/06/20 PHP
destoon实现首页显示供应、企业、资讯条数的方法
2014/07/15 PHP
php控制文件下载速度的方法
2015/03/24 PHP
php实现计算百度地图坐标之间距离的方法
2016/05/05 PHP
Firefox中autocomplete=&quot;off&quot; 设置不起作用Bug的解决方法
2011/03/25 Javascript
JQuery扩展插件Validate—6 radio、checkbox、select的验证
2011/09/05 Javascript
js实现运动logo图片效果及运动元素对象sportBox使用方法
2012/12/25 Javascript
Bootstrap编写一个兼容主流浏览器的受众门户式风格页面
2016/07/01 Javascript
Bootstrap的fileinput插件实现多文件上传的方法
2016/09/05 Javascript
Query常用DIV操作获取和设置长度宽度的实现方法
2016/09/19 Javascript
jQuery+CSS3实现仿花瓣网固定顶部位置带悬浮效果的导航菜单
2016/09/21 Javascript
Node.js批量给图片加水印的方法
2016/11/15 Javascript
javascript设计模式之策略模式学习笔记
2017/02/15 Javascript
基于node.js的fs核心模块读写文件操作(实例讲解)
2017/09/10 Javascript
详解基于Vue-cli搭建的项目如何和后台交互
2018/06/29 Javascript
Vue实现导航栏点击当前标签变色功能
2020/08/19 Javascript
js对象数组和对象的使用实例详解
2019/08/27 Javascript
vue路由传参的基本实现方式小结【三种方式】
2020/02/05 Javascript
基于Angular 8和Bootstrap 4实现动态主题切换的示例代码
2020/02/11 Javascript
[53:15]Newbee vs Pain 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
python实现多线程暴力破解登陆路由器功能代码分享
2015/01/04 Python
Python 解决中文写入Excel时抛异常的问题
2018/05/03 Python
python smtplib模块实现发送邮件带附件sendmail
2018/05/22 Python
实例讲解python中的序列化知识点
2018/10/08 Python
HTML5、Select下拉框右边加图标的实现代码(增进用户体验)
2017/10/16 HTML / CSS
世界上最好的精品店:Shoptiques
2018/02/05 全球购物
ABOUT YOU匈牙利:500个最受欢迎的时尚品牌
2019/07/19 全球购物
DOUGLAS波兰:在线销售香水和化妆品
2020/07/05 全球购物
飞利信loadrunner和软件测试笔试题
2012/09/22 面试题
土木工程建筑专业毕业生求职信
2013/10/21 职场文书
校长岗位职责
2013/11/26 职场文书
小学雷锋月活动总结
2014/07/03 职场文书
2014个人年度工作总结
2014/12/15 职场文书
Python爬取英雄联盟MSI直播间弹幕并生成词云图
2021/06/01 Python
如何利用 CSS Overview 面板重构优化你的网站
2021/10/24 HTML / CSS