先看下我運用到實際專案裡面的介面效果：

移動端效果：

基本上來說，採用氣泡式的提示能帶來更好的使用者體驗，而且不會過多的佔用頁面的空間，在風格上與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下載地址：

原創帖，希望轉載時附帶上作者資訊，謝謝。