基于jQuery.validate和Bootstrap工具提示开发冒泡式表单验证组件的详细说明

表单验证是页面开发中非常常见的需求。相信每个前端开发者都有这方面的经验。网上有很多成熟的表单验证框架，虽然按照他们的默认设计，使用起来没有太大问题。但是在实际工作中，表单验证可能会有复杂的、个性化的需求，这使得我们无法使用这些插件的默认机制来完成这些功能，所以我们应该根据自己的需求进行改革(毕竟我们还不到编写一个完善的验证框架的水平)。我使用表单验证作为验证框架。虽然它与bootstrap配合得很好，但验证风格过于死板，无法满足个性化场景。后来发现jquery.validate，发现这个框架挺好的，因为只提供了验证机制，没有提供具体的验证交互，所以定制的空间比较大。在检查样式方面，有很多形式，可以通过颜色、边框、动画、文本显示、弹出框架等产生交互。至于用哪一个，是由需求和自己的喜好决定的。我比较喜欢用冒泡提示的勾选样式，因为冒泡信息只显示在界面上的字段周围，不会改变表单的内容，所以看起来体验比较好。本文介绍了使用jquery.validate和bootstrap tooltip创建气泡表单检查的思想。如果您有一些个性化的表单检查要求，希望本文能为您提供一些参考价值。

在线演示(单击以下链接页面中的保存按钮或更改表单元素的值以触发验证):

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

与演示相关的逻辑代码：

https://github.com/liyunzjump/blog/blob/master/form/src/js/app/demo 3 . js

效果预览：

组件实现：

https://github.com/liyunzjump/blog/blob/master/form/src/js/mod/formvalidation . js

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

(有3个相关文件，可以通过以上链接查看)

其他事项：

1)本文提供的验证实现依赖于jquery、jquery.validate、bootstrap，使用seajs进行模块化管理；

2)本文的演示与之前编写的表单组件一起使用。关于表单管理的相关文章包括：

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

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

相关文件：

1)jquery.validate指令： https://jqueryvalidation.org/documentation/

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

让我们来看看如何实现这种气泡形式的检查。

1.实施思路

在使用jquery.validate之后，我们知道这个插件的默认验证机制是用一个标签元素包装验证失败信息，并将其插入到form元素之后。如果要改成冒泡验证，首先要考虑取消其默认的插入失败信息的标签元素的机制，因为有了冒泡，这个标签显然是多余的；然后，它需要修改其验证控制逻辑。当一个元素验证失败时，会显示带有气泡成分的失败信息，验证成功后，会移除可能存在的相关气泡成分(因为如果之前元素验证失败，会初始化相关气泡成分)。至于如何处理这两个动作，简单的方法就是改变源代码，但是改变源代码会带来更多的问题，一个不利于升级，另一个不利于扩展，未来其他个性化验证很容易发生冲突。更好的方法是查阅官方文档，找到最好的api进行定制，这样就可以完全避免更改源代码带来的问题。如果我们在转换一个现有组件完成另一个组件后，还要更改源代码，那么更好的方法不是将另一个组件的逻辑直接写入现有组件，而是在现有组件中添加一个合适的接口，然后通过接口完成另一个组件。

翻看jquery.validate的文档，可以知道它的核心api是validate方法，可以直接在jquery对象上调用。调用它时，可以通过option传递很多选项，其中两个选项可以用来完成我们的自定义函数：errorPlacement和showErrors。这两种方法的功能和特征是：

错误放置：函数(错误，元素){…}用于自定义表单元素失败信息的插入位置。如果这个方法是一个空函数，失败信息不会被插入到DOM中。它有两个参数，错误表示jquery对象生成的失败信息；元素表示单个表单元素的jquery对象。

Showerrors :函数(错误映射、错误列表){…}用于自定义验证信息的显示机制。它有两个参数。第一个参数以Object的形式封装了当前验证操作的所有验证失败信息。第二个参数errorList是一个数组，它的每个元素包含两个属性，element和message，分别表示失败表单元素的jq对象和失败信息。此外，在此方法中，您可以通过this.successList访问所有成功验证的元素的列表，该列表也是一个数组，其每个元素都是成功验证的表单元素的DOM对象。

通过以上对这两种方法的描述，我们大概可以知道如何完成自定义表单验证功能：

1)如果errorPlacement选项中没有任何操作，则检查时不会将其插入页面；

2)在showErrors中，我们可以分别遍历errorList和successList，对失败的元素显示工具提示，然后对成功的元素移除工具提示。

下图简要描述了如何在我的实现中调用jquery.validate，仅使用上述两个选项。

接下来，我们来看看实际实现中的一些关键点。

2.详细实施

1)来自代码组织

本文的实现主要包括三个文件：

https://github.com/liyunzjump/blog/blob/master/form/src/js/mod/formvalidation . js

https://github.com/liyunzjump/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的功能和我之前写的表单相关组件结合起来。

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

