Use the popover plug-in of Bootstrap to verify the form prompt function.

Use the popover plug-in of Bootstrap to verify the form prompt function.

Most recent projects use Bootstrap. Browse the Bootstrap document and find that the popover plug-in is especially suitable for prompts of form verification errors.

Because of its frequent usage, I recently blocked it and made it a jQuery plug-in. This plugin defines data-vaild = "Validate regular" data-errmsg = "error message" in html tags ". Why should I write validation rules into html tags? Because I also used it for backend verification rules (Node is not used in the backend. Now I am using ASP, so I am busy writing down the principle of writing another article ).

<Input class = "form-control" id = "u_exam_idnumber" name = "u_exam_idnumber" placeholder = "Enter the admission ticket No." data-vaild = "^ \ d {5, 20} $ "data-errmsg =" Incorrect admission ticket number, can contain only numbers"

The final result is as follows:

The plug-in code is as follows:

"Use strict";/* jQuery + Bootstrap validation form by Miaoqiyuan.cn principle: Functions (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 );

The call is very simple. Use the following code directly:

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

If the form loses focus, an error is prompted if it is invalid. When you click submit, if a form item is invalid, the form cannot be submitted again.

The Default background of popoover is white and cannot be used as a warning. The padding setting is too large to occupy space. Finally, adjust the CSS to achieve the effect.

/* Refactor popover */. popover {background: # C00; color: # FFF ;}. popover. popover-content {padding: 1px 5px ;}. popover. top>. arrow: after {border-top-color: # C00;}/* indicates the default error code */. 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 by xiaobian to implement the verification form prompt function. I hope it will be helpful to you. If you have any questions, please leave a message for me, the editor will reply to you in a timely manner. Thank you very much for your support for the help House website!