AngularJs实现ng1.3表单验证

上一篇文章详细解释了AngularJS如何实现表单验证。在ng1.3之后，表单验证得到了优化，不再需要详细的表达式状态来创建元素来显示或隐藏。

例如，我们在ng1.3之前的版本需要编写如下：

复制的代码如下： div class=' error ' ng-show=' registration _ form。名字。$脏注册表单。名字。$无效的注册表单。submitted ' ng1.3后面是一个新的ngMessages指令，它被打包成一个模块并发布，所以我们在使用它时只需要引入这个依赖模块。

复制代码如下：angular.module ('myapp '，[' ng messages '])；怎么用？

现在让我们了解一下它的用法，代码如下：

！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='样式表'/脚本src=' http : ~/Javascript/angular . js '/脚本src=' http : ~/Javascript/angular-messages . js '/脚本style type=' text/CSS ' body { padding-top}/style/Head Div class=' col-MD-6 ' form role=' form ' name=' my form ' class=' form-horizontal ' novalidate Div class=' form-group ' Div class=' col-MD-2 ' username/Div class=' col-MD-10 '输入类型=' text '占位符=' ng-messages test ' name=' name ' ng-model=' username。name ' ng-min length=3ng-max length=20 required/HR/$ error:{ { my form . name . $ error } } HR/Div ng-messages=' my form . name . $ error ' Div ng-message=' required ' required/Div Div ng-message=' min length '字符太短，不能为3/Div ng-message=' maxlength '字符太长，不能为20/Div/Div/Div/form/Div/body/html脚本类型=' text/JavaScript ' angular . module('/script的效果如下：

可以看出，实际上ng通过$error来监控模型的变化，因为$error包含错误的详细信息。同时，如果在我们的应用场景中同时出现了几个错误，那么上面的代码只会按照ng-message的顺序显示一条错误消息。如果我们需要显示所有的错误，我们只需要添加ng-messages-multiple。

Type=' text '占位符=' test ' name=' name ' ng-model=' username。name ' Ng-min length=3ng-max length=20 required/Ng-messages=' my form。名字。$ error ' ng-messages-multiple Div ng-message=' required '必填项/divdiv ng-message='email '邮件格式不正确/Div ng-message=' minlength '字符太短，不适合3/Div ng-message=' maxlength '字符太长，不适合20/div/div效果如下：

如何复用？

我们在项目中的大多数验证信息都是高度通用的(在风格、描述等方面高度统一)。)，所以我们这里也会考虑重用，而ng也提供了解决方案。

是将其用作模板，并指定请求路径由ng自动添加。这是另一个指令ng-messages-include。

我们将上述身份验证信息保存到一个独立的html静态页面中，然后使用ng-messages-include指定请求路径。

代码：

div ng-messages=' my form . name . $ error ' ng-messages-多个ng-messages-include='@Url。内容(' ~/内容/模板/错误. html ')'/error.html分区

Div-message=' required '必填项/divdiv ng-message='email '邮件格式不正确/divdiv ng-message='minlength '字符太短3/divdiv ng-message='maxlength '字符太长超过20/div效果如下：

当然，模板中的一些字段错误提示在特殊时期可能无法满足您的要求。您可以添加自定义提示，如下所示：

div class=' error ' ng-messages=' registration _ form . name . $ error ' ng-messages-include=' templates/errors . html '！-按照ng-message - /div的顺序覆盖它自定义验证(指令)涉及很多细节和知识点。如果单纯用它来用，也许可以写函数，但是代码太丑太好吃，要几个月才能看懂一些皮毛。这部分暂时告一段落。当你完全理解了，也可以用《理解AngularJs指令》来学习。