In diesem Artikel werden Sie mit der Beurteilung des Beispielkodex der Formularüberprüfung vorgestellt. Bevor ich den Haupttext einführe, werde ich Sie mit dem Plug-In vorstellen.
Plugin -Einführung
Machen wir zuerst ein Foto:
Download -Adresse: https://github.com/nghuuphuoc/bootstrapvalidator
Nutzungstipps
Chinesische Kultur:
Nach dem Herunterladen des Plug-Ins in die Datei, dh chinesische Kultur implementieren
Überprüfungsformular vor der Einreichung:
Ein umfassenderes Beispiel für Formbestätigung: http://www.jq22.com/yanshi522, laden Sie den Code direkt hoch:
<!DOCTYPE html><html><head><title>BootstrapValidator demo</title><link rel="stylesheet" href="vendor/bootstrap/css/bootstrap.css"/><link rel="stylesheet" href="dist/css/bootstrapValidator.css"/><!-- Include the FontAwesome CSS Wenn Sie Feedback-Symbole verwenden möchten, die von fontAwesome-> <!-<link rel = "Stylesheet" href = "http://netdna.bootStrapcdn.com/font-awesome/../css/font-awesome.css"/-> <script type = "text/texte/texte/text/" text/text/"text/" text/"text/" text/"text/" text/"text/" text/"text =" verwenden möchten, verwenden. src = "Anbieter/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:-> <abschnitt> <div> <h> Anmelden Sie up </h> </div> <Form ID = "DefaultForm" method = "post" -Action = "target.php". name="firstName" placeholder="First name" /></div><div><input type="text" name="lastName" placeholder="Last name" /></div></div><div><label>Username</label><div><input type="text" name="username" /></div></div><div><label>Email address</label><div><input type="text" name = "E -Mail"/> </div> </div> <div> <label> Kennwort </Label> <div> <Eingabe type = "password" name = "password"/> </div> </div> <div> <label> REPTYPET -Kennwort </label> <div> <Eingabe type "kennwort" name "name =" name ". name="gender" value="male" /> Male</label></div><div><label><input type="radio" name="gender" value="female" /> Female</label></div><div><label><input type="radio" name="gender" value="other" /> Other</label></div></div><div><label>Birthday</label><div><input type="text" Name = "Geburtstag"/> (yyy/mm/dd) </div> </div> <div> <label> Sprachen </Label> <div> <label> <Eingabe type = "Checkbox" name = "Sprachen []" value = "english"/> englisch </label> </div> <label> <input type = "checkbox" name = "Sprachen" Sprachen [] "]" value "". Französisch </label> </div> <div> <label> <Eingabe type = "Checkbox" name = "Sprachen []" value = "Deutsch"/> Deutsch </label> </div> <div> <Label> <Eingabe type = "Checkbox" name = "Sprachen []" value = "Russian"/> Russian </lags> </div> <div> <Div> <) <Stype> <einputs -Typs ". Other</label></div></div><div><label>Programming Languages</label><div><div><label><input type="checkbox" name="programs[]" value="net" /> .Net</label></div><div><label><input type="checkbox" name="programs[]" value="java" /> Java</label></div><div><label><input type="checkbox" name="programs[]" value="c" /> C/C++</label></div><div><label><input type="checkbox" name="programs[]" value="php" /> PHP</label></div><div><label><input type="checkbox" name="programs[]" value="perl" /> Perl</label></div><div><label><input type="checkbox" name="programs[]" value="ruby" /> Ruby</label></div><div><label><input type="checkbox" name="programs[]" value="python" /> Python</label></div><div><label><input type="checkbox" name="programs[]" value = "python"/> python </label> </div> <div> <label> <Eingabe type = "Checkbox" name = "programme []" value = "javaScript"/> javaScript </label> </div> </div> <div> <label id = "captchaoperation"> </label> </div> <input type = "name" name "name" name "name" name "name" name "name" name "name" /> </div> </div> <div> <div> <button type = "surenden" name = "Signup" value = "Anmelden"> Anmelden </button> <button type = "name" name = "SignUp2" value = "Anmelden 2"> Anmelden 2 </button> <button type Form </button> </div> </form> </div> </§> <!-: Form-> </div> </div> <script type = "text/javaScript"> $ (dokument). min);}; $ ('#captchaoperation'). glyphicon-ok',invalid: 'glyphicon glyphicon-remove',validating: 'glyphicon glyphicon-refresh'},fields: {firstName: {validators: {notEmpty: {message: 'The first name is required and cannot be empty'}}}},lastName: {validators: {notEmpty: {message: 'The last Der Name ist erforderlich und kann nicht leer sein '}}}}, Benutzername: {Nachricht:' Der Benutzername ist nicht gültig ', Validatoren: {Notimpty: {message:' Der Benutzername ist erforderlich und kann nicht leer sein '}, StringLength: {min: 6, max: 30, message:' Der Username muss mehr als 6 und weniger als 30 und weniger als 30 und weniger als 30 und weniger als 30 und weniger als 30 und weniger als 30 und weniger als 30 sein. /^[a-zA-Z0-9_/.]+$/,message: 'The username can only consist of alphabetical, number, dot and underscore'},remote: {url: 'remote.php',message: 'The username is not available'},different: {field: 'password',message: 'The username and password cannot be the same as each other'}}},email: {Validatoren: {E -MailAddress: {message: 'Die Eingabe ist keine gültige E -Mail -Adresse'}}}, Passwort: {Validatoren: {Notimpty: {message: 'Das Passwort ist erforderlich und kann nicht leer sein. username'}}}},confirmPassword: {validators: {notEmpty: {message: 'The confirm password is required and cannot be empty'},identical: {field: 'password',message: 'The password and its confirm are not the same'},different: {field: 'username',message: 'The password cannot be the same as username'}}},birthday: {validators: {date: {format: 'YYYY/MM/DD',message: 'The birthday is not valid'}}},gender: {validators: {notEmpty: {message: 'The gender is required'}}},'languages[]': {validators: {notEmpty: {message: 'Please specify at least one language you can speak'}}},'programs[]': {Validatoren: {Auswahl: {min: 2, max: 4, meldung: 'Bitte wählen Sie 2 - 4 Programmiersprachen Sie sind gut unter'}}}, captcha: {validatoren: {callback: {message: 'falsche Antwort', Rückruf: Funktion (Wert, Validator) {var items = $ $). + parseInt (items []); return value == sum;}}}}}}); // validieren Sie das Formular manuell $ ('#validateBtn'). Click (function () {$ ('#defaultForm'). Bootstrapvalidator ('validate');}); $ ('#resetntn'.). {$ ('#defaultForm'). Data ('Bootstrapvalidator'). Resetform (true);});}); </script> </body> </html>Schauen Sie sich 331 Zeilen an, klicken Sie auf Senden, verwenden Sie
$ ('#defaultForm'). Bootstrapvalidator ('validate');Auslöser Formularüberprüfung
Hier ist eine Fallstrick, die mir begegnet ist:
Die Standardlogik des Bootstrapvalidators besteht darin, die Graustaste zu drehen, wenn die Formverifizierung fehlschlägt.
Im Projekt befindet sich die Schaltfläche jedoch nicht im Formular und wird von AJAX durch Ereignisbindung eingereicht. Dann ist die Frage:
Das Projekt muss die gebundenen nachfolgenden Ereignisse nicht ausführen, wenn eine Formüberprüfung fehlschlägt. Baidu konnte lange Zeit keine relevanten Informationen finden, und schließlich hängt es von Google ab:
$ ("#yourForm"). subieren (function (ev) {ev.preventDefault ();}); $ ("#submit"). on ("click", function () {var bootstrapvalidator = $ ("#yourForm"). Data ('Bootstrapvalidator'); Bootstrapvalidator.Validate (); if (bootstrapvalidator.isvalid ()) $ ("#yourForm"). Subjekt (); sonst zurück;});Das obige ist die relevante Kenntnis des Formularverification Plug-in Bootstrapvalidators in Bootstrap, 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!