BootStrapValidate 簡單使用

cm777發表於2018-10-30
boot

前陣子用了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();//防止自動提交 
這句程式碼 只能加在末尾那一行  否則當點選登入的時候 第一次就沒有響應了


 





 




























相關文章