Implementieren der Formularvalidierung basierend auf Bootstrap jQuery.validate_jquery

Basierend auf der Bootstrap jQuery.validate Form-Formularvalidierungspraxis-Projektstruktur:

Quellcode-Adresse auf Github: https://github.com/starzou/front-end-example

1. Formular-Formularcode [html]

Code kopieren Der Code lautet wie folgt:

 
 
     
         
         
         
         
     
     
       

 
           

Form 示例

 
           

 
               

 
                    Name 
                   

 
                         
                   

 
               

 
               

 
                    Password 
                   

 
                         
                   

 
               

 
               

 
                    Intro 
                   

 
                         
                   

 
               

 
               

 
                    Gender 
                   

 
                         
                             
                            boy  
                         
                             
                            gril  
                   

 
               

 
               

 
                    Hobby 
                   

 
                       

 
                             
                                 
                                Music 
                       

 
                       

 
                             
                                 
                                Game  
                       

 
                         
                             
                            option1  
                         
                             
                            option3 
                         
                             
                            option3  
                   

 
               

 
               

 
                    Select 
                   

 
                         
                            1 
                            2 
                            3 
                         
                   

 
               

 
               

 
                   

 
                         
                            Senden 
                         
                         
                            Zurücksetzen 
                         
                   

 
               

 
           

 
       

 
         
         
         
         
         
     
 

Sie können jquery.js,bootstrap.js,jquery.validate.js verwenden

2、form.js 代码[javascript]

复制代码 代码如下:

var MyValidator = function() { 
    var handleSubmit = function() { 
        $('.form-horizontal').validate({ 
            errorElement: 'span', 
            errorClass: 'help-block', 
            focusInvalid: falsch, 
            Regeln: { 
                Name: { 
                    Erforderlich: wahr 
                }, 
                Passwort: { 
                    Erforderlich: wahr 
                }, 
                Einleitung: { 
                    Erforderlich: wahr 
                } 
            }, 
            Nachrichten: { 
                Name: { 
                    erforderlich: „Benutzername ist erforderlich.“ 
                }, 
                Passwort: { 
                    erforderlich: „Passwort ist erforderlich.“ 
                }, 
                Einleitung: { 
                    erforderlich: „Einführung ist erforderlich.“ 
                } 
            }, 
            hervorheben: function(element) { 
                $(element).closest('.form-group').addClass('has-error'); 
            }, 
            Erfolg: function(label) { 
                label.closest('.form-group').removeClass('has-error'); 
                label.remove(); 
            }, 
            errorPlacement: function(error, element) { 
                element.parent('div').append(error); 
            }, 
            commitHandler: function(form) { 
                form.submit(); 
            } 
        }); 
        $('.form-horizontal input').keypress(function(e) { 
            if (e.which == 13) { 
If ($('.form-horizontal').validate().form()) {
$('.form-horizontal').submit();
                                                                                                                                                        return false;                                                                                                                                                                     }); 
}  
Geben Sie {
zurück init: function() {
                handleSubmit();                                                                                                                                       };
}();



Wirkung:

Ein ziemlich guter Spezialeffekt für die Formularvalidierung. Ich kann ihn jedem empfehlen, der ihn in seinen eigenen Projekten verwenden kann.