AngularJS验证信息框架的封装插件用法【w5cValidator扩展插件】  更新时间:2016年11月03日 11:39:33   作者:why520crazy   这篇文章主要介绍了AngularJS验证信息框架的封装插件用法,分析了AngularJS表单验证规则并实例说明了w5cValidator扩展插件的相关使用技巧,需要的朋友可以参考下 本文实例讲述了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. 写验证提示信息需要写大量模板: Size (integer 0 – 10): {{size}} This is not valid integer! The value must be in range 0 to 10! w5cValidator 扩展插件的出现 Github上的源码地址为:https://github.com/why520crazy/w5c-validator-angular 目前版本v1.0.0 使用步骤: 1. 在项目中引用 w5cValidator.js 2. 在表单form上添加一个指令 w5c-form-validate 和 w5c-submit 如下所示:        邮箱              用户名       … 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 等 希望本文所述对大家AngularJS程序设计有所帮助。 您可能感兴趣的文章: 手把手教你自己写一个js表单验证框架的方法 js验证框架之RealyEasy验证详解 js验证框架实现代码分享 非常实用的js验证框架实现源码 附原理方法 教你用AngularJS框架一行JS代码实现控件验证效果 Node.js开发教程之基于OnceIO框架实现文件上传和验证功能 jquery validate.js表单验证的基本用法入门 js验证表单大全 JavaScript 表单验证正则表达式大全[推荐] 自定义javascript验证框架示例【附源码下载】 AngularJS 验证 插件 w5cValidator 相关文章 浅谈angularjs中响应回车事件 下面小编就为大家带来一篇浅谈angularjs中响应回车事件。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧 2017-04-04 AngularJS 单选框及多选框的双向动态绑定 本篇文章主要介绍了AngularJS 单选框及多选框的双向动态绑定的相关知识。具有很好的参考价值。下面跟着小编一起来看下吧 2017-04-04 Angularjs自定义指令实现三级联动 选择地理位置 这篇文章主要介绍了Angularjs自定义指令实现三级联动,选择地理位置,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 2017-02-02 Angular请求防抖处理第一次请求失效问题 这篇文章主要介绍了angular请求防抖及处理第一次请求失效的相关资料,需要的朋友可以参考下 2019-05-05 AngularJS动态加载模块和依赖的方法分析 这篇文章主要介绍了AngularJS动态加载模块和依赖的方法,结合实例形式分析了AngularJS使用ocLazyLoad实现动态加载的相关操作技巧,需要的朋友可以参考下 2016-11-11 AngularJS实现动态切换样式的方法分析 这篇文章主要介绍了AngularJS实现动态切换样式的方法,结合实例形式分析了AngularJS事件响应与样式动态控制相关操作技巧,需要的朋友可以参考下 2018-06-06 详解基于angular-cli配置代理解决跨域请求问题 本篇文章主要介绍了详解基于angular-cli配置代理解决跨域请求问题,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 2017-07-07 angularjs1.5 组件内用函数向外传值的实例 今天小编就为大家分享一篇angularjs1.5 组件内用函数向外传值的实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧 2018-09-09 Angular外部使用js调用Angular控制器中的函数方法或变量用法示例 这篇文章主要介绍了Angular外部使用js调用Angular控制器中的函数方法或变量用法,结合实例形式分析了Angular基于外部JS调用控制器中方法与变量的具体实现步骤与相关技巧,需要的朋友可以参考下 2016-08-08 AngularJS解决ng界面长表达式(ui-set)的方法分析 这篇文章主要介绍了AngularJS解决ng界面长表达式(ui-set)的方法,通过具体问题的分析并结合实例形式给出了AngularJS长表达式的相关使用技巧,需要的朋友可以参考下 2016-11-11 最新评论

本文实例讲述了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 等

希望本文所述对大家AngularJS程序设计有所帮助。

您可能感兴趣的文章:

  • 手把手教你自己写一个js表单验证框架的方法
  • js验证框架之RealyEasy验证详解
  • js验证框架实现代码分享
  • 非常实用的js验证框架实现源码 附原理方法
  • 教你用AngularJS框架一行JS代码实现控件验证效果
  • Node.js开发教程之基于OnceIO框架实现文件上传和验证功能
  • jquery validate.js表单验证的基本用法入门
  • js验证表单大全
  • JavaScript 表单验证正则表达式大全[推荐]
  • 自定义javascript验证框架示例【附源码下载】
张贴在3