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指令》进行学习。
相关文章
angularJs使用ng-repeat遍历后选中某一个的方法
今天小编就为大家分享一篇angularJs使用ng-repeat遍历后选中某一个的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-09-09
本篇文章主要介绍了angular使用post、get向后台传参的问题实例。小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-05-05
这篇文章主要介绍了Angular短信模板校验代码,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2020-09-09
这篇文章主要介绍了详解Angular2 关于*ngFor 嵌套循环，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-05-05
本篇文章主要介绍了Angular2 Service实现简单音乐播放器服务 ，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-02-02
这篇文章主要介绍了AngularJS select设置默认值的实现方法的相关资料,这里提供实现方法帮助大家实现这样的功能，需要的朋友可以参考下2017-08-08
图片轮播在我们日常开发中是再熟悉不过的了，下面这篇文章主要给大家介绍了Ionic + Angular实现图片轮播的方法，文中给出了详细的示例代码供大家参考学习，需要的朋友们下面来一起看看吧。2017-05-05
这篇文章主要为大家介绍了Angular 13+开发模式慢的原因及构建性能优化解析，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-12-12
AngularJS是为了克服HTML在构建应用上的不足而设计的。HTML是一门很好的为静态文本展示设计的声明式语言，但要构建WEB应用的话它就显得乏力了。所以我做了一些工作（你也可以觉得是小花招）来让浏览器做我想要的事。2014-12-12
Angularjs 根据一个select的值去设置另一个select的值方法
今天小编就为大家分享一篇Angularjs 根据一个select的值去设置另一个select的值方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-08-08
最新评论