Recently, there are many uses Bootstrap. Browsing the Bootstrap document, I found that the popover plug-in is particularly suitable for prompts for form verification errors.
Because it is made very frequently, it was recently sealed and made into a jQuery plug-in. Through this plug-in, just define data-vaild="checking rules" data-errmsg="Error message" in the html tag. Why do we need to write verification rules into the html tag? Because I also used it to verify the background (the background does not use Node, I am using ASP now, and I will post a special article to write down the principles after I finish my work).
<input id="u_exam_idnumber" name="u_exam_idnumber" placeholder="Please enter the admission ticket number for the junior high school entrance examination" data-vaild="^/d{5,20}$" data-errmsg="The admission ticket number is incorrect, and can only contain numbers"The final effect is as follows:
The plugin code is as follows:
"use strict";/*jQuery+Bootstrap verification form by Miaoqiyuan.cn principle: http://www.miaoqiyuan.cn/p/jquery-bootstrap-vaild demonstration: http://www.miaoqiyuan.cn/products/vaild/index.html Source code: 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);It is very simple to call, just use the following code:
<script>$("form").Vaild();</script>When the form loses focus, if it is not legal, an error will be directly prompted. When clicking Submit, if there is an illegal form item, the form will be prevented from continuing to submit.
The default background of popover is white and cannot serve as a warning. Moreover, the padding setting is too large and takes up too much space. Finally, adjust the CSS to achieve the effect of screenshots.
/*Refactor popover */.popover{background:#C00;color:#FFF;}.popover .popover-content{padding:1px 5px;}.popover.top>.arrow:after{border-top-color:#C00;}/*Refactor bootstrap Default error prompt*/.has-error input,.has-error textarea,.has-error select{background-color:#F2DEDE;}.has-success input,.has-success textarea,.has-success select{background-color:#DFF0D8}The above is the Bootstrap popover plug-in introduced to you by the editor. I hope it will be helpful to you. If you have any questions, please leave me a message and the editor will reply to you in time. Thank you very much for your support to Wulin.com website!