BootStrapValidate 簡單使用

前陣子用了bootstrapvalidate寫了一個登錄驗證，這裡小記一筆

首先需要引入 

bootstrapValidator.css //可不引入

jquery-2.1.0.min.js

bootstrap.min.js

bootstrapValidator.js

下麵是校驗方式 其中校驗的兩個文本框的name屬性為 loginName和 password （切記文本框一定要用name屬性 否則校驗無效）

function validate(){
            $('form').bootstrapValidator({
                 message: 'This value is not valid',//預設提示信息
                    feedbackIcons: {//提示圖標
                        valid: 'glyphicon glyphicon-ok',
                        invalid: 'glyphicon glyphicon-remove',
                        validating: 'glyphicon glyphicon-refresh'
                    },
                fields: {
                    loginName: {
                        message: '用戶名驗證失敗',
                        validators: {
                            notEmpty: {
                                message: '用戶名不能為空'
                            }
                        }
                    },
                    password: {
                        validators: {
                            notEmpty: {
                                message: '密碼不能為空'
                            }
                        }
                    }
                }
            }).on('success.form.bv',function(e){
                formsub();
                e.preventDefault();//防止自動提交
            });
        }

function formsub(){
            var flag = $('form').data("bootstrapValidator").isValid();//校驗合格
            if(flag){
                var load = top.layer.load();
                var $form = $('#form');
                $.ajax({
                    url:$form.attr('action'),
                    data:$form.serialize(),
                    type:'post',
                    beforeSend:function(){
                        layer.msg('正在登錄');
                    },
                    success:function(data){
                        if(data=="success"){
                            setTimeout(function(){
                                layer.close(load);
                                layer.msg('登錄成功');
                                setAndRemoveCookie();//是否寫入cookie
                            },1000);
                            window.location.href=path+'/department/choose.do';
                        /*     setTimeout(function(){
                                //登錄返回
                                
                            },2000); */
                        }else{
                            layer.close(load);
                            layer.msg('身份驗證失敗,請檢查用戶名或密碼是否正確!',{
                                time:3500 //3.5秒鐘之後關閉
                            });
                            /* setTimeout(function(){
                                
                            },1000); */
                        }
                    },
                    error:function(e){
                        layer.msg('出錯咯o(╥﹏╥)o,請與後臺聯繫!',{
                            btn:'我知道了'
                        });
                        layer.close(load);
                    }
                })
            }
        }

之前在做表單驗證的時候 出現了一個問題 當我點擊登錄的時候 只有第一次點擊時 ajax請求後臺是正常返回用戶名/密碼不對 消息的  
但如果我故意輸錯一次 再次點擊 就會發現 後臺進入了兩次 這時候 ajax直接進入返回的error空白頁了 
網上查閱了資料 說是bootstrapvalidate 存在預設提交行為 於是加了下麵這句代碼就好了 

e.preventDefault();//防止自動提交 

這句代碼 只能加在末尾那一行  否則當點擊登錄的時候 第一次就沒有響應了