你的位置:首页 > 软件开发 > Java > 利用jquery.validate以及bootstrap的tooltip开发气泡式的表单校验组件

利用jquery.validate以及bootstrap的tooltip开发气泡式的表单校验组件

发布时间:2016-07-18 11:00:09
表单校验是页面开发中非常常见的一类需求,相信每个前端开发人员都有这方面的经验。网上有很多成熟的表单校验框架,虽然按照它们默认的设计,用起来没有多大的问题,但是在实际工作中,表单校验有可能有比较复杂的个性化的需求,使得我们用这些插件的默认机制并不能完成这些功能,所以要根据自己的需要 ...

表单校验是页面开发中非常常见的一类需求,相信每个前端开发人员都有这方面的经验。网上有很多成熟的表单校验框架,虽然按照它们默认的设计,用起来没有多大的问题,但是在实际工作中,表单校验有可能有比较复杂的个性化的需求,使得我们用这些插件的默认机制并不能完成这些功能,所以要根据自己的需要去改造它们(毕竟自己还不到那个写一个完美的校验框架的层次)。我用过formValidation这个校验框架,虽然它跟bootstrap配合地很好,但是校验风格太死板,不太满足个性化的场景;后来我找到了jquery.validate,我发现这个框架还挺好的,因为它只提供校验机制,但是不提供特定校验的交互,有比较多的自定义的空间。在校验风格方面,有很多的形式,可以通过颜色,边框,动画,文本显示,弹框等多种方式来产生交互,至于要用哪种,就由需求以及自己的喜好来决定了。我偏向使用气泡提示的校验风格,因为气泡信息在界面上只显示于字段的周边,而不会对表单的内容有所改变,看起来体验比较好。本文介绍自己使用jquery.validate以及bootstrap的tooltip打造一种气泡式表单校验的思路,如果你有一些个性化较强的表单校验需求,希望这篇文章能对你有些参考价值。

在线demo(点击下面链接页面中的保存按钮,或者改变表单元素的值都能触发校验):

http://liuyunzhuge.github.io/blog/form/dist/html/demo3.html

demo相关的逻辑代码

https://github.com/liuyunzhuge/blog/blob/master/form/src/js/app/demo3.js

效果预览

利用jquery.validate以及bootstrap的tooltip开发气泡式的表单校验组件

组件实现

https://github.com/liuyunzhuge/blog/blob/master/form/src/js/mod/formValidation.js

https://github.com/liuyunzhuge/blog/tree/master/form/src/js/mod/validation

(有3个关联的文件,可通过以上链接查看)

其它事项

1)本文提供的校验实现依赖jquery,jquery.validate,bootstrap,并采用seajs来做模块化管理;

2)本文的demo结合之前写的form组件来一起使用,form管理的相关文章有:

简洁易用的表单数据设置和收集管理组件

进一步丰富和简化表单管理的组件:form.js

相关文档

1)jquery.validate使用说明 : https://jqueryvalidation.org/documentation/

2)tootip使用说明: http://v3.bootcss.com/javascript/#tooltips

下面就来看看该如何实现这个气泡式的表单校验吧。

1. 实现思路

用过jquery.validate就知道,这个插件默认的校验机制是在某一个表单元素校验失败后,把校验失败的信息用一个label元素包裹起来,然后插入到表单元素的后面。如果我们要换成气泡式的校验,那么首先就要考虑把它默认的插入失败信息的label元素的机制给取消掉,因为有了气泡,这个label显然是多余的;然后还要去修改它的校验控制逻辑,在元素校验失败的时候,用气泡组件显示失败信息,在校验成功的时候,移除可能存在的相关的气泡组件(因为这个元素之前如果有校验失败的情况,就会初始化相关的气泡组件)。至于这两个动作该怎么去处理,简单的方法就是改源码,但是改源码会带来更大的问题,一是不利于升级,二是不利于扩展,将来要做其它的个性化校验,就容易冲突。更好地办法是去查阅官方文档,找到最佳的api来做自定义,这样的话,就能完全避免改源码带来的问题。如果我们碰到改造一个已有的组件来完成另一个组件,并且不得不改源码的情况,更好的方式,不是直接把另一个组件的逻辑写到已有的组件里面,而是在已有的组件里面添加合适的接口,再通过接口来完成另一个组件。

翻阅jquery.validate的文档,可以了解到它最核心的api是validate这个方法,这是一个可以直接在jquery对象上调用的方法,在调用它的时候,可以通过option传递很多的选项,其中有两个选项,就可以用来完成我们的自定义功能:errorPlacement与showErrors,这两个方法的作用以及签名分别是:

errorPlacement : function(error, element) {…}

