Bootstrap jQuery.validate_jquery를 기반으로 양식 양식 유효성 검사 구현

Bootstrap jQuery.validate 양식 양식 유효성 검사 실습 프로젝트 구조를 기반으로 합니다.

github 소스코드 주소: https://github.com/starzou/front-end-example

1. 양식 코드 [html]

코드 복사 코드는 다음과 같습니다.

 
 
     
         
         
         
         
     
     
       

 
           

Form 示例

 
           

 
               

 
                    Name 
                   

 
                         
                   

 
               

 
               

 
                    Password 
                   

 
                         
                   

 
               

 
               

 
                    Intro 
                   

 
                         
                   

 
               

 
               

 
                    Gender 
                   

 
                         
                             
                            boy  
                         
                             
                            gril  
                   

 
               

 
               

 
                    Hobby 
                   

 
                       

 
                             
                                 
                                Music 
                       

 
                       

 
                             
                                 
                                Game  
                       

 
                         
                             
                            option1  
                         
                             
                            option3 
                         
                             
                            option3  
                   

 
               

 
               

 
                    Select 
                   

 
                         
                            1 
                            2 
                            3 
                         
                   

 
               

 
               

 
                   

 
                         
                            제출 
                        버튼> 
                         
                            재설정
                        버튼> 
                   

 
               

 
            양식> 
       

 
         
         
         
         
       

需要引用jquery.js，bootstrap.js，jquery.validate.js 库

2、form.js 代码[javascript]

复主代码 代码如下:

var MyValidator = function() { 
    var handlerSubmit = function() { 
        $('.form-horizontal').validate({ 
            errorElement: 'span', 
            errorClass: 'help-block', 
            focusInvalid : false, 
            규칙 : { 
                이름 : { 
                    필수: 참 
                }, 
                비밀번호 : { 
                    필수: 참 
                }, 
                소개 : { 
                    필수: 참 
                } 
            }, 
            메시지: { 
                이름 : { 
                    필수 : "사용자 이름이 필요합니다." 
                }, 
                비밀번호 : { 
                    필수 : "비밀번호가 필요합니다." 
                }, 
                소개 : { 
                    필수 : "소개가 필요합니다." 
                } 
            }, 
            하이라이트 : 함수(요소) { 
                $(element).closest('.form-group').addClass('has-error'); 
            }, 
            성공 : 함수(라벨) { 
                label.closest('.form-group').removeClass('has-error'); 
                label.remove(); 
            }, 
            errorPlacement : 함수(오류, 요소) { 
                element.parent('div').append(error); 
            }, 
            submitHandler : 함수(양식) { 
                양식.제출(); 
            } 
        }); 
        $('.form-horizontal input').keypress(function(e) { 
            if (e.which == 13) { 
If ($('.form-horizontal').validate().form()) {
$('.form-horizontal').submit()
~                                    false 반환;                                 ~            });
}  
반환 {
초기화 : 함수() {
                handlerSubmit();                             ~ }; }();



효과:

양식 유효성 검사를 위한 꽤 좋은 특수 효과입니다. 친구들이 자유롭게 꾸미면서 자신의 프로젝트에 사용할 수 있습니다.