Magical Bootstrap PopOver plug-in to realize the verification form hint function _javascript skill

Recent projects, with Bootstrap more. Browse the bootstrap document and find that the PopOver plug-in is especially good for making form checksum errors.

Because it is so frequent, it has recently been sealed and made into jquery plug-ins. Through this plug-in, the HTML tags in the definition of good data-vaild= "checksum" data-errmsg= "error message can be." Why write validation rules to HTML tags? Because I also used it to do the background of the check rules (backstage no node, now using the ASP, busy after the special report write the principle).

<input class= "Form-control" id= "U_exam_idnumber" name= "u_exam_idnumber" Please input the Entrance examination ticket Number "placeholder=" data-vaild= 5,20}$ "data-errmsg=" Ticket number is incorrect, can only contain numbers "

The effect of the final implementation is as follows:

The plug-in code is as follows:

"Use strict"; /* jquery+bootstrap Check form by miaoqiyuan.cn principle: Http://www.miaoqiyuan.cn/p/jquery-bootstrap-vaild Demo: http:// Www.miaoqiyuan.cn/products/vaild/index.html Source: 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");
}
}); $.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);

The call is very simple, using the following code directly:

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

When the form loses focus, if it is not legitimate, the error is prompted directly. When you click Submit, if a form item is illegal, it will prevent the form from continuing submitting.

Popoover The default background is white, can not play a warning role, and padding set too large, too occupy space. The final adjustment of the CSS, the effect of the screenshot is achieved.

/* Refactoring PopOver
/* popover{background: #C00; color: #FFF;}
. PopOver. popover-content{padding:1px 5px;
Popover.top>.arrow:after{border-top-color: #C00;}
/* Refactoring 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 a small series to introduce the bootstrap PopOver plug-in to verify the form of the function, I hope to help you, if you have any questions please give me a message, small series will promptly reply to everyone. Here also thank you very much for the cloud Habitat Community website support!