Cet article recommande un bootstrapvalidator.js fabriqué à partir de Twitter. Bootstrap est fabriqué à partir de Twitter, donc l'utilisation du validateur d'origine est plus fiable. Il y aura de nombreux modèles pour la recherche de bootstrapvalidator sur Baidu, mais je recommande seulement celui-ci:
1. Jetez un œil
Pour une simple introduction, voici seulement un chèque vide.
BootstrapValidator Adresse de téléchargement officiel
2. Référence des ressources
Après avoir téléchargé le package de ressources, vous pouvez voir le répertoire suivant.
Présentez ensuite les trois fichiers suivants à votre projet.
<link type = "text / css" rel = "stylesheet" href = "$ {ctx} /components/validate/css/bootstrapvalidator.css" /> <script type = "text / javascrip type = "text / javascript" src = "$ {ctx} / components/validate/js/language/zh_cn.js"> </ script>3. Le nom du membre n'est pas une configuration de projet vide
<form action = "$ {ctx} / connexion" méthode = "post" onsubmit = "return validateCallback (this)"> <div> <div> <label> compte </ label> <input type = "text" autofocus name = "username" placeholder = "s'il vous plaît entrez le numéro de membre" Autofocus name = "data-bv-notempty /> </ / div> </ div> </ div>Data-BV-notempty signifie que le numéro de membre doit être utilisé comme vérification vide.
Le div de formulaire de formulaire est requis, sinon l'erreur "trop de récursivité" sera signalée.
Lors de la soumission du formulaire de formulaire, la méthode ValidateCallback sera exécutée. Cette méthode est spécifiquement introduite à l'étape 5.
4. Activer le validateur bootstrap après le chargement de la page
$ (function () {// valider le formulaire $ ("form.requered-validate"). Chaque (fonction () {var $ form = $ (this); $ form.bootstrapvalidator (); // corriger le validateur bootstrap soumet à plusieurs reprises le bogue au serveur $ form.on ('Success.Form.BV', fonction (e) {// prévenir la soumission du formulaire E.PreventDalt ();); });});Ajoutez l'attribut 'class = "required-valider"' sur le formulaire de formulaire, puis obtenez le formulaire de formulaire correspondant via jQuery, et effectuez le chargement de bootstrapvalidateur par défaut dessus.
Assurez-vous de faire attention à une partie du code commenté dans le code ci-dessus. Pour plus de détails, veuillez vous référer à ce qui suit pour corriger les bogues soumis à plusieurs reprises par bootstrapvalidator. Le contenu spécifique est le suivant
BootstrapValidator est très beau, mais il y a souvent des intentions meurtrières cachées sous votre beau visage. C'est pourquoi il y a des bogues de soumission répétés .
Solution:
// Valider Form $ ("form.requure-validate", $ p) .each (function () {var $ form = $ (this); $ form.bootstrapvalidator (). on ('succed.form.bv', function (e) {// empêcher l'événement par défaut de commettre e.PreventDefault ();});});Définissez la méthode ON pour BootstrapValidator, dont la clé est Success.form.bv et la valeur est e.PreventDefault ();.
Investigation des bogues:
Résultats de l'enquête:
1. Lorsque vous n'utilisez pas de bootstrapvalidator, il n'y aura aucun problème comme indiqué sur la figure.
2. Ce n'est que lorsque vous cliquez sur la première fois, la soumission sera répétée deux fois. Ensuite, après avoir réintégré le nom d'utilisateur, vous le soumettrez en un seul temps.
L'environnement du bogue:
Copiez le code comme suit: <formulaire form = "$ {ctx} / mem / ligin? CallbackType = Forward" metheth = "post" onSubmit = "return validateCallback (this, tabajaxdone)" type = "ligin">
...
<Button Type = "Soumider"> Soumettre </ftones>
</ form>
décrire:
Il s'agit d'un formulaire de formulaire ordinaire, avec l'adresse de demande dans l'action, et il existe une méthode onSubmit dans le formulaire, qui est principalement pour vérifier le formulaire, puis envoyer la demande, et enfin rappeler la méthode TabajaxDone.
Analyse des bogues:
1. Il n'y a certainement pas de problème avec le formulaire. S'il n'y a pas de validation bootstrap, il n'y a aucun problème.
2. Il n'y avait aucun problème lors de l'utilisation de JQuery valider auparavant.
3. Ensuite, le problème ne peut se produire que sur Bootstrap valider.
4. Il n'y a pas de problème avec l'utilisation par défaut de Bootstrap valider, car il ne sera répété que lorsque le premier clic se soumet.
5. Alors cela peut être que Bootstrap validate a la demande de soumission par défaut.
Si vous regardez à nouveau l'objet Validate, vous pouvez voir qu'il existe de nombreux événements par défaut, parmi lesquels la forme est la plus suspecte, ce qui signifie qu'elle peut déclencher à nouveau la demande de soumission.
Débogage des insectes:
// Valider Form $ ("form.required-validate", $ p) .each (function () {var $ form = $ (this); $ form.bootstrapvalidator (); // .on ('success.form.bv', function (e) {// // empêcher la soumission de l'événement par défaut // e.preventDefault (); //});});1. Lorsque la page est chargée pour la première fois, BootstrapValidator doit être chargé dans la méthode ci-dessus avant que la vérification des données frontale puisse être effectuée.
2. Vous avez vu le code commenté, peut-être que vous pouvez le deviner, et c'est la solution. C'est vrai, ajoutez ce traitement d'événement pour former et utiliser e.PreventDefault (); Pour éviter la soumission d'événement par défaut.
5. Vérifiez l'article lors de la soumission du formulaire
fonction validateCallback (formulaire, rappel, confirmMsg) {yunm.debug ("entrez dans le formulaire Validation et soumission"); var $ form = $ (form); var data = $ form.data ('bootstrapvalidator'); if (data) {// Les composants qui réparent la mémoire ne vérifient pas data.validate (); if (! data.isvalid ()) {return false; }} $ .ajax ({type: form.method || 'post', url: $ form.attr ("action"), data: $ form.serializearray (), dataType: "json", cache: false, succès: rappel || yunm.ajaxdone, error: yunm.ajaxerror}); retour false;}Après avoir obtenu le formulaire de formulaire dans ValidateCallback, le formulaire peut être retourné via la méthode isvalid pour vérifier s'il passe.
Une fois la vérification du formulaire passé, soumettez le formulaire au serveur via AJAX.
Si vous souhaitez toujours étudier en profondeur, vous pouvez cliquer ici pour étudier et vous attacher 3 sujets passionnants:
Tutoriel d'apprentissage bootstrap
Tutoriel pratique de bootstrap
Tutoriel d'utilisation du plug-in bootstrap
Ce qui précède concerne cet article, j'espère qu'il sera utile à l'apprentissage de tout le monde.