Comment utiliser le plugin de validation de formulaire bootstrapValidator dans Bootstrap ? (exemple de code)-js tutoriel-php.cn

Table des matières

Téléchargement du plug-in : http://www.jq22.com/jquery-info522

Présentation du plug-in

Conseils d'utilisation

Maison

interface Web

js tutoriel

Comment utiliser le plugin de validation de formulaire bootstrapValidator dans Bootstrap ? (exemple de code)

青灯夜游

Oct 19, 2018 pm 03:25 PM

bootstrap 插件表单验证

Le contenu de cet article est de présenter comment utiliser le plug-in de validation de formulaire de Bootstrap, bootstrapValidator. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère qu'il vous sera utile. Si vous souhaitez apprendre et obtenir plus de tutoriels sur le bootstrap, vous pouvez également visiter : tutoriel bootstrap !

Téléchargement du plug-in : http://www.jq22.com/jquery-info522

Présentation du plug-in

Première image :

Adresse de téléchargement : https://github.com/nghuuphuoc/bootstrapvalidator

Utilisation : http://www.cnblogs. com /huangcong/p/5335376.html

Conseils d'utilisation

Culture chinoise :
Après avoir téléchargé le plug-in, introduisez jsbootstrapValidatorlingualzh_CN.js dans le fichier pour mettre en œuvre la culture chinoise

Vérifiez le formulaire avant de le soumettre :
Un exemple de vérification de formulaire plus riche : http://www.jq22.com/yanshi522, entrez directement le code :

1 <!DOCTYPE html>
  2 <html>
  3 <head>
  4     <title>BootstrapValidator demo</title>
  5 
  6     <link rel="stylesheet" href="vendor/bootstrap/css/bootstrap.css"/>
  7     <link rel="stylesheet" href="dist/css/bootstrapValidator.css"/>
  8 
  9     <!-- Include the FontAwesome CSS if you want to use feedback icons provided by FontAwesome -->
 10     <!--<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" />-->
 11 
 12     <script type="text/javascript" src="vendor/jquery/jquery-1.10.2.min.js"></script>
 13     <script type="text/javascript" src="vendor/bootstrap/js/bootstrap.min.js"></script>
 14     <script type="text/javascript" src="dist/js/bootstrapValidator.js"></script>
 15 </head>
 16 <body>
 17     <p class="container">
 18         <p class="row">
 19             <!-- form: -->
 20             <section>
 21                 <p class="col-lg-8 col-lg-offset-2">
 22                     <p class="page-header">
 23                         <h2>Sign up</h2>
 24                     </p>
 25 
 26                     <form id="defaultForm" method="post" class="form-horizontal" action="target.php">
 27                         <p class="form-group">
 28                             <label class="col-lg-3 control-label">Full name</label>
 29                             <p class="col-lg-4">
 30                                 <input type="text" class="form-control" name="firstName" placeholder="First name" />
 31                             </p>
 32                             <p class="col-lg-4">
 33                                 <input type="text" class="form-control" name="lastName" placeholder="Last name" />
 34                             </p>
 35                         </p>
 36 
 37                         <p class="form-group">
 38                             <label class="col-lg-3 control-label">Username</label>
 39                             <p class="col-lg-5">
 40                                 <input type="text" class="form-control" name="username" />
 41                             </p>
 42                         </p>
 43 
 44                         <p class="form-group">
 45                             <label class="col-lg-3 control-label">Email address</label>
 46                             <p class="col-lg-5">
 47                                 <input type="text" class="form-control" name="email" />
 48                             </p>
 49                         </p>
 50 
 51                         <p class="form-group">
 52                             <label class="col-lg-3 control-label">Password</label>
 53                             <p class="col-lg-5">
 54                                 <input type="password" class="form-control" name="password" />
 55                             </p>
 56                         </p>
 57 
 58                         <p class="form-group">
 59                             <label class="col-lg-3 control-label">Retype password</label>
 60                             <p class="col-lg-5">
 61                                 <input type="password" class="form-control" name="confirmPassword" />
 62                             </p>
 63                         </p>
 64 
 65                         <p class="form-group">
 66                             <label class="col-lg-3 control-label">Gender</label>
 67                             <p class="col-lg-5">
 68                                 <p class="radio">
 69                                     <label>
 70                                         <input type="radio" name="gender" value="male" /> Male
 71                                     </label>
 72                                 </p>
 73                                 <p class="radio">
 74                                     <label>
 75                                         <input type="radio" name="gender" value="female" /> Female
 76                                     </label>
 77                                 </p>
 78                                 <p class="radio">
 79                                     <label>
 80                                         <input type="radio" name="gender" value="other" /> Other
 81                                     </label>
 82                                 </p>
 83                             </p>
 84                         </p>
 85 
 86                         <p class="form-group">
 87                             <label class="col-lg-3 control-label">Birthday</label>
 88                             <p class="col-lg-5">
 89                                 <input type="text" class="form-control" name="birthday" /> (YYYY/MM/DD)
 90                             </p>
 91                         </p>
 92 
 93                         <p class="form-group">
 94                             <label class="col-lg-3 control-label">Languages</label>
 95                             <p class="col-lg-5">
 96                                 <p class="checkbox">
 97                                     <label>
 98                                         <input type="checkbox" name="languages[]" value="english" /> English
 99                                     </label>
