脚本宝典收集整理的这篇文章主要介绍了javascript代码实例教程-表单验证续<AngularJs>，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。小宝典致力于为广大程序猿（媛）提供高品质的代码服务，请大家多多光顾小站，小宝典在此谢过。 前一篇文章说过，ng1.3+以后对于表单验证有了优化，它不再需要一个详细的表达式状态创建元素显示或隐藏。
例如：我们在ng1.3之前的版本都需要如下写法：
<p class="error" ng-show="signup_form.name.$dirty && signup_form.name. $invalid && signup_form.submITted">
ng1.3之后新增了一个ngMessages指令，他被打包成一个模块发布，因此我们使用的时候只需要将这个依赖模块引入即可
Angular.module('myApp', ['ngMessages']);
怎么用？
现在我们学习一下，它的用法，Code如下：
复制代码
<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>
<p class="col-md-6">
<form role="form" name="myForm" class="form-horizontal" novalidate>
<p class="form-group">
<p class="col-md-2">
用户名
</p>
<p 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/>
<p ng-messages="myForm.name.$error">
<p ng-message="required">必填项</p>
<p ng-message="minlength">字符太短小于3</p>
<p ng-message="maxlength">字符太长大于20</p>
</p>
</p>
</p>
</form>
</p>
</body>
</html>
<script type="text/javascript">
angular.module("myTest", ['ngMessages']);
可以看出，其实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 />
<p ng-messages="myForm.name.$error" ng-messages-multiple>
<p ng-message="required">必填项</p>
<p ng-message="email">邮件格式不对</p>
<p ng-message="minlength">字符太短小于3</p>
<p ng-message="maxlength">字符太长大于20</p>
</p>
怎么复用？
我们的验证信息在一个项目中大多是通用性很高的（对于样式，描述等都有高度的统一性），因此我们这里也会考虑到复用，ng中同样提供了解决方案
就是将其作为模板，指定请求路径由ng自动添加。这里再介绍一个指令 ng-messages-include
我们将上面的验证信息保存到一个独立的html静态页面中，然后使用ng-messages-include指定请求路径即可。
Code:
<p ng-messages="myForm.name.$error" ng-messages-multiple
ng-messages-include ="@Url.Content("~/Content/template/error.html")">
</p>
error.html
<p ng-message="required">必填项</p>
<p ng-message="email">邮件格式不对</p>
<p ng-message="minlength">字符太短小于3</p>
<p ng-message="maxlength">字符太长大于20</p>
觉得可用，就经常来吧！ 脚本宝典 欢迎评论哦！ js脚本，巧夺天工，精雕玉琢。小宝典献丑了！
以上是脚本宝典为你收集整理的javascript代码实例教程-表单验证续<AngularJs>全部内容，希望文章能够帮你解决javascript代码实例教程-表单验证续<AngularJs>所遇到的问题。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。