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 EXCEL 操作类代码
Jul 30 Javascript
JS按字节截取字符长度实例
Nov 20 Javascript
javascript实现按回车键切换焦点
Feb 09 Javascript
JavaScript的RequireJS库入门指南
Jul 01 Javascript
50 个 jQuery 插件可将你的网站带到另外一个高度
Apr 26 Javascript
js无提示关闭浏览器窗口的两种方法分析
Nov 06 Javascript
jQuery实现的分页功能示例
Jan 22 Javascript
支持移动端原生js轮播图
Feb 16 Javascript
微信小程序开发之animation循环动画实现的让云朵飘效果
Jul 14 Javascript
template.js前端模板引擎使用详解
Oct 10 Javascript
基于vue的验证码组件的示例代码
Jan 22 Javascript
Vue使用NProgress的操作过程解析
Oct 10 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
asp和php下textarea提交大量数据发生丢失的解决方法
2008/01/20 PHP
学习php设计模式 php实现访问者模式(Visitor)
2015/12/07 PHP
[原创]js与自动伸缩图片 自动缩小图片的多浏览器兼容的方法总结
2007/03/12 Javascript
javascript XML数据显示为HTML一例
2008/12/23 Javascript
为jquery.ui.dialog 增加“自动记住关闭时的位置”的功能
2009/11/24 Javascript
JavaScript Event学习第五章 高级事件注册模型
2010/02/07 Javascript
javascript中直接写php代码的方法
2013/07/31 Javascript
node.js中RPC(远程过程调用)的实现原理介绍
2014/12/05 Javascript
AngularJS利用Controller完成URL跳转
2016/08/09 Javascript
WEB前端实现裁剪上传图片功能
2016/10/17 Javascript
svg动画之动态描边效果
2017/02/22 Javascript
详解Vue.js之视图和数据的双向绑定(v-model)
2017/06/23 Javascript
Less 安装及基本用法
2018/05/05 Javascript
浅谈ElementUI中switch回调函数change的参数问题
2018/08/24 Javascript
详解Vue CLI 3.0脚手架如何mock数据
2018/11/23 Javascript
laravel-admin 与 vue 结合使用实例代码详解
2019/06/04 Javascript
vue2.x 通过后端接口代理,获取qq音乐api的数据示例
2019/10/30 Javascript
深入浅析vue全局环境变量和模式
2020/04/28 Javascript
Python利用Beautiful Soup模块创建对象详解
2017/03/27 Python
详谈Python2.6和Python3.0中对除法操作的异同
2017/04/28 Python
Python sqlite3事务处理方法实例分析
2017/06/19 Python
python实现指定文件夹下的指定文件移动到指定位置
2018/09/17 Python
Python subprocess库的使用详解
2018/10/26 Python
python实现windows倒计时锁屏功能
2019/07/30 Python
利用Python绘制有趣的万圣节南瓜怪效果
2019/10/31 Python
python模拟预测一下新型冠状病毒肺炎的数据
2020/02/01 Python
pytorch快速搭建神经网络_Sequential操作
2020/06/17 Python
Python操作MySQL数据库的示例代码
2020/07/13 Python
CSS教程:CSS3圆角属性
2009/04/02 HTML / CSS
CPB肌肤之钥美国官网:Clé de Peau Beauté
2017/09/05 全球购物
Kidsroom台湾:来自德国的婴儿用品
2017/12/11 全球购物
什么是View State?
2013/01/27 面试题
出国留学介绍信
2014/01/13 职场文书
喷漆工的岗位职责
2014/03/17 职场文书
什么是就业协议书
2014/04/17 职场文书
2016年优秀班主任先进事迹材料
2016/02/26 职场文书