2)新添加的选项

您可以看到validate.js中有一个DEFAULTS来定义本文实现的组件模块的选项。除了覆盖与jquery.validate插件相关的选项之外，还添加了以下选项来完成更丰富的功能：

使用工具提示：为真。//配置是否启用气泡提示显示验证失败信息。默认情况下，尖端位置：“右侧”处于启用状态。//全局气泡提示的位置工具提示持续时间3360 2500。//自动隐藏工具提示字段的频率配置3360 {}。//通过字段名配置一些东西，比如：/* * * * * { * title : { * fvtiptarget 3360 function($ field){ return $ field . closer(.);}，//配置气泡提示关联的DOM元素* tipPlacement: ' top '，//配置气泡提示的显示位置：上下左右*工具提示类：' tooltip-name '，//配置气泡提示组件要添加的css类*错误放置：函数(Error，Element) {}，//配置字段错误信息的插入位置* fvreaded Target 3360 Function($ field){ return.}，//配置验证时受关联影响的DOM元素*} *} * *其中fvTipTarget fvRelatedTarget可以是函数和jQuery对象的形式*/fieldTypeConfig: {}，//根据字段类型配置一些东西。例如：/* * * * * { * date : { * fvtiptarget :函数($ field) {return $ field。最近的(.);}，//配置日期类型字段验证失败时气泡提示关联的DOM元素* tipPlacement :' top '。//配置日期类型字段校验失败时气泡提示的显示位置：上下左右*工具提示类：‘工具提示-名称’。//配置css类* ErrorPlacement :函数(Error，Element) {}当日期类型字段验证失败时，气泡提示组件添加。//为日期* fvrlatedtarget : function($ field)类型的字段插入错误信息的位置{return.}、//配置日期类型的字段时验证时受相关性影响的DOM元素*} *} *如果要为所有类型定义一个配置，可以将类型名称设置为all。例如，all : { error placement : function()}.}} *优先级：* field config field typeconfigtype验证。defaultfield typeconfig field typeconfigall */详细功能如下：

UseTooltip确定是否启用气泡验证，默认值为true。如果为false，validate.js提供的模块将使用默认的验证机制来显示验证逻辑。

TipPlacement:全局气泡提示显示位置可以使用bootstrap工具提示显示到元素的顶部、底部、左侧和右侧，气泡提示的默认位置可以通过此改变；

TooltipDuration:配置显示气泡的时间。我在显示气泡时提供的实现逻辑是：验证失败时，会显示tootip，然后过了这个选项指定的时间后自动消失。当鼠标再次移动到失败的元素中时，工具提示将再次显示，当鼠标移出时，工具提示将再次消失。

FieldConfig:可以根据字段名调用一些配置，注释中有例子。可配置选项描述如下：

-fvTipTarget:用于自定义显示哪些元素气泡；-tipPlacement:配置元素的冒泡提示的显示位置-tooltipClass:自定义冒泡组件的css类-errorPlacement:自定义元素的失败信息的插入位置-fvrlatedtarget:自定义元素验证时，需要关联其他会受到影响的元素。事实上，当表单元素验证失败时，您还会将相关的css类validClass和errorClass同步管理到其他元素。

需要注意的是，fieldConfig是根据字段元素的名称进行配置的。因为只能根据名称找到对应的元素，所以name属性必须在form元素上，这样才能找到fieldConfig中的配置项。

字段类型配置：可以根据字段类型进行一些配置。它的配置项与fieldConfig一致，但它的优点是可以为同一类型的字段指定相同的配置，从而节省了fieldConfig中的重复配置。

需要注意的是，fieldType是由表单元素上的Type属性、data-type属性或data-fv-type属性指定的，优先级为：data-fv-type data-type。在fieldTypeConfig中，可以使用特殊类型all，它不需要在表单元素上指定，用于统一配置所有字段。在validate.js模块的静态成员上，提供了一个defaultFieldTypeConfig对象。通过扩展这个对象，可以提供一些根据字段类型的默认配置，方便统一处理。最后一点将在静态成员部分详细描述。

一些与jquery.validate相关需要被覆盖的选项及其描述如下：

Debug: true，//防止成功验证后自动提交表单。//验证成功后屏蔽表单提交功能，外部表单组件负责提交ignore : '[type=' hidden ']: not(。Fv-是)。[禁用] :未(。Fv-是)，Fv-no '，//用于过滤校验中未涉及的元素errorelement:' I '，//用于在校验失败时将校验失败的信息errorclass3360' Fv-error '，//对应的class valid class : ' Fv-进行包装。

A.为什么要阻止表单自动提交，因为我更喜欢主动控制表单提交；

B.忽略、隐藏或禁用的表单元素不会被完全排除，有时隐藏的元素也可以用于验证。

3)核心实施

核心实现方法是下面的代码：

$element.validate($。extend(opts，{ errorPlacement:函数(error，element){ if(opts . usetooltip){ return；}//jquery . validate组件验证失败信息的默认插入方式是：在此元素后插入验证失败信息//我们可以通过fieldConfig和field typeconfig var _ error placement=getcommconfig(' error placement '，element，opts)自定义按字段和字段类型的插入方式；if(！isFunc(_ error placement)){ _ error placement=function(){ error . insertafter(元素)；} } _errorPlacement(错误，元素)；}，showerrors 3360 function(error map，error list){//当验证失败时重写此方法以显示工具提示//显示失败信息var successlist=this。工具提示未启用时，默认情况下为successlist//处理字段if ($)。isarray (errorlist)) {errorlist。foreach(函数(项){setrelatedtargetstyle(项。元素，opts，true ),未通过此验证；如果(opts.useTooltip) {//显示失败tooltip showerror项(item，opts，that)；} });} if ($。isArray(SuccessList)){ SuccessList . foreach(function(element){ setrelatedTargetStyle(element，opts，false)；如果(opts.useTooltip) {//移除可能失败导致的tooltip showsuccessionitem(元素，opts，that)；} });}//官方文档要求自定义showErrors后，通过调用以下方法，将this.defaultShowErrors()完全内置；}}));这两个代码应该很好理解，因为每个部分的逻辑都已经被单独提取和封装了，细节可以一个一个读出来：

以上每种方法都比较简单，我就不拆开介绍了。

4)继承jquery.validate提供的其他api方法

在实际工作中，表单验证的逻辑有时很复杂，尤其是在字段和验证规则有增删改的情况下。因此，查看jquery.validate的文档，我们可以发现它不仅提供了api validate，还提供了许多其他有用的方法。为了方便起见，我们直接继承jquery.validate.js提供的其他方法，这些方法没有：

//将jquery.validate的api方法代理到它自己的for(本例中为var i)。_validator) {if(！(此处为I)IsFunc(此处为。_ validator[I]){ this[I]=(function(context，func){ return func(){ return func . apply(context，arguments)；} })(这个。_validator，这个。_ validator[I])；}}5)表单验证重置

一个非常常见的要求是，有时需要重置表单。此时，除了重置表单元素的值之外，还需要重置其验证状态。虽然jquery.validate提供了相关的方法，但是我们需要自定义表单验证的重置功能，因为我们使用了工具提示组件，并添加了一些其他的处理，主要包括工具提示组件的销毁和一些状态的恢复：

resetForm:函数(){ var $element=this。$element，opts=this.options//清除tooltip组件和绑定事件if(opts . usetooltip){ $ element . find('。Fv-tip-target ')。每个(function () {vartooltip=$ (this))。数据(' bs . tooltip ')；checkHideTimeout(工具提示)；tooltip tooltip . destroy()；}).关闭('。Fv’)；} $element.find('。fv相关目标')。remove CLaSS(opts . valid CLaSS ' Fv-related-target ' opts . error CLaSS)；这个。_ validator . reset form()；}6)静态成员

Validate.js为一些静态成员提供了属性和方法。使用的方法见mod/formValidation.js。在…之中

DefaultFieldTypeConfig:用于根据字段类型存储一些全局配置项；

ExtendFieldTypeConfig:用于扩展defaultFieldTypeConfig。

ValidateEvents:用于存储一些全局自定义的验证事件。

AddValidateEvent和removeValidateEvent用于添加和删除自定义验证事件。

为什么会有用户自定义的验证事件？因为在jquery.validate的默认机制下，部分表单元素的变更事件不会触发当前元素的验证，所以无法在界面上实时反馈元素的验证状态。这是用来帮助我们自动注册元素的一些特殊事件，然后在这些事件回调中主动触发元素的验证。

3.用例子

从与演示相关的逻辑代码中，我们可以看到实际的使用示例：

从这个例子也可以看出，新的Validation组件和直接使用jquery.validate没有太大的区别，就是选项多了，规则和消息都是jquery.validate提供的选项，fieldTypeConfig是新的选项；但是在功能上，验证的方式完全变成了我所期待的冒泡验证。与jquery.validate的默认体验相比，这种体验肯定要好得多。

4.相关CSS

Css也是演示中正确显示验证效果的一个非常重要的部分。可以在src/css/form.css中搜索与demo相关的css，可以通过关键字. fv搜索与验证相关的css。

5.摘要

介绍了一种如何根据现有的验证框架jquery.validate完成个性化表单验证功能的思路，未来遇到其他个性化验证需求时，也可以参考这种思路，尝试做一些统一的自定义组件。毕竟，基于现有成就的扩张比我们自己造轮子更快更轻。本文提供的验证方法非常好用。它还支持添加、删除和修改验证规则。方法同公文。欢迎使用并讨论相关问题。我在项目中使用它，尤其是在管理系统中开发时，非常高效。

希望以上对大家有所帮助。如果你有任何问题，请给我留言，边肖会及时回复你。非常感谢您对我们网站的支持！