基于Bootstrap与jQuery-Validate的个人简易封装

先看下我运用到实际项目里面的界面效果：

移动端效果：

基本上来说，采用气泡式的提示能带来更好的用户体验，而且不会过多的占用页面的空间，在风格上与Bootstrap保持了一致，基本上还是采用原生的jQuery-validate的检验规则以及自定义规则，更改了部分少量源代码（加了一个方法），其他没有变化。

---

首先，我们先看下怎么调用的：

   var vali = $("#XXX").formValidate({        rules : {            name:{                required:true            },            loginName:{                required:true            },            mail : {              required : true,                email : true            },            sex : {              required : true            },            tel:{                required : true,                isPhone:true            },            idCard :{                required : true,                isIdCard : true            }        },        messages : {            name:"请输入姓名",            loginName:"请输入登录名",            sex : "请选择性别",            mail : {                required : "请输入邮箱地址",                email : "邮箱地址不正确"            },            tel:{                required : "请输入电话号码",                isPhone : "电话号码格式不正确"            },            idCard :{                required : "请输入身份证号",                isIdCard : "身份证号格式不正确"            }        }    });

使用validate检验框架的小伙伴们应该很熟悉rules与messages属性，本人封装的检验框架也仅仅只需要这两个属性即可完成检验，获取了检验对象vali后，可以使用vali.form()检验，最后的效果就是上图的效果。

---

那么， 这具体是怎么实现呢？
在这之前，我们需要具体了解下validate框架的API，如果你对这个框架的API很熟悉，则可以跳过此处。
我封装的validate 使用的属性不多，基本也就如下几个：

• focusInvalid: 检验失败以后失败的对象获得焦点
• onkeyup：输入字符时是否立即检验
• submitHandler：表单提交时触发的方法
• rules：检验规则
• messages：失败时显示的提示语
• errorPlacement：自定义失败时提示语的位置
• success：自定义成功时提示语的位置
  如果想要更加详细的API，请自行百度。

---

第二步，由于使用Bootstrap的气泡插件，我们需要了解下如何使用该插件，该插件在Bootstrap官网上有介绍，这里我采用的js调用该插件。
js的调用该插件很简单，引入Bootstrap.js与css以后使用

$("#XXX").tooltip();

即可。
可以传入的对象：

• title：气泡中的文字
• placement：方位，一个有四个上，下，左，右。我使用的是”bottom”(下)

---

看完基础部分，下面就开始看下怎么实现了。
引入jQuery,Bootstrap,jQuery-validate这些插件后我们先编写一个插件框架

$.fn.formValidate = function (options) {    return $(this).validate({        focusInvalid : true,            onkeyup : function(element) { $(element).valid(); },            submitHandler: function (form) {                if(options.submit)                {                    options.submit(form);                }            },            rules: options.rules,            messages: options.messages    })}

这样我们就可以通过$(“#XXX”).formValidate({})来调用这段代码完成检验。
由于我没有使用validate默认的提示，所以需要使用errorPlacement来自定义提示语位置
errorPlacement属性传入两个参数

• error 错误本体，可以通过error.text()方法获取错误提示语
• element 错误所在dom元素的引用

我的errorPlacement主要做了三件事：初始化气泡，使文本框外边框变红，在文本框中加上一个X标识错误
errorPlacement代码：

 errorPlacement : function (error, element)  {     element.tooltip("destroy");//清除以前的气泡     element.tooltip({//重新生成气泡             title : error.text(),             placement : 'bottom'         })     var par = $(element).parent();//获取父元素，为了加上红色边框使错误更加醒目      par.addClass("has-error");      var info = $('<span class="glyphicon glyphicon-remove-circle form-control-feedback" aria-hidden="true" style="right:20px"></span>');//就是文本框右边那个红色的X      if(par.find("span").length != 0)//清除之前红色的X      {          par.children("span").remove();      }      info.appendTo(par);//将红色的X追加到文本框上 }

success 方法主要就是清除errorPlacement做的那些事并告知用户该项正确。
success 属性传入两个参数

• str 不知道啥东西，我没用过这个东西
• element 所在dom元素的引用

success代码：

success : function (str,element) {     element.tooltip("destroy");//清除气泡     var par = $(element).parent();//获取元素父元素便于使文本框有红变绿      par.removeClass("has-error");//恢复文本框边框颜色      par.addClass("has-success");//使文本框边框颜色变成绿色      if(par.find("span").length != 0)//清除错误时文本框里面的红色X      {          par.children("span").remove();      }      var info = $('<span class="glyphicon glyphicon-ok-circle form-control-feedback" aria-hidden="true" style="right:20px"></span>');//就是一个勾      info.appendTo(par);}

到此，基本上就结束了，但是问题随之而来，以新增为例：如果用户检验失败了关闭了弹窗，下次再打开弹窗，他将会看到被检验过的表单，即全部都是错误提示的表单，表单的检验未初始化，影响了用户体验。为了解决这个问题，我找了很多资料，但都没有实际进展，决定动用杀手锏——改源码。

打开jQuery-validate源代码，在resetElements 方法里做一些改动
完整的resetElements代码

resetElements: function( elements ) {            var i;            if(this.settings.resetfunction)            {                for ( i = 0; elements[ i ]; i++ ) {                    this.settings.resetfunction.call( this, elements[ i ],                        this.settings.errorClass, "" );                }            }            else if ( this.settings.unhighlight ) {                for ( i = 0; elements[ i ]; i++ ) {                    this.settings.unhighlight.call( this, elements[ i ],                        this.settings.errorClass, "" );                    this.findByName( elements[ i ].name ).removeClass( this.settings.validClass );                }            } else {                elements                    .removeClass( this.settings.errorClass )                    .removeClass( this.settings.validClass );            }        }

也就加了一些关于resetfunction的东西，这些东西允许你在validate配置时使用resetfunction这个属性初始化表单检验。
配置的resetfunction与success类似，只是没有提示成功的操作，这里不再重述。

---

已知问题：
在非required=true的检验项中，如果用户输入了错误的格式，随后用户删除了输入内容，文本框没有被重置，仍然显示错误提示，虽然保存没有问题，但是给客户觉得这里好像必须输入一样。
如图

Demo下载地址：

http://download.csdn.net/detail/u010506919/9901818

原创帖，希望转载时附带上作者信息，谢谢。