100                                 </p>
101                                 <p class="checkbox">
102                                     <label>
103                                         <input type="checkbox" name="languages[]" value="french" /> French
104                                     </label>
105                                 </p>
106                                 <p class="checkbox">
107                                     <label>
108                                         <input type="checkbox" name="languages[]" value="german" /> German
109                                     </label>
110                                 </p>
111                                 <p class="checkbox">
112                                     <label>
113                                         <input type="checkbox" name="languages[]" value="russian" /> Russian
114                                     </label>
115                                 </p>
116                                 <p class="checkbox">
117                                     <label>
118                                         <input type="checkbox" name="languages[]" value="other" /> Other
119                                     </label>
120                                 </p>
121                             </p>
122                         </p>
123 
124                         <p class="form-group">
125                             <label class="col-lg-3 control-label">Programming Languages</label>
126                             <p class="col-lg-5">
127                                 <p class="checkbox">
128                                     <label>
129                                         <input type="checkbox" name="programs[]" value="net" /> .Net
130                                     </label>
131                                 </p>
132                                 <p class="checkbox">
133                                     <label>
134                                         <input type="checkbox" name="programs[]" value="java" /> Java
135                                     </label>
136                                 </p>
137                                 <p class="checkbox">
138                                     <label>
139                                         <input type="checkbox" name="programs[]" value="c" /> C/C++
140                                     </label>
141                                 </p>
142                                 <p class="checkbox">
143                                     <label>
144                                         <input type="checkbox" name="programs[]" value="php" /> PHP
145                                     </label>
146                                 </p>
147                                 <p class="checkbox">
148                                     <label>
149                                         <input type="checkbox" name="programs[]" value="perl" /> Perl
150                                     </label>
151                                 </p>
152                                 <p class="checkbox">
153                                     <label>
154                                         <input type="checkbox" name="programs[]" value="ruby" /> Ruby
155                                     </label>
156                                 </p>
157                                 <p class="checkbox">
158                                     <label>
159                                         <input type="checkbox" name="programs[]" value="python" /> Python
160                                     </label>
161                                 </p>
162                                 <p class="checkbox">
163                                     <label>
164                                         <input type="checkbox" name="programs[]" value="javascript" /> Javascript
165                                     </label>
166                                 </p>
167                             </p>
168                         </p>
169 
170                         <p class="form-group">
171                             <label class="col-lg-3 control-label" id="captchaOperation"></label>
172                             <p class="col-lg-2">
173                                 <input type="text" class="form-control" name="captcha" />
174                             </p>
175                         </p>
176 
177                         <p class="form-group">
178                             <p class="col-lg-9 col-lg-offset-3">
179                                 <button type="submit" class="btn btn-primary" name="signup" value="Sign up">Sign up</button>
180                                 <button type="submit" class="btn btn-primary" name="signup2" value="Sign up 2">Sign up 2</button>
181                                 <button type="button" class="btn btn-info" id="validateBtn">Manual validate</button>
182                                 <button type="button" class="btn btn-info" id="resetBtn">Reset form</button>
183                             </p>
184                         </p>
185                     </form>
186                 </p>
187             </section>
188             <!-- :form -->
189         </p>
190     </p>
191 
192 <script type="text/javascript">
193 $(document).ready(function() {
194     // Generate a simple captcha
195     function randomNumber(min, max) {
196         return Math.floor(Math.random() * (max - min + 1) + min);
197     };
198     $(&#39;#captchaOperation&#39;).html([randomNumber(1, 100), &#39;+&#39;, randomNumber(1, 200), &#39;=&#39;].join(&#39; &#39;));
199 
200     $(&#39;#defaultForm&#39;).bootstrapValidator({
201 //        live: &#39;disabled&#39;,
202         message: &#39;This value is not valid&#39;,
203         feedbackIcons: {
204             valid: &#39;glyphicon glyphicon-ok&#39;,
205             invalid: &#39;glyphicon glyphicon-remove&#39;,
206             validating: &#39;glyphicon glyphicon-refresh&#39;
207         },
208         fields: {
209             firstName: {
210                 validators: {
211                     notEmpty: {
212                         message: &#39;The first name is required and cannot be empty&#39;
213                     }
214                 }
215             },
216             lastName: {
217                 validators: {
218                     notEmpty: {
219                         message: &#39;The last name is required and cannot be empty&#39;
220                     }
221                 }
222             },
223             username: {
224                 message: &#39;The username is not valid&#39;,
225                 validators: {
226                     notEmpty: {
227                         message: &#39;The username is required and cannot be empty&#39;
228                     },
229                     stringLength: {
230                         min: 6,
231                         max: 30,
232                         message: &#39;The username must be more than 6 and less than 30 characters long&#39;
233                     },
234                     regexp: {
235                         regexp: /^[a-zA-Z0-9_\.]+$/,
236                         message: &#39;The username can only consist of alphabetical, number, dot and underscore&#39;
237                     },
238                     remote: {
239                         url: &#39;remote.php&#39;,
240                         message: &#39;The username is not available&#39;
241                     },
242                     different: {
243                         field: &#39;password&#39;,
244                         message: &#39;The username and password cannot be the same as each other&#39;
245                     }
246                 }
247             },
248             email: {
249                 validators: {
250                     emailAddress: {
251                         message: &#39;The input is not a valid email address&#39;
252                     }
253                 }
254             },
255             password: {
256                 validators: {
257                     notEmpty: {
258                         message: &#39;The password is required and cannot be empty&#39;
259                     },
260                     identical: {
261                         field: &#39;confirmPassword&#39;,
262                         message: &#39;The password and its confirm are not the same&#39;
263                     },
264                     different: {
265                         field: &#39;username&#39;,
266                         message: &#39;The password cannot be the same as username&#39;
267                     }
268                 }
269             },
270             confirmPassword: {
271                 validators: {
272                     notEmpty: {
273                         message: &#39;The confirm password is required and cannot be empty&#39;
274                     },
275                     identical: {
276                         field: &#39;password&#39;,
277                         message: &#39;The password and its confirm are not the same&#39;
278                     },
279                     different: {
280                         field: &#39;username&#39;,
281                         message: &#39;The password cannot be the same as username&#39;
282                     }
283                 }
284             },
285             birthday: {
286                 validators: {
287                     date: {
288                         format: &#39;YYYY/MM/DD&#39;,
289                         message: &#39;The birthday is not valid&#39;
290                     }
291                 }
292             },
293             gender: {
294                 validators: {
295                     notEmpty: {
296                         message: &#39;The gender is required&#39;
297                     }
298                 }
299             },
300             &#39;languages[]&#39;: {
301                 validators: {
302                     notEmpty: {
303                         message: &#39;Please specify at least one language you can speak&#39;
304                     }
305                 }
306             },
307             &#39;programs[]&#39;: {
308                 validators: {
309                     choice: {
310                         min: 2,
311                         max: 4,
312                         message: &#39;Please choose 2 - 4 programming languages you are good at&#39;
313                     }
314                 }
315             },
316             captcha: {
317                 validators: {
318                     callback: {
319                         message: &#39;Wrong answer&#39;,
320                         callback: function(value, validator) {
321                             var items = $(&#39;#captchaOperation&#39;).html().split(&#39; &#39;), sum = parseInt(items[0]) + parseInt(items[2]);
322                             return value == sum;
323                         }
324                     }
325                 }
326             }
327         }
328     });
329 
330     // Validate the form manually
331     $(&#39;#validateBtn&#39;).click(function() {
332         $(&#39;#defaultForm&#39;).bootstrapValidator(&#39;validate&#39;);
333     });
334 
335     $(&#39;#resetBtn&#39;).click(function() {
336         $(&#39;#defaultForm&#39;).data(&#39;bootstrapValidator&#39;).resetForm(true);
337     });
338 });
339 </script>
340 </body>
341 </html>

