首先需要引入 以下文件
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();//防止自动提交
这句代码 只能加在末尾那一行 否则当点击登录的时候 第一次就没有响应了