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写的一个链表实现代码
Oct 25 Javascript
JS 文件传参及处理技巧分析
May 13 Javascript
javascript多种数据类型表格排序代码分析
Sep 11 Javascript
Javascript实现DIV滚动自动滚动到底部的代码
Mar 01 Javascript
bootstrap data与jquery .data
Jul 07 Javascript
ECMAScript6新增值比较函数Object.is
Jun 12 Javascript
三分钟带你玩转jQuery.noConflict()
Feb 15 Javascript
微信小程序实现图片轮播及文件上传
Apr 07 Javascript
jQuery扩展方法实现Form表单与Json互相转换的实例代码
Sep 05 jQuery
JavaScript模板引擎原理与用法详解
Dec 24 Javascript
Vue路由守卫及页面登录权限控制的设置方法(两种)
Mar 31 Javascript
原生js+canvas实现下雪效果
Aug 02 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关联数组快速排序的方法
2015/04/17 PHP
php微信支付接口开发程序
2016/08/02 PHP
php中请求url的五种方法总结
2017/07/13 PHP
零基础php编程好学吗
2019/10/11 PHP
ie 处理 gif动画 的onload 事件的一个 bug
2007/04/12 Javascript
改进版通过Json对象实现深复制的方法
2012/10/24 Javascript
javascript实现iframe框架延时加载的方法
2014/10/30 Javascript
Jquery中map函数的用法
2016/06/03 Javascript
Bootstrap按钮功能之查询按钮和重置按钮
2016/10/26 Javascript
关于AngularJs数据的本地存储详解
2017/01/20 Javascript
webpack独立打包和缓存处理详解
2017/04/03 Javascript
Vuex之理解Getters的用法实例
2017/04/19 Javascript
Angular 2父子组件之间共享服务通信的实现
2017/07/04 Javascript
iview给radio按钮组件加点击事件的实例
2017/09/30 Javascript
详解vue-cli@2.x项目迁移日志
2019/06/06 Javascript
element的el-table中记录滚动条位置的示例代码
2019/11/06 Javascript
如何手写简易的 Vue Router
2020/10/10 Javascript
python查找目录下指定扩展名的文件实例
2015/04/01 Python
Window10+Python3.5安装opencv的教程推荐
2018/04/02 Python
Python处理中文标点符号大集合
2018/05/14 Python
Python对切片命名的实现方法
2018/10/16 Python
django模板结构优化的方法
2019/02/28 Python
python爬虫之快速对js内容进行破解
2019/07/09 Python
Python实现不规则图形填充的思路
2020/02/02 Python
Python打包工具PyInstaller的安装与pycharm配置支持PyInstaller详细方法
2020/02/27 Python
基于python tkinter的点名小程序功能的实例代码
2020/08/22 Python
pycharm 实现光标快速移动到括号外或行尾的操作
2021/02/05 Python
CSS3弹性盒模型flex box快速入门心得(必看篇)
2016/05/24 HTML / CSS
香港唯港荟酒店预订:Hotel ICON
2018/03/27 全球购物
XMLHttpRequest对象在IE和Firefox中创建方式有没有不同
2016/03/23 面试题
会计电算化大学生职业规划书
2014/02/05 职场文书
财务总监管理岗位职责
2014/03/08 职场文书
社区健康教育工作方案
2014/06/03 职场文书
反四风个人对照检查材料
2014/09/26 职场文书
银行职员工作失误检讨书
2014/10/14 职场文书
2016年第32个教师节红领巾广播稿
2015/12/18 职场文书