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();//防止自动提交 

这句代码 只能加在末尾那一行  否则当点击登录的时候 第一次就没有响应了

 

 

转载于:https://www.cnblogs.com/syasuo/p/9878541.html