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 相关文章推荐
从新浪弄下来的全屏广告代码 与使用说明
Mar 15 Javascript
jQuery插件开发基础简单介绍
Jan 07 Javascript
JQuery查找DOM节点的方法
Jun 11 Javascript
EasyUI闪屏EasyUI页面加载提示(原理+代码+效果图)
Feb 21 Javascript
jQuery实现的精美平滑二级下拉菜单效果代码
Mar 28 Javascript
vue.js中Vue-router 2.0基础实践教程
May 08 Javascript
Node.js成为Web应用开发最佳选择的原因
Feb 05 Javascript
vue 巧用过渡效果(小结)
Sep 22 Javascript
JavaScript动态添加数据到表单并提交的几种方式
Jun 26 Javascript
详解基于Vue/React项目的移动端适配方案
Aug 23 Javascript
解决vue打包 npm run build-test突然不动了的问题
Nov 13 Javascript
15个值得收藏的JavaScript函数
Sep 15 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
Snoopy类使用小例子
2008/04/15 PHP
PHP URL参数获取方式的四种例子
2014/02/28 PHP
PHP实现截取中文字符串不出现?号的解决方法
2016/12/29 PHP
ThinkPHP5 的简单搭建和使用详解
2018/11/15 PHP
来自chinaz的ajax获取评论代码
2008/05/03 Javascript
javascript判断是否按回车键并解决浏览器之间的差异
2014/05/13 Javascript
jQuery中用dom操作替代正则表达式
2014/12/29 Javascript
JS实现很酷的EMAIL地址添加功能实例
2015/02/28 Javascript
js去字符串前后空格的实现方法
2016/02/26 Javascript
node.js实现爬虫教程
2020/08/25 Javascript
详解微信小程序入门五: wxml文件引用、模版、生命周期
2017/01/20 Javascript
在javaScript中检测数据类型的几种方式小结
2017/03/04 Javascript
Angular.js指令学习中一些重要属性的用法教程
2017/05/24 Javascript
微信小程序 scroll-view实现锚点滑动的示例
2017/12/06 Javascript
浅析JS抽象工厂模式
2017/12/14 Javascript
详解如何为你的angular app构建一个第三方库
2018/12/07 Javascript
小程序从手动埋点到自动埋点的实现方法
2019/01/24 Javascript
js实现列表按字母排序
2020/08/11 Javascript
three.js 利用uv和ThreeBSP制作一个快递柜功能
2020/08/18 Javascript
python 不关闭控制台的实现方法
2011/10/23 Python
Python3.2中Print函数用法实例详解
2015/05/19 Python
香蕉共和国Banana Republic官网:美国GAP旗下偏贵族风格服饰品牌
2016/11/21 全球购物
trivago美国:全球最大的酒店价格比较网站
2018/01/18 全球购物
全球性的在线鞋类品牌:Public Desire
2019/04/03 全球购物
中学生学习生活的自我评价
2013/10/26 职场文书
汽车专业人才自我鉴定范文
2013/12/29 职场文书
打架检讨书400字
2014/01/17 职场文书
运动会口号16字
2014/06/07 职场文书
新品发布会策划方案
2014/06/08 职场文书
三年级上册科学教学计划
2015/01/21 职场文书
行政处罚决定书
2015/06/24 职场文书
2015年教务处干事工作总结
2015/07/22 职场文书
幼儿园小班班务总结
2015/08/03 职场文书
2016全国“质量月”活动标语口号
2015/12/26 职场文书
python基础之while循环语句的使用
2021/04/20 Python
Win11如何修改dns?Win11修改dns图文教程
2022/01/18 数码科技