巧用 Bootstrap的 popover插件 實現表單校驗提示

最近的項目，用Bootstrap比較多。瀏覽Bootstrap文檔，發現 popover 插件特別適合作表單校驗出錯的提示。

由於使的很是頻繁，最近把它封住下，作成 jQuery的插件。 經過 本插件，在 html標籤中 定義好 data-vaild="校驗正則" data-errmsg="錯誤信息便可"。爲何 要把 校驗規則 寫到 html 標籤中呢？由於 我還用它作了 後臺 的校驗規則和提示（後臺沒用Node，如今用的ASP，忙完專門再發文寫下原理）。

演示地址：點擊查看演示

<input class="form-control" id="u_exam_idnumber" name="u_exam_idnumber" placeholder="請輸入中考准考證號" data-vaild="^\d{5,20}$" data-errmsg="准考證號碼不正確，僅能包含數字"

最終實現的效果以下：

插件代碼以下：

"use strict";
/*
    jQuery+Bootstrap 校驗表單 by Miaoqiyuan.cn
    原理：http://www.miaoqiyuan.cn/p/jquery-bootstrap-vaild
    演示：http://www.miaoqiyuan.cn/products/vaild/index.html
    源碼：http://www.miaoqiyuan.cn/products/vaild/jQuery.Vaild.js
*/
(function(jQuery){
    $.extend({
        Vaild : function(_this){
            if( !!$(_this).data("vaild") ){
                var pattern = new RegExp($(_this).data("vaild"));
                if( pattern.test( $(_this).val() ) ){
                    $(_this).parent().removeClass("has-error").addClass("has-success");
                    $(_this).popover("destroy");
                }else{
                    $(_this).parent().addClass("has-error").removeClass("has-success");
                    $(_this).data("toogle", "top").data("placement", "top").data("container", "body").data("content", $(_this).data("errmsg")).popover({"trigger":"manual"}).popover("show");
                    return false;
                }
            }else{
                $(_this).parent().addClass("has-success");
            }
            return true;
        }
    });
    $.fn.extend({
        Vaild : function(){
            $(this).each(function(index, _this){
                  $(_this).submit(function(){
                      var checkResult = true;
                      for(var i = 0 ; i < _this.length; i++ ){
                          checkResult = $.Vaild(_this[i]) && checkResult;
                      }
                      return checkResult;
                  });
                  for(var i = 0 ; i < _this.length; i++ ){
                      $(_this[i]).blur(function(){
                          $.Vaild(this);
                      });
                  }
            });
        }
    });
})(jQuery);

調用的時候很是簡單，直接使用如下代碼：

<script>
$("form").Vaild();
</script>

當表單失去焦點時，若是不合法，會直接提示錯誤。點擊提交時，若是有表單項目不合法，會阻止表單繼續提交。

popoover默認的背景是 白色的，不能起到 警示做用，並且 padding 設置過大，太佔用空間了。 最後調整下CSS，就實現了 截圖的效果。

/*重構 popover */
.popover{background:#C00;color:#FFF;}
.popover .popover-content{padding:1px 5px;}
.popover.top>.arrow:after{border-top-color:#C00;}

/*重構 bootstrap 默認錯誤提示 */
.has-error input,
.has-error textarea,
.has-error select{background-color:#F2DEDE;}
.has-success input,
.has-success textarea,
.has-success select{background-color:#DFF0D8}