欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  IT编程

AngularJs实现ng1.3+表单验证

程序员文章站 2022-04-28 21:00:58
前一篇文章详解angularjs实现表单验证说过，ng1.3+以后对于表单验证有了优化，它不再需要一个详细的表达式状态创建元素显示或隐藏。 例如：我们在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>

效果如下：

AngularJs实现ng1.3+表单验证

可以看出，其实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>

效果如下：

AngularJs实现ng1.3+表单验证

怎么复用？

我们的验证信息在一个项目中大多是通用性很高的（对于样式，描述等都有高度的统一性），因此我们这里也会考虑到复用，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>

效果如下：

AngularJs实现ng1.3+表单验证

当然，模板可能在特殊的时期某些字段错误提示不能满足你的要求，你可以添加自定义的提示如下：

<div class="error" ng-messages="signup_form.name.$error" 
ng-messages-include="templates/errors.html"> 
<!-- 
  按ng-message的顺序依次覆盖
--> 
</div>

自定义验证(指令)涉及到的细节知识点很多，如果简单地为了用而用，可能写得出功能，但是代码丑陋，太菜了，还需要花个把月方能弄懂点皮毛，这部分暂告一段落，等彻底明白了，在大家分享，大家亦可以结合《理解angularjs指令》进行学习。

上一篇： 解决angular的$http.post()提交数据时后台接收不到参数值问题的方法

下一篇： 详解AngularJS中module模块的导入导出

推荐阅读