Jede Seite, die Informationen zur Bearbeitung von Benutzern und Speichern beinhaltet, beinhaltet die Überprüfung, ob die Daten den Anforderungen entsprechen, und erfordert eine Überprüfung von der Client- und Serverseite.
Die Überprüfung auf der Kundendienstseite dient hauptsächlich darin, die Benutzererfahrung zu verbessern, während die Überprüfung auf der Serverseite die Einhaltung von Daten sicherstellen soll.
Dieses Plug-In unterstützt auch die Formalverifizierung für Sie. Fügen Sie eine Erforderliche hinzu: Die Konfiguration der Spalten, die überprüft werden müssen. Bei der Regeneration des Etiketts vor dem Formularelement wird A * automatisch vor dem Etikett generiert, wodurch die erneute Erstöckung überprüft wird.
Überprüfung wird verwendet. Für eine bestimmte Verwendung finden Sie in der API der JQuery -Validierung.
Der Code ist wie folgt (Seitenadresse: https://github.com/xiexingen/bootstrap-smartform/blob/master/demo/form5-validation.html):
<! DocType html> <html lang = "en"> <pead> <meta charset = "utf-8"> <title> Form-Verifizierung </title> <meta name = "viewPort" content = "width = Geräte-Width, initial-scale = 1"> <link rel = "stylesheet"-href = ". rel = "styleSheet" href = "../ CSS/Site.css"> <script src = "../ lib/jQuery.js"> </script> <script src = "../ lib/jquery.validat.js"> </script Src = ". src="../scripts/global.js"></script><!--Plugin--><script src="../scripts/plugin.js"></script></head><body><div><div><label>Smart Form with Verification</label><div><button id="btnSubmit">Submit Form</button></div><div><form action="#" id = "FormContainer"> </form> </div> <div> <div> <label> Einführung </Label> </div> <div> <Label> Überprüfung der Formulare </h3> <blockquote> <p> Verwenden Sie die JQuery -Validierung zur Validierung. Weitere Überprüfungsmethoden finden Sie in der JQuery -Validierung. Benutzerdefinierte Verifizierung global.fn.setDefaultValidator () Methode In der Global.js-Datei wird die Datei in eine Tool-Datei geändert, die viele Toolmethoden definiert, einschließlich der Formatisierung des Datums, der Datumsformatierung, der Array-Beurteilung, Festlegen der Standardverifizierung, Anzeigenachricht, Pop-up-Fenster, Initialisierungs-Initialisierungsformat, Datei-Speichern, Formularsparung usw. </p> </blockiert. Eles = [[{Label: {text: 'benutzerdefiniert Benutzername: '}, ele: {Typ:' Text ', Name:' Benutzername ', Titel:' Benutzername: ', Erforderlich: true}}, {ele: {type:' radio ', nam E: 'Sex', Titel: 'Geschlecht:', Elemente: [{text: 'männlich', Wert: 1}, {text: 'weiblich', Wert: 2}]}}, {ele: {Typ: 'Kontrollkästchen', Name: 'Plant', Titel: 'Verwenden von Plattform:', Elemente: [{text: 'App', Wert: 'App'}, {text: 'web', value: 'web'}]}}} ],[{ele:{type:'select',name:'province',title:'Province:',withNull:true,items:[{text:'Guangdong',value:'GD'},{text:'Hunan',value:'HN'}]}},{ele:{pre:{text:'<input type = "radio"> '}, type:' text ', name:' displayName ', title:' display name: '}}, {ele: {type:' such ', title:' product ', id:' productName ', forder: true}}], [{{ele: {type:' datetime ', name' Periode: '}}, {ele: {type:' datetime ', name:' todate ', title:' ~ '},]; // versteckte Formelemente werden hauptsächlich zur Bearbeitung verwendet. '1,3'}). Render ('FormContainer', Funktion (bf) {var model = {primaryKey: 1, Benutzername: 'xxg', Sex: 1, Pflanze: ['App', 'Web'], Provinz: 'GD', DisplayName: 'Test', ProductName: 'Notizb OOK ', FromEdate:' 2015-06-10 ', Todate:' 2015-08-08 '}; bf.initFormData (Modell);}); () {if (! $ ("#FormContainer"). Valid ()) {alert ("Verifizierung fehlgeschlagen!");} else {var postdata = bsform.getFormData (); Alert ("Die erhaltenen Ausdrucksdaten ist:"+JSON.Stringify (postdata)); global.fn.setDefaultValidator (); // Verifizierungsregeln definieren $ ("#FormContainer"). Validate ({Regeln: {Benutzername: {Erforderlich: true, minlength: 3, maxLength: 10}, productName: {form: true}}});Die Spalte Benutzername ist mit der erforderlichen Einfüll- und Längenüberprüfung konfiguriert. Die laufende Schnittstelle löscht den Benutzernamenwert. Sie können den Effekt sehen, wenn Sie das Formular einreichen:
Die Renderings sind wie folgt: