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 handleSubmit = function() {
        $('.form-horizo​​ntal').validate({
            errorElement : 'span',
            errorClass : 'help-block',
            focusInvalid : false、
            ルール: {
                名前: {
                    必須: true
                }、
                パスワード: {
                    必須: true
                }、
                イントロ : {
                    必須: true
                }
            }、
            メッセージ: {
                名前: {
                    required : "ユーザー名は必須です。" 
                }、
                パスワード: {
                    required : 「パスワードが必要です。」 
                }、
                イントロ : {
                    required : 「イントロは必須です。」 
                }
            }、
            ハイライト : function(element) {
                $(element).closest('.form-group').addClass('has-error'); 
            }、
            成功 : 関数(ラベル) {
                label.closest('.form-group').removeClass('has-error'); 
                label.remove(); 
            }、
            errorPlacement : function(error, element) {
                element.parent('div').append(error); 
            }、
            submitHandler : function(form) {
                form.submit(); 
            }
        }); 
        $('.form-horizo​​ntal input').keypress(function(e) {
            if (e.that == 13) {
If ($('.form-horizo​​ntal').validate().form()) {
$('.form-horizo​​ntal').submit();                                                                                                                                  false を返す;                                                                                                                             });
}
リターン {
init : function() {
handleSubmit();                                                                                                               };
}();



効果:

フォーム検証用の非常に優れた特殊効果です。友人は自由に美化して自分のプロジェクトに使用できます。