AngularJs实现ng1.3+表单验证
更新时间：2015年12月10日 10:49:32 作者：Halower
这篇文章主要介绍了AngularJs实现ng1.3+表单验证，感兴趣的小伙伴们可以参考一下
前一篇文章详解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>
效果如下：
可以看出，其实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>
效果如下：
怎么复用？
我们的验证信息在一个项目中大多是通用性很高的（对于样式，描述等都有高度的统一性），因此我们这里也会考虑到复用，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>
效果如下：
当然，模板可能在特殊的时期某些字段错误提示不能满足你的要求，你可以添加自定义的提示如下：
<div class="error" ng-messages="signup_form.name.$error" ng-messages-include="templates/errors.html"> <!-- 按ng-message的顺序依次覆盖 --> </div>
自定义验证(指令)涉及到的细节知识点很多，如果简单地为了用而用，可能写得出功能，但是代码丑陋，太菜了，还需要花个把月方能弄懂点皮毛，这部分暂告一段落，等彻底明白了，在大家分享，大家亦可以结合《理解AngularJs指令》进行学习。
相关文章
Angular.js中ng-include用法及多标签页面的实现方式详解
这篇文章主要给大家介绍了在Angular.js中ng-include用法及多标签页面的实现方式的相关资料，文中通过示例代码介绍的非常详细，相信对大家具有一定的参考学习价值，需要的朋友们下面随着小编一起来学习学习吧。2017-05-05
本章介绍的是如何对模板驱动表单创建自定义校验器，它相比较响应式表单自定义校验器略为复杂一些。接下来通过本文给大家分享Angular在模板驱动表单中自定义校验器的方法，感兴趣的朋友一起看看吧2017-08-08
AngularJS Toaster是一个 AngularJS 提示框.基于angular v1.2.6 及以上和angular-animate.这篇文章主要介绍了AngularJS Toaster使用详解,需要的朋友可以参考下2017-02-02
在Angular中,NgZone是一个服务,用于管理异步任务的执行,并提供一种在Angular区域内或外部显式运行代码的方式,NgZone.run方法是一种显式在Angular区域内运行函数的方式,本文介绍Angular中的NgZone.run()有什么用,感兴趣的朋友一起看看吧2024-01-01
Angular2开发者预览版出来已有一段时间，这个以速度与移动性能为目的的框架到底如何，今天我们来结合官网的demo尝试一下。2016-03-03
这篇文章主要给大家介绍了Angular2中组件与指令的一个小实践，利用组件和指令实现一个图片轮播组件的相关资料，文中给出了详细的介绍和示例代码，需要的朋友可以参考学习，下面来一起看看吧。2017-03-03
本文主要介绍AngularJS 双向绑定，这里整理了详细的知识资料并讲解，而且附有代码示例，有兴趣的小伙伴可以参考下2016-08-08
每个Angular版本在其生命周期中都经历了各个阶段。组件在Angular中起着关键作用; 在这里，本文将讨论Angular中的组件生命周期以及它们如何影响框架所有版本的生命周期。2021-05-05
AngularJs bootstrap搭载前台框架——基础页面
本文主要介绍AngularJs bootstrap搭载前台框架基础页面的建设，这里整理饿了相关资料及实现实例代码，有兴趣的小伙伴可以参考下2016-09-09
这篇文章主要介绍了Angular2进阶之如何避免Dom误区,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-04-04
最新评论