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 相关文章推荐
创建一个复制UBB软件信息的链接或按钮的js代码
Jan 06 Javascript
ko knockoutjs动态属性绑定技巧应用
Nov 14 Javascript
js arguments,jcallee caller用法总结
Nov 30 Javascript
js代码实现随机颜色的小方块
Jul 30 Javascript
JavaScript 对象字面量讲解
Jun 06 Javascript
精彩的Bootstrap案例分享 重点在注释!(选项卡、栅格布局)
Jul 01 Javascript
移动设备手势事件库Touch.js使用详解
Aug 18 Javascript
微信小程序收藏功能的实现代码
Jun 12 Javascript
8个有意思的JavaScript面试题
Jul 30 Javascript
前后端常见的几种鉴权方式(小结)
Aug 04 Javascript
vue实现分页加载效果
Dec 24 Javascript
vue项目打包之开发环境和部署环境的实现
Apr 23 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操作文件方法问答
2007/03/16 PHP
推荐十款免费 WordPress 插件
2015/03/24 PHP
jQuery ajax cache缓存问题
2010/07/01 Javascript
js内置对象 学习笔记
2011/08/01 Javascript
使用JavaScript 实现各种跨域的方法
2013/05/08 Javascript
js函数中onmousedown和onclick的区别和联系探讨
2013/05/19 Javascript
JQuery给元素绑定click事件多次执行的解决方法
2014/05/29 Javascript
利用jquery制作滚动到指定位置触发动画
2016/03/26 Javascript
用JS生成UUID的方法实例
2016/03/30 Javascript
js实现复选框的全选和取消全选效果
2017/01/03 Javascript
微信小程序 image组件binderror使用例子与js中的onerror区别
2017/02/15 Javascript
vue.js开发环境安装教程
2017/03/17 Javascript
Layui带搜索的下拉框的使用以及动态数据绑定方法
2019/09/28 Javascript
vue 判断元素内容是否超过宽度的方式
2020/07/29 Javascript
Python 异常处理实例详解
2014/03/12 Python
用Python编程实现语音控制电脑
2014/04/01 Python
python通过文件头判断文件类型
2015/10/30 Python
Python编程对列表中字典元素进行排序的方法详解
2017/05/26 Python
python感知机实现代码
2019/01/18 Python
Python 支付整合开发包的实现
2019/01/23 Python
python字符串替换re.sub()实例解析
2020/02/09 Python
Python交互环境下打印和输入函数的实例内容
2020/02/16 Python
Python3标准库glob文件名模式匹配的问题
2020/03/13 Python
Python虚拟环境的创建和包下载过程分析
2020/06/19 Python
Python做图像处理及视频音频文件分离和合成功能
2020/11/24 Python
世界上最大的在线旅行社新加坡网站:Expedia新加坡
2016/08/25 全球购物
日常奢侈品,轻松购物:Verishop
2019/08/20 全球购物
开办大学饮食联盟创业计划书
2014/01/29 职场文书
个人工作表现评语
2014/04/30 职场文书
关于责任的演讲稿
2014/05/20 职场文书
开展党的群众路线教育实践活动工作总结
2014/11/05 职场文书
担保贷款承诺书
2015/04/30 职场文书
住房公积金贷款工资证明
2015/06/12 职场文书
运动员代表致辞
2015/07/29 职场文书
2016年教师政治思想表现评语
2015/12/02 职场文书
MySql存储过程之逻辑判断和条件控制
2021/05/26 MySQL