妙用Bootstrap的 popover插件实现校验表单提示功能

<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>

/*重构 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}