Récemment, il existe de nombreuses utilisations bootstrap. En parcourant le document bootstrap, j'ai constaté que le plug-in Popover convient particulièrement aux invites pour les erreurs de vérification de formulaire.
Parce qu'il est fabriqué très fréquemment, il a été récemment scellé et transformé en un plug-in jQuery. Grâce à ce plug-in, définissez simplement Data-Vaild = "Vérification des règles" Data-ErrmsG = "Message d'erreur" dans la balise HTML. Pourquoi avons-nous besoin d'écrire des règles de vérification dans la balise HTML? Parce que je l'ai également utilisé pour vérifier l'arrière-plan (l'arrière-plan n'utilise pas le nœud, j'utilise ASP maintenant et je publierai un article spécial pour noter les principes après avoir terminé mon travail).
<entrée id = "u_exam_idnumber" name = "u_exam_idnumber" placeholder = "Veuillez saisir le numéro de billet d'admission pour l'examen d'entrée de l'école secondaire" data-vaild = "^ / d {5,20} $" data-errmsg = "Le numéro de billet d'admission est incorrect, et peut contenir uniquement des nombres"L'effet final est le suivant:
Le code du plugin est le suivant:
"Utiliser Strict"; / * jQuery + Bootstrap Verification Form by miaoqiyuan.cn Principe: http://www.miaoqiyuan.cn/p/jquery-bootstrap-vaild Démonstration: http:/www.miaoqiyuan.cn/products/vaild/indsh http://www.miaoqiyuan.cn/products/vaild/jquery.vaild.js*/(fonction(jQuery); Regexp ($ (_ this) .data ("vaild")); if (pattern.test ($ (_ this) .val ()) ) {$ (_ this) .parent (). RemoveClass ("Has-Error"). AddClass ("Has-Success"); $ (_ this) .popover ("Destre") ;} else {$ (_ this) .parent (). addClass ("has-error"). reposerlass ("has-sucre"); $ (_ this) .data ("toogle", "top"). data ("placement", "top"). data ("conteneur", "body"). data ("contenu", $ (_ this) .data ("errmsg")). popover ({"déclencheur": "manuel"}). popover ("show"); return false;}} else {$ (_ this). 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 = $. checkResult;} return checkResult;}); for (var i = 0; i <_this.length; i ++) {$ (_ this [i]). blur (function () {$. vaild (this);});}});}});}) (jQuery);Il est très simple à appeler, utilisez simplement le code suivant:
<script> $ ("form"). Vaild (); </cript>Lorsque le formulaire perd le foyer, s'il n'est pas légal, une erreur sera directement invitée. Lorsque vous cliquez sur Soumettre, s'il existe un élément de formulaire illégal, le formulaire ne sera pas empêché de continuer à soumettre.
L'arrière-plan par défaut de Popover est blanc et ne peut pas servir d'avertissement. De plus, le réglage du rembourrage est trop grand et prend trop d'espace. Enfin, ajuster le CSS pour obtenir l'effet des captures d'écran.
/ * Refactor Popover * /. Popover {Background: # C00; Color: #fff;}. Popover .Popover-CONTENT {Padding: 1px 5px;}. Popover.top> .Arrow: après {border-top-Color: # C00;} / * Refactor BootstRap Default Promped * /. SELECT {Background-Color: # f2dede;}. Has-Success Input, .Has-Success TextArea,.Ce qui précède est le plug-in Bootstrap Popover introduit par l'éditeur. J'espère que cela vous sera utile. Si vous avez des questions, veuillez me laisser un message et l'éditeur vous répondra à temps. Merci beaucoup pour votre soutien au site Web Wulin.com!