标签:否则 efault ida 关闭 code log min 登录 oca
前阵子用了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();//防止自动提交
这句代码 只能加在末尾那一行 否则当点击登录的时候 第一次就没有响应了
标签:否则 efault ida 关闭 code log min 登录 oca
原文地址:https://www.cnblogs.com/syasuo/p/9878541.html