Cet article vous présentera comment juger l'exemple de vérification du code de formulaire. Avant d'introduire le texte principal, je vous présenterai le plug-in.
Introduction du plugin
Prenons d'abord une photo:
Télécharger l'adresse: https://github.com/nghuuphuoc/bootstrapvalidator
Conseils d'utilisation
Culture chinoise:
Après avoir téléchargé le plug-in, introduisez /js/bootstrapvalidator/language/zh_cn.js dans le fichier, c'est-à-dire la culture chinoise
Formulaire de vérification avant la soumission:
Un exemple de vérification de formulaire plus riche: http://www.jq22.com/yanshi522, téléchargez directement le code:
<! Doctype html> <html> <éad- head> <itle> BootstrapValidator Demo </Title> <link rel = "Stylesheet" href = "Vendor / bootstrap / css / bootstrap.css" /> <link rel = "StyleSheet" href = "Dist / css / bootstrapvalidator.cs" Fontawesome CSS Si vous souhaitez utiliser les icônes de rétroaction fournies par Fontawesome -> <! - <link rel = "Stylesheet" href = "http://netdna.bootstrapcdn.com/font-awesome/../css/font-awesome.css" /> -> <script type = "text / javascript" src = "Vendor / jQuery / jQuery -... min.js"> </ script> <script type = "text / javascript" src = "vendor / bootstrap / js / bootstrap.min.js"> </ script> <script type = "text / javascript" src = "dist / js / bootstrapvalidator.js"> </ script> </ head> <body> <div> <div> <! - Form: -> <ection> <div> <div> <h> Inscrivez-vous </h> </div> <form ID = "Defaultform" Method = "Post" Action = "Target.php"> <div> <label> complet nom name = "FirstName" placeholder = "prénom" /> </ div> <div> <input type = "text" name = "lastName" placeholder = "name" /> </ div> </ div> <div> <vabe> nom d'utilisateur </vabe> <v> <entrée type = "text" name = "nom d'utilisateur" /> </ div> </v> <v> <v> <v> <v> </ Label Addwaard </ Label> </ Div> </v> <v> <v> <v> name = "Email" /> </ div> </ div> <v> <vabed> mot de passe </vabe> <v> <input type = "mot de passe" name = "mot de passe" /> </ div> </ div> <v> <vabe> Retyper le mot de passe </ label> <v> <entrée = "mot de passe" name = "confirmpassword" /> </v> </ div> <div> <vabed> Gender </ Label> name = "Gender" value = "mâle" /> mâle </ label> </ div> <v> <Beld> <input type = "radio" name = "Gender" value = "femel" /> femel </ label> </ div> <div> <vabe> <entrée type = "radio" name = "Gender" value = "autre" /> autre </vabe> </v> </v> <v> <v> </ Label </ label> name = "anniversaire" /> (yyy / mm / dd) </ div> </div> <div> <vabe> Langues </ Label> <div> <Belle> <entrée type = "Checkbox" name = "Languages []" Value = "English" /> English </ Label> </div> <bellow " Français </cablown> </div> <div> <bable> <entrée type = "checkbox" name = "Languages []" value = "allemand" /> allemand </vabe> </div> <v> <vabe> <input type = "checkbox" name = "Languages []" value = "russian" /> russian </ label> </div> <v> <label> <puty type = "checkbox" name = "Langues []" Value = "/" / "/" / "/" / "/" / "/" autre "/" Autre </ Label> </ Div> </ Div> <div> <Vabed> Languages de programmation </ Label> <div> <div> <Belle> <Input Type = "Checkbox" Name = "Programs []" Value = "Net" /> .NET </ Label> </ Div> <div> <Beld> <Input Type = "Cassorkbox" Name = "Programmes []" Value = "Java" /> Java </vabe> </ div> <v> <bablow> <input type = "checkbox" name = "programmes []" value = "c" /> c / c ++ </ label> </div> <v> <vabed> <input type = "checkbox" name = "programmes []" value = "php" /> php </bold> </v> <div> <label> <fort type = "Checkbox" Name = "PORODGLES []" Perl "Perl" /> Perl </ Label> </ Div> <div> <Babel> <Input Type = "Checkbox" Name = "Programmes []" Value = "Ruby" /> Ruby </Babe> </ Div> <v> <Beld> <Input Type = "Checkbox" Name = "Programs []" Value = "Python" /> Python </Bold> </div> <div> <Babed> <puty Type = "Checkon" Name = "Programs [] [] [] Value = "Python" /> python </vabe> </div> <div> <label> <input type = "checkbox" name = "programmes []" value = "javascript" /> javascript </ labe> </ div> </ div> <v> <label id = "captchaoperation"> </ label> <v> <entrée = "text" name = "CAPTCHA" /> </ div> </ div> <div> <div> <button type = "soumi" name = "Signup" value = "Inscript"> Inscrivez-vous </ bouton> <bouton type = "soumi" name = "Signup2" value = "SIGNUT 2"> Inscrivez-vous 2 </ Button> <Button Type = "Button" ID = "VALIDEBTN"> Reseet </ bouton> <Button Type = "Button" ID = "Résection"> Reset </ Button> <Button Type = "Button" Button "ID =" Résetb " form </ button> </div> </ form> </div> </pction> <! -: form -> </div> </div> <script type = "Text / JavaScript"> $ (document) .ready (function () {// générer un CAPTCHAFITION simple min);}; $ ('# capchaoperation'). html ([randomNumber (1, 100), '+', randomNumber (1, 200), '=']. join ('')); $ ('# defaultform'). Bootstrapvalidator ({// live: 'handicap Glyphicon-ok ', invalid:' Glyphicon Glyphicon-Remove ', validant:' Glyphicon Glyphicon-Refresh '}, Fields: {FirstName: {Validators: {NotEmpty: {Message:' Le premier nom est requis et ne peut pas être vide '}}},, dernier: {Validators: {Notempty:}},, dernier: {Validators: {Notempty:}},, dernier: {Validators: {Notempty:}},, dernier: {Validators: {Notempty:}},, dernier: {Validators: {Notempty:}},, dernier: {Validators: {NotEmpty: {Message: 'Le nom de famille est requis et ne peut pas être vide'}}}}, nom d'utilisateur: {message: 'Le nom d'utilisateur n'est pas valide', Validators: {Notorlengty: {Message: 'Le nom d'utilisateur est requis et ne peut pas être vide'}, StringLength: {min: 6, Max: 30, Message: 'Le nom d'userne doit être plus que 6 et moins que 30 caractères' '. {regexp: /^[a-za-z0-9_/. {Validators: {emailAddress: {Message: 'L'entrée n'est pas une adresse e-mail valide'}}}}, mot de passe: {validators: {Nothempty: {Message: 'Le mot de passe est requis et ne peut pas être vide'}, identique: {champ: 'ConfirmPassword', 'Message:' Le mot de passe et sa confirm Le même que le nom d'utilisateur '}}}}, confirmpassword: {validators: {notempty: {message:' le mot de passe de confirmation est requis et ne peut pas être vide '}, identique: {fiel {Validators: {date: {format: 'yyyy / mm / dd', message: 'L'anniversaire n'est pas valide'}}}, le genre: {validateurs: {notèmes: {message: 'Le genre est requis'}}, 'Langues []] Speak '}}},' Programmes [] ': {Validators: {choix: {min: 2, max: 4, message:' Veuillez choisir 2 - 4 langues de programmation Vous êtes bon à '}}}, CAPTCHA: {Validators: {Callback: {Message:' Mauvais réponse ', CAPPHA: FONCTION, VALIDATEUR) {Var Items = $ ('# capchaoperation'). html (). Split (''), sum = paSeInt (items []) + parseInt (items []); return value == sum;}}}}}}}); // valider le formulaire manuellement $ ('# validateBtn'). Click (function () {$ ('# defaultform'). bootstrapvalidator ('valider');}); $ ('# resetbtn'). cliquez (fonction () {$ ('# defaultform'). Data ('bootstrapvalidator'). resetform (true);});}); </cript>Regardez 331 lignes, cliquez sur Soumettre, utilisez
$ ('# defaultform'). BootstrapValidator («valider»);Vérification du formulaire de déclenchement
Voici un piège que j'ai rencontré:
La logique par défaut de BootstrapValidator consiste à tourner le bouton grisé lorsque la vérification du formulaire échoue.
Cependant, dans le projet, le bouton n'est pas à l'intérieur du formulaire et est soumis par Ajax via la liaison des événements. Alors la question est:
Le projet ne doit pas exécuter les événements ultérieurs liés lorsque la vérification du formulaire échoue. Baidu n'a pas trouvé d'informations pertinentes pendant longtemps, et enfin cela dépend de Google:
$ ("# yourform"). soumider (function (ev) {ev.preventDefault ();}); $ ("# soumi"). sur ("cliquez", fonction () {var bootstrapvalidator = $ ("# yourform"). data ('bootstrapvalidator'); bootstrapvalidator.validate (); if (bootstrapvalidator.isvalid ()) $ ("# yourform"). soumise (); else return;});Ce qui précède est la connaissance pertinente de la vérification de la forme BootstrapValidator dans Bootstrap qui vous est présentée 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!