Copier après la connexion

Regardez la ligne 331. Lorsque vous cliquez sur soumettre, utilisez

$(&#39;#defaultForm&#39;).bootstrapValidator(&#39;validate&#39;);

Copier après la connexion

pour déclencher la validation du formulaire

Voici un écueil rencontré :

Le la logique par défaut de bootstrapValidator est d'utiliser la validation de formulaire. En cas d'échec, tournez le bouton en gris.
Mais dans le projet, le bouton n'est pas à l'intérieur du formulaire et est soumis via ajax via la liaison d'événement. Alors voici le problème :

Le projet n'a pas besoin d'exécuter les événements ultérieurs liés lorsque la vérification du formulaire échoue. Baidu n'a pas pu trouver d'informations pertinentes pendant longtemps, et j'ai finalement dû me fier à Google :

$("#yourform").submit(function(ev){ev.preventDefault();});
$("#submit").on("click", function(){

   var bootstrapValidator = $("#yourform").data(&#39;bootstrapValidator&#39;);
   bootstrapValidator.validate();
   if(bootstrapValidator.isValid())
     $("#yourform").submit();
   else return;

});

Copier après la connexion

Jiang Zi peut déterminer si la vérification du formulaire a réussi.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration de ce site Web

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Outils d'IA chauds

Undresser.AI Undress

Application basée sur l'IA pour créer des photos de nu réalistes

AI Clothes Remover

Outil d'IA en ligne pour supprimer les vêtements des photos.

Undress AI Tool

Images de déshabillage gratuites

Clothoff.io

Dissolvant de vêtements AI

AI Hentai Generator

Générez AI Hentai gratuitement.

Afficher plus

Article chaud

R.E.P.O. Crystals d'énergie expliqués et ce qu'ils font (cristal jaune)

1 Il y a quelques mois By 尊渡假赌尊渡假赌尊渡假赌

R.E.P.O. Meilleurs paramètres graphiques

1 Il y a quelques mois By 尊渡假赌尊渡假赌尊渡假赌

Assassin's Creed Shadows: Solution d'énigmes de coquille

2 Il y a quelques semaines By DDD

R.E.P.O. Comment réparer l'audio si vous n'entendez personne

1 Il y a quelques mois By 尊渡假赌尊渡假赌尊渡假赌

R.E.P.O. Commandes de chat et comment les utiliser

1 Il y a quelques mois By 尊渡假赌尊渡假赌尊渡假赌

Afficher plus

Outils chauds

Bloc-notes++7.3.1

Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise

Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1

Puissant environnement de développement intégré PHP

Dreamweaver CS6

Outils de développement Web visuel

SublimeText3 version Mac

Logiciel d'édition de code au niveau de Dieu (SublimeText3)

Afficher plus

Sujets chauds

Où se trouve l'entrée de connexion pour la messagerie Gmail ?

7540

Tutoriel CakePHP

1381

Quel est le format du nom de compte de Steam

Clé d&amp;amp;amp;amp;amp;amp;#39;activation Win11 permanent

NYT Connexions Indices et réponses

Afficher plus

Related knowledge

Comment obtenir la barre de recherche bootstrap Apr 07, 2025 pm 03:33 PM

Comment utiliser Bootstrap pour obtenir la valeur de la barre de recherche: détermine l'ID ou le nom de la barre de recherche. Utilisez JavaScript pour obtenir des éléments DOM. Obtient la valeur de l'élément. Effectuer les actions requises.

Comment faire le centrage vertical de bootstrap Apr 07, 2025 pm 03:21 PM

Utilisez Bootstrap pour implémenter Centering vertical: Flexbox Méthode: Utilisez les classes D-Flex, Justify-Content-Center et Align-Items-Center pour placer des éléments dans le conteneur Flexbox. Méthode de classe Align-Items-Center: Pour les navigateurs qui ne prennent pas en charge FlexBox, utilisez la classe Align-Items-Center, à condition que l'élément parent ait une hauteur définie.

Comment utiliser Bootstrap en Vue Apr 07, 2025 pm 11:33 PM

L'utilisation de bootstrap dans vue.js est divisée en cinq étapes: installer bootstrap. Importer un bootstrap dans main.js. Utilisez le composant bootstrap directement dans le modèle. Facultatif: style personnalisé. Facultatif: utilisez des plug-ins.

Comment écrire des lignes fendues sur bootstrap Apr 07, 2025 pm 03:12 PM

Il existe deux façons de créer une ligne divisée bootstrap: en utilisant la balise, qui crée une ligne divisée horizontale. Utilisez la propriété CSS Border pour créer des lignes de fractionnement de style personnalisées.

Comment redimensionner le bootstrap Apr 07, 2025 pm 03:18 PM

Pour ajuster la taille des éléments dans Bootstrap, vous pouvez utiliser la classe de dimension, qui comprend: ajuster la largeur: .col-, .w-, .mw-ajustement Hauteur: .h-, .min-h-, .max-h-

Comment insérer des photos sur bootstrap Apr 07, 2025 pm 03:30 PM

Il existe plusieurs façons d'insérer des images dans Bootstrap: insérer directement les images, en utilisant la balise HTML IMG. Avec le composant d'image bootstrap, vous pouvez fournir des images réactives et plus de styles. Définissez la taille de l'image, utilisez la classe IMG-FLUID pour rendre l'image adaptable. Réglez la bordure en utilisant la classe IMG-border. Réglez les coins arrondis et utilisez la classe Roundée IMG. Réglez l'ombre, utilisez la classe Shadow. Redimensionner et positionner l'image, en utilisant le style CSS. À l'aide de l'image d'arrière-plan, utilisez la propriété CSS d'image d'arrière-plan.

Comment configurer le cadre de bootstrap Apr 07, 2025 pm 03:27 PM

Pour configurer le framework Bootstrap, vous devez suivre ces étapes: 1. Référez le fichier bootstrap via CDN; 2. Téléchargez et hébergez le fichier sur votre propre serveur; 3. Incluez le fichier bootstrap dans HTML; 4. Compiler les sass / moins au besoin; 5. Importer un fichier personnalisé (facultatif). Une fois la configuration terminée, vous pouvez utiliser les systèmes, composants et styles de grille de Bootstrap pour créer des sites Web et des applications réactifs.

Comment afficher la date de bootstrap Apr 07, 2025 pm 03:03 PM

Réponse: Vous pouvez utiliser le composant de sélecteur de date de bootstrap pour afficher les dates dans la page. Étapes: Présentez le framework bootstrap. Créez une boîte d'entrée de sélecteur de date dans HTML. Bootstrap ajoutera automatiquement des styles au sélecteur. Utilisez JavaScript pour obtenir la date sélectionnée.

See all articles