Implémentation de la validation du formulaire basée sur Bootstrap jQuery.validate_jquery

Basé sur la structure du projet de pratique de validation de formulaire Bootstrap jQuery.validate Form :

Adresse du code source sur github : https://github.com/starzou/front-end-example

1. code du formulaire [html]

Copier le code Le code est le suivant :

 
 
     
         
         
         
         
     
     
       

 
           

Form 示例

 
           

 
               

 
                    Name 
                   

 
                         
                   

 
               

 
               

 
                    Password 
                   

 
                         
                   

 
               

 
               

 
                    Intro 
                   

 
                         
                   

 
               

 
               

 
                    Gender 
                   

 
                         
                             
                            boy  
                         
                             
                            gril  
                   

 
               

 
               

 
                    Hobby 
                   

 
                       

 
                             
                                 
                                Music 
                       

 
                       

 
                             
                                 
                                Game  
                       

 
                         
                             
                            option1  
                         
                             
                            option3 
                         
                             
                            option3  
                   

 
               

 
               

 
                    Select 
                   

 
                         
                            1 
                            2 
                            3 
                         
                   

 
               

 
               

 
                   

 
                         
                            Soumettre 
                         
                         
                            Réinitialiser 
                         
                   

 
               

 
             
       

 
         
         
         
         
         
     
 

Jquery.js，bootstrap.js，jquery.validate.js 库

2、form.js 代码[javascript]

复制代码 代码如下 :

var MonValidateur = function() { 
    var handleSubmit = function() { 
        $('.form-horizontal').validate({ 
            errorElement : 'span', 
            errorClass : 'help-block', 
            focusInvalid : false, 
            règles : { 
                nom : { 
                    obligatoire : vrai 
                }, 
                mot de passe : { 
                    obligatoire : vrai 
                }, 
                introduction : { 
                    obligatoire : vrai 
                } 
            }, 
            messages : { 
                nom : { 
                    requis : "Le nom d'utilisateur est requis." 
                }, 
                mot de passe : { 
                    requis : "Le mot de passe est requis." 
                }, 
                introduction : { 
                    requis : "L'introduction est requise." 
                } 
            }, 
            point culminant : fonction (élément) { 
                $(element).closest('.form-group').addClass('has-error'); 
            }, 
            succès : function(label) { 
                label.closest('.form-group').removeClass('has-error'); 
                label.remove(); 
            }, 
            errorPlacement : function (erreur, élément) { 
                element.parent('div').append(erreur); 
            }, 
            submitHandler : function(form) { 
                form.submit(); 
            } 
        }); 
        $('.form-horizontal input').keypress(function(e) { 
            if (e. which == 13) { 
Si ($('.form-horizontal').validate().form()) {
$('.form-horizontal').submit();
                                                                                                                                                     return false ;                                                                                                                                                                          });   }  
Retour {
init : function() {
                handleSubmit();                                                                                                                                         };
}();



Effet :

Un très bon effet spécial pour la validation de formulaire. Je le recommande à tout le monde. Les amis peuvent l'utiliser dans leurs propres projets en l'embellissant librement.