基于jQuery.validate及Bootstrap的tooltip开发气泡样式的表单校验组件思

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

2）新添加的option

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

useTooltip: true,//配置是否启用气泡提示来显示校验失败的信息，默认启用
tipPlacement: 'right',//全局的气泡提示的位置
tooltipDuration: 2500,//多久自动隐藏tooltip
fieldConfig: {},//按字段名称配置一些东西，如：
/**
 * {
 * 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>
 */

详细作用如下：

useTooltip决定了是否启用气泡校验的功能，默认为true，如果为false，validate.js提供的模块将使用默认的校验机制来显示校验逻辑；

tipPlacement: 全局的气泡提示显示的位置，用过bootstrap的tooltip就知道，它可以显示到一个元素的上下左右，通过这个可以改变气泡提示的默认位置；

tooltipDuration: 配置气泡显示的时间。我提供的实现，在显示气泡时的逻辑是：在校验失败的时候，显示tootip，然后在这个选项指定的时间过去之后，自动消失，当鼠标再次移入失败元素的时候，tooltip会再次显示，鼠标移出的时候再消失。