用来自定义表单元素失败信息的插入位置,如果这个方法是一个空函数,那么失败信息就不会插入到DOM里面去。它有两个参数,error表示失败信息生成的jquery对象;element表示单个的表单元素的jquery对象。

showErrors: function(errorMap, errorList) {…}

用来自定义校验信息的显示机制。它有两个参数,第一个参数以Object的形式,封装了当前校验操作的所有校验失败的信息;第二个参数errorList是一个数组,它的每个元素包含两个属性element和message分别代表失败的表单元素的jq对象和失败信息。另外在这个方法里面通过this.successList还可访问到所有校验成功的元素列表,这个successList也是一个数组,它的每个元素就是校验成功的表单元素的DOM对象。

通过前面对这两个方法的描述,大概就能知道该如何去完成自定义的表单校验功能了:

1)如果在errorPlacement这个option里什么都不做,那么校验的时候就不会插入到页面中了;

2)在showErrors里面,通过errorList和successList,我们可以分别遍历一遍,给失败的元素显示tooltip,然后给成功的元素移除tooltip。

下图是简单说明我的实现中对jquery.validate调用时的方式,只用到了前面提到的这两个选项。

利用jquery.validate以及bootstrap的tooltip开发气泡式的表单校验组件

接下来就来看看实际实现时的一些要点。

2. 详细实现

1)从代码组织说起

本文实现主要包含三个文件:

https://github.com/liuyunzhuge/blog/blob/master/form/src/js/mod/formValidation.js

https://github.com/liuyunzhuge/blog/tree/master/form/src/js/mod/validation(这个文件包含两个文件:validate.js和validator.js)

核心的文件是mod/validation文件夹下的两个。其中:

validate.js是最核心的代码,包含了所有的自定义逻辑;

validator.js仅仅是对jquery.validate默认的校验信息做的重置,因为它默认是英文的,而我的项目环境不需要考虑英文,所以就在这个文件里做了统一的处理;另外如果要添加一些全局的校验器的话,也可以考虑添加在这里。

mod/formValidation.js是在页面中直接引用的文件,它依赖mod/validation/validate.js,同时基于validate.js提供的接口,注册了一些自定义的处理,这些自定义的处理我会在后面进行说明,它的作用仅仅是为了将validate.js的功能与我之前写的form相关组件结合起来使用。

如果你对本文的实现感兴趣,但是对我写的form相关组件不感兴趣的话,完全可以考虑只关注validate.js和validator.js,因为没有formValidation.js,它们的功能依然是完整的。

2)新添加的option

在validate.js中可以看到有一个DEFAULTS,来定义本文实现的组件模块的option,除了对jquery.validate插件相关的option进行覆盖,还增加了以下option,来完成更丰富的功能:

useTooltip: true,//配置是否启用气泡提示来显示校验失败的信息,默认启用tipPlacement: 'right',//全局的气泡提示的位置tooltipDuration: 2500,//多久自动隐藏tooltipfieldConfig: {},//按字段名称配置一些东西,如:/** * { *  title: { *   fvTipTarget: function($field){ return $field.closest(...);}, //配置气泡提示关联的DOM元素 *   tipPlacement: 'top', //配置气泡提示的显示位置:上下左右 *   tooltipClass: 'tooltip-name', //配置气泡提示组件需要添加的css类 *   errorPlacement: function(error,element){}, //配置字段错误信息的插入位置 *   fvRelatedTarget: function($field){return ...}, //配置校验时关联影响的DOM元素 *  } * } * * 其中fvTipTarget fvRelatedTarget可以是function和jQuery对象两种形式 */fieldTypeConfig: {},//按字段类型配置一些东西,如:/** * { *  date: { *   fvTipTarget: function($field){ return $field.closest(...);}, //配置date类型的字段校验失败时气泡提示关联的DOM元素 *   tipPlacement: 'top', //配置date类型的字段校验失败时气泡提示的显示位置:上下左右 *   tooltipClass: 'tooltip-name', //配置date类型的字段校验失败时气泡提示组件需要添加的css类 *   errorPlacement: function(error,element){}, //配置date类型的字段的错误信息的插入位置 *   fvRelatedTarget: function($field){return ...}, //配置date类型的字段时校验时关联影响的DOM元素 *  } * } * 如果要为所有的类型定义一个配置,可把类型名称设置为all,如all: {errorPlacement: function(){..}} * 优先级: * fieldConfig > fieldTypeConfig<type> > Validation.defaultFieldTypeConfig > fieldTypeConfig<all> */

原标题:利用jquery.validate以及bootstrap的tooltip开发气泡式的表单校验组件

关键词:jquery

*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。

可能感兴趣文章

我的浏览记录