In letzter Zeit gibt es viele Verwendungsstiefel. Durch das Durchsuchen des Bootstrap-Dokuments stellte ich fest, dass das Popover-Plug-In besonders für Eingabeaufforderungen für Formularüberprüfungsfehler geeignet ist.
Da es sehr häufig hergestellt wird, wurde es kürzlich versiegelt und zu einem JQuery-Plug-In gemacht. Definieren Sie über dieses Plug-In einfach Data-vaild = "Überprüfen von Regeln" data-irrmsg = "Fehlermeldung" im HTML-Tag. Warum müssen wir Überprüfungsregeln in das HTML -Tag schreiben? Da ich es auch verwendet habe, um den Hintergrund zu überprüfen (der Hintergrund verwendet keinen Knoten, verwende ich jetzt ASP und werde einen speziellen Artikel veröffentlichen, um die Prinzipien nach Abschluss meiner Arbeit aufzuschreiben).
<input id = "u_exam_idnumber" name = "u_exam_idnumber" placeholder = "Bitte geben Sie die Zulassungs-Ticketnummer für die Aufnahme von Junior High School ein.
Der endgültige Effekt ist wie folgt:
Der Plugin -Code lautet wie folgt:
"Strict";/*jQuery+Bootstrap-Verifizierungsformular von miaoqiyuan.cn Prinzip: http://www.miaoqiyuan.cn/p/jquery-bootstrap-vaild Demonstration: http:/www.miaoqiyuan.cn/products/vaild/Ind.htmiyuan.cn/products/vaild/vaild/vaild/vaild.htm- http://www.miaoqiyuan.cn/products/vaild/jquery.vaild.js*/(function(jquery) {$.extend( availd: function (_this) {if (!! $ (_ this) .data ("VAGD") {vary puster = new Regexp ($ (_ this) .data ("vaild")); if (muster.test ($ (_ this) .val ())) ) {$ (_ this) .Parent (). removeclass ("has-fehler"). ;} else {$ (_ this) .Parent (). addClass ("has-eRor"). removeclass ("has-success"); "Top"). Data ("Placement", "Top"). Data ("Container", "Body"). Data ("Inhalt", $ (_ this) .Data ("errmsg"). popover ({"Trigger": "Handbuch"}). true;}}); checkResult;} return checkResult;}); für (var i = 0; i <_this.Length; i ++) {$ (_ this [i]). Blur (function () {$. vaild (this);});});}});}) (jquery);Es ist sehr einfach anzurufen. Verwenden Sie einfach den folgenden Code:
<Script> $ ("Form"). vaild (); </script>Wenn das Formular den Fokus verliert, wird ein Fehler direkt aufgefordert, wenn es nicht legal ist. Wenn Sie auf Senden klicken, wird das Formular daran gehindert, bei einem illegalen Formularelement weiterhin zu reichen.
Der Standardhintergrund von Popover ist weiß und kann nicht als Warnung dienen. Darüber hinaus ist die Polstereinstellung zu groß und nimmt zu viel Platz ein. Passen Sie schließlich das CSS an, um den Effekt von Screenshots zu erreichen.
/*Refactor Popover*/. Popover {Hintergrund:#C00; Farbe: #fff;}. Popover .popover-content {padding: 1px 5px;}. Popover.top> .Arrow: After {Border-Top-Color:#C00;}/*Refactor-Strap-Fehler-Fehler-Eingabeaufforderung*/. Wählen Sie {Hintergrundfarbe:#F2Dede;}. Has-Success-Eingabe, .Has-success textarea, .has-success select {Hintergrundfarbe:#dff0d8}Das obige ist das Bootstrap Popover-Plug-In, das Ihnen vom Editor vorgestellt wurde. Ich hoffe, es wird Ihnen hilfreich sein. Wenn Sie Fragen haben, hinterlassen Sie mir bitte eine Nachricht und der Editor wird Ihnen rechtzeitig antworten. Vielen Dank für Ihre Unterstützung auf der Wulin.com -Website!