Toute page qui implique des informations d'édition d'utilisation et l'enregistrement consiste à vérifier si les données répondent aux exigences et nécessitent une vérification du côté client et du serveur;
La vérification du côté du service client est principalement pour améliorer l'expérience utilisateur, tandis que la vérification du côté serveur est d'assurer la conformité des données.
Ce plug-in prend également en charge la vérification du formulaire pour vous. Ajoutez un requis: vrai à la configuration des colonnes qui doivent être vérifiées. Lors de la régénération de l'étiquette devant l'élément de formulaire, A * sera automatiquement généré devant l'étiquette, qui est utilisé pour inviter que les données sont recoloutisées seront vérifiées.
La vérification est utilisée. Pour une utilisation spécifique, veuillez vous référer à l'API de la validation JQuery.
Le code est le suivant (adresse de la page: https://github.com/xiexingen/bootstrap-smartform/blob/master/demo/form5-validation.html):
<! Doctype html> <html lang = "en"> <éadf> <meta charset = "utf-8"> <ititle> Vérification du formulaire </ title> <meta name = "Viewport" content = "width = device-width, initial-scale = 1"> <lin rel = "Stylesheet" href = "../ css / site.css"> <script src = "../ lib / jQuery.js"> </ script> <script src = "../ lib / jQuery.valida.js"> </ script> <script src = "../ lib / bootsstrap.js"> </ script> <! src = "../ scripts / global.js"> </ script> <! - plugin -> <script src = "../ scripts / plugin.js"> </ script> </ head> <body> <v> <v> <label> Smart Form avec vérification </ label> <v> <bouton ID = "btnsubmit"> Soumettre le formulaire </ Button> id = "FormContainer"> </ Form> </div> <div> <div> <Belle> Introduction </ Label> </div> <div> <Belle> Vérification des formulaires </h3> <lockquote> <p> Utilisez la validation JQuery pour la validation. Pour d'autres méthodes de vérification, veuillez vous référer à la validation JQuery. Vérification personnalisée Global.fn.SetDefaultValidator () Méthode Dans le fichier global.js, le fichier est changé en fichier d'outils, qui définit de nombreuses méthodes d'outils, y compris la sérialisation du formulaire, le formatage des dattes, le jugement du tableau, la vérification par défaut, le message d'affichage, la fenêtre pop-up, le plug-in d'initialisation, le formulaire d'initialisation, le téléchargement de fichiers, la sauvegarde du formulaire, etc. eles = [[{label: {texte: 'Custom nom d'utilisateur: '}, ele: {type:' text ', nom:' username ', titre:' nom d'utilisateur: ', obligatoire: true}}, {ele: {type:' radio ', nam E: 'Sex', titre: 'Gender:', éléments: [{texte: 'mâle', valeur: 1}, {texte: 'femelle', valeur: 2}]}}, {ele: {type: 'Checkbox', Nom: 'Plant', titre: 'Utilisation de la plate-forme:', éléments: [{texte: 'app ", valeur:' app '}, {text:' web ', valeur:' web '}]}} ], [{ele: {type: 'select', nom: 'province', titre: 'province:', withnull: true, item type = "radio"> '}, type:' text ', nom:' affichename ', titre:' affichage name: '}}, {ele: {type:' search ', title:' product ', id:' productName ', obligé: true}}], [{ele: {Type:' DateTime ', name:' FromEdate ', title:' Valridation Période: '}}, {ele: {Type:' DateTime ', nom:' todate ', titre:' ~ '},]]; // Les éléments de forme cachés sont principalement utilisés pour l'édition. '1,3'}). Render ('formContainer', fonction (bf) {var modèle = {primaireKey: 1, nom d'utilisateur: 'xxg', sexe: 1, plante: ['app ",' web '], province:' gd ', affichage:' test ', productName:' noteb Ook ', FromEdate:' 2015-06-10 ', Todate:' 2015-08-08 '}; bf.initFormData (modèle);}); $ ("# btnsubmit"). bind (' click ', fonction () {if (! $ ("# formContainer"). Valid ()) {alert ("Vérification a échoué!");} else {var postdata = bsform.getFormData (); alert ("Les données d'expression obtenues sont:" + json.stringify (postdata)); global.fn.setDefaultValidator (); // Définir les règles de vérification $ ("# formContainer"). Validate ({règles: {username: {requis: true: minLength: 3, maxLength: 10}, productName: {required: true}}});});La colonne de nom d'utilisateur est configurée avec la vérification de remplissage et de longueur requise. L'interface en cours supprime la valeur du nom d'utilisateur. Vous pouvez voir l'effet lors de la soumission du formulaire:
Les rendus sont les suivants: