表单校验是页面开发中非常常见的一类需求，相信每个前端开发人员都有这方面的经验。网上有很多成熟的表单校验框架，虽然按照它们默认的设计，用起来没有多大的问题，但是在实际工作中，表单校验有可能有比较复杂的个性化的需求，使得我们用这些插件的默认机制并不能完成这些功能，所以要根据自己的需要去改造它们（毕竟自己还不到那个写一个完美的校验框架的层次）。我用过formValidation这个校验框架，虽然它跟bootstrap配合地很好，但是校验风格太死板，不太满足个性化的场景；后来我找到了jquery.validate，我发现这个框架还挺好的，因为它只提供校验机制，但是不提供特定校验的交互，有比较多的自定义的空间。在校验风格方面，有很多的形式，可以通过颜色，边框，动画，文本显示，弹框等多种方式来产生交互，至于要用哪种，就由需求以及自己的喜好来决定了。我偏向使用气泡提示的校验风格，因为气泡信息在界面上只显示于字段的周边，而不会对表单的内容有所改变，看起来体验比较好。本文介绍自己使用jquery.validate以及bootstrap的tooltip打造一种气泡式表单校验的思路，如果你有一些个性化较强的表单校验需求，希望这篇文章能对你有些参考价值。
在线demo（点击下面链接页面中的保存按钮，或者改变表单元素的值都能触发校验）：
demo相关的逻辑代码：
https://github.com/liuyunzhuge/blog/blob/master/form/src/js/app/demo3.js
效果预览：
组件实现：
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使用说明： #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) {…}