AngularJS验证信息框架的封装插件用法【w5cValidator扩展插件】


Posted in Javascript onNovember 03, 2016

本文实例讲述了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程序设计有所帮助。

Javascript 相关文章推荐
JavaScript 错误处理与调试经验总结
Aug 10 Javascript
from 表单提交返回值用post或者是get方法实现
Aug 21 Javascript
jquery左边浮动到一定位置时显示返回顶部按钮
Jun 05 Javascript
jQuery遮罩层效果实例分析
Jan 14 Javascript
AngularJS基础 ng-keypress 指令简单示例
Aug 02 Javascript
JS 实现计算器详解及实例代码(一)
Jan 08 Javascript
深入理解js中的加载事件
Feb 08 Javascript
JavaScript登录记住密码操作(超简单代码)
Mar 22 Javascript
jQuery实现的表格前端排序功能示例
Sep 18 jQuery
详解如何使用webpack打包JS
Jun 21 Javascript
angularJs select绑定的model取不到值的解决方法
Oct 08 Javascript
JS删除对象中某一属性案例详解
Sep 08 Javascript
基于vuejs+webpack的日期选择插件
May 21 #Javascript
Vue.js创建Calendar日历效果
Nov 03 #Javascript
AngularJS中transclude用法详解
Nov 03 #Javascript
基于Vue2的移动端开发环境搭建详解
Nov 03 #Javascript
AngularJS控制器之间的通信方式详解
Nov 03 #Javascript
最细致的vue.js基础语法 值得收藏!
Nov 03 #Javascript
AngularJS创建自定义指令的方法详解
Nov 03 #Javascript
You might like
php ob_flush,flush在ie中缓冲无效的解决方法
2010/05/09 PHP
php $_SERVER[&quot;REQUEST_URI&quot;]获取值的通用解决方法
2010/06/21 PHP
php下封装较好的数字分页方法
2010/11/23 PHP
ajax+php控制所有后台函数调用
2015/07/15 PHP
Yii使用DeleteAll连表删除出现报错问题的解决方法
2016/07/14 PHP
值得分享的php+ajax实时聊天室
2016/07/20 PHP
PHP实现的文件浏览器功能简单示例
2019/09/12 PHP
解决laravel5.4下的group by报错的问题
2019/10/16 PHP
在TP5数据库中四个字段实现无限分类的示例
2019/10/18 PHP
Prototype使用指南之base.js
2007/01/10 Javascript
JavaScript 获取用户客户端操作系统版本
2009/08/25 Javascript
类似GMAIL的Ajax信息反馈显示
2010/02/16 Javascript
IE6/7/8/9不支持exec的简写方式
2011/05/25 Javascript
JS基础之undefined与null的区别分析
2011/08/08 Javascript
密码强度检测效果实现原理与代码
2013/01/04 Javascript
JavaScript缓冲运动实现方法(2则示例)
2016/01/08 Javascript
jQuery qrcode生成二维码的方法
2016/04/03 Javascript
jQuery查找节点方法完整实例
2016/09/13 Javascript
React数据传递之组件内部通信的方法
2017/12/31 Javascript
Angular ElementRef简介及其使用
2018/10/01 Javascript
浅谈JavaScript 代码整洁之道
2018/10/23 Javascript
微信小程序使用canvas的画图操作示例
2019/01/18 Javascript
新手快速上手webpack4打包工具的使用详解
2019/01/28 Javascript
微信小程序中如何计算距离某个节日还有多少天
2019/07/15 Javascript
解决vuex数据异步造成初始化的时候没值报错问题
2019/11/13 Javascript
Vue+abp微信扫码登录的实现代码示例
2020/01/06 Javascript
微信小程序返回上一级页面的实现代码
2020/06/19 Javascript
[00:59]DOTA2英雄背景故事——上古巨神
2020/06/28 DOTA
Python写的Socks5协议代理服务器
2014/08/06 Python
在python的类中动态添加属性与生成对象
2016/09/17 Python
python3 拼接字符串的7种方法
2018/09/12 Python
keras得到每层的系数方式
2020/06/15 Python
最畅销的视频游戏享受高达90%的折扣:CDKeys
2020/02/10 全球购物
高级技校毕业生自荐信
2013/11/18 职场文书
党员违纪检讨书
2014/02/18 职场文书
关于读书的演讲稿600字
2014/08/27 职场文书