ng1.3+表单验证

时间 2019-11-06

标签 ng1.3 表单验证栏目 HTML 繁體版

原文原文链接

前一篇文章说过，ng1.3+之后对于表单验证有了优化，它再也不须要一个详细的表达式状态建立元素显示或隐藏。javascript

例如：咱们在ng1.3以前的版本都须要以下写法：css

<div class="error" ng-show="signup_form.name.$dirty && signup_form.name. $invalid && signup_form.submitted">

ng1.3以后新增了一个ngMessages指令，他被打包成一个模块发布，所以咱们使用的时候只须要将这个依赖模块引入便可html

angular.module('myApp', ['ngMessages']);

怎么用？

如今咱们学习一下，它的用法，Code以下：java

<!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>

效果以下：bootstrap

能够看出，其实ng是经过$error来监视模型的变化，由于$error中包含了错误的详细信息，同时，若是咱们的应用场景中若是同时，有好几处错误，那么，上面代码按照ng-message的顺序只会显示一条错误信息，若是咱们须要所有显示出来只须要添加 ng-messages-multipleapp

 <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指定请求路径便可。ui

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>

　　　　　自定义验证(指令)涉及到的细节知识点不少，若是简单地为了用而用，可能写得出功能，可是代码丑陋，太菜了，还须要花个把月方能弄懂点皮毛，这部分暂告一段落，等完全明白了，在你们分享，以后会对指令，服务先行学习下...

　　　　备注：我也是刚刚开始学习，若是你喜欢本文的话，推荐共勉，谢谢！