AngularJS 验证信息框架的封装

AngularJS 的表单验证规则

angular.js 的表单验证规则有 required(必填项)，type="number"(必须为数字)，type="email"(必须为邮箱地址)，ng-max（最大值），ng-min（最小值），ng-max-length（最大长度），ng-min-length（最小长度），ng-pattern（正则验证）等等，而且angular写自定的验证规则也很简单。
具体的验证细节参考官方文档：http://docs.angularjs.org/guide/forms

AngularJS 默认的验证是实时的，如果输入框输入值验证通过会在input上加入class ng-valid，如果验证不通过会自动添加 class ng-invalid，输入框输入了值之后自动加上了 class ng-dirty，这样系统可以很简单的通过修改 ng-invalid ng-valid ng-dirty 三个样式达到验证提示的目的。但是如果验证失败需要提示一段文字，那么只有通过编写模板来达到。

Angular.js 验证的缺点

1. 提示信息是实时显示的，有时候我们更想要通过表单提交触发验证
2. 写验证提示信息需要写大量模板：

   <div>
          Size (integer 0 - 10):
          <input type="number" ng-model="size" name="size"
                 min="0" max="10" integer />{{size}}<br />
          <span ng-show="form.size.$error.integer">This is not valid integer！</span>
          <span ng-show="form.size.$error.min || form.size.$error.max">
            The value must be in range 0 to 10!</span>
   </div>
   

w5cValidator 扩展插件的出现

Github上的源码地址为：https://github.com/why520crazy/w5c-validator-angular
目前版本v1.0.0
使用步骤：

1. 在项目中引用 w5cValidator.js

2. 在表单form上添加一个指令 w5c-form-validate 和 w5c-submit 如下所示：

   <form class="form-horizontal cw-form demo-form" role="form" w5c-submit="js_save_entity(form_validate)"
                    w5c-form-validate="" novalidate name="form_validate">
   　　<div class="form-group">
   　　　　<label class="col-sm-2 control-label">邮箱</label>
   　　　　<div class="col-sm-10">
   　　　　　　　<input type="email" name="email" ng-model="entity.email" required="" class="form-control" placeholder="输入邮箱">
       </div>
   </div>
   <div class="form-group">
       <label class="col-sm-2 control-label">用户名</label>
   　　　  <div class="col-sm-10">
             <input required="" ng-pattern="/^[A-Za-z]{1}[0-9A-Za-z_]{1,19}$/" ng-model="entity.name" class="form-control" name="user_name" placeholder="输入用户名">
       </div>
   </div>
   　　...
   </form>
   

   w5c-submit 函数是表单验证成功后执行的事件，验证失败不会执行

3. 没了，使用就这么简单

w5cValidator 使用注意事项：

1. w5cValidator 默认的错误提示使用了bootstrap的样式和布局，使用到你的项目中需要修改默认的 show_error, remove_error 方法，可以是tip提示，可以是统一在某个地方显示等等

2. w5cValidator 可以设置光标移走input时是否显示错误提示，默认false

3. w5cValidator 自带了默认的提示信息，同时支持自定义验证规则提示信息

4. angular.js的所有验证信息都是保存在form表单中的，w5cValidator也是监控表单元素的属性来实现的，使用必须要设置form以及每个元素的name属性，否则错误信息就找不到对应的元素

5. 看下以下的代码你就能明白一切了：

   w5cValidator.init({
            //blur_trig   : false,
            //show_error  : function (elem, error_messages) {
            //
            //},
            //remove_error: function (elem) {
            //
            //}
   });
   w5cValidator.set_rules({
           user_name: {
                required: "输入的用户名不能为空",
                pattern : "用户名必须输入字母、数字、下划线,以字母开头"
           }
   });
   

当然目前的 w5cValidator 还比较原始，NgNice的验证提示就是使用了w5cValidator

未来规划中的 w5cValidator 2.0

1. 现在只能设置全局的显示类型，将来要支持单个表单的配置项，整个项目偶尔会有提示信息不同的情况
2. 代码重构，以AngularJS的方式编写扩展
3. 添加一些 AngularJS没有的验证类型 如 repeat ，uniquecheck 等

如果大家有什么更好的建议 可以共同探讨！！！

共1条评论

 

社区

0 喜欢

 

 

 

 

140

 

发  布

 

 

按时间排序

|

新浪微博

|

腾讯微博

 

新手(游客)

 

form表单里如果不添加w5c-form-submit属性，则获取不到validateForm.$errors？？？

 

本文来源于：http://www.ngnice.com/posts/69f774dc4d3190