关于BV表单验证,在上家公司接触到了,才理解了它的强大;
现在公司又用到了,所以整理一下,百度了好多,不过都是零零散散,不完整,有的还是坑;
首先第一步:引入js和css
<link href="https://cdn.bootcss.com/bootstrap-validator/0.5.3/css/bootstrapValidator.min.css" rel="stylesheet">
<link href="https://cdn.bootcss.com/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet">
<script src="${contextPath }/resource/js/jquery-3.1.1.js"></script>
<script src="https://cdn.bootcss.com/twitter-bootstrap/4.1.2/js/bootstrap.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap-validator/0.5.3/js/bootstrapValidator.min.js"></script>
bootstrapValidator依赖bootstrap依赖jquery
下面jsp页面表单
<form action="" method="post" class="phone_registration" id="register">
<div class="username form-group">
<img src="${contextPath }/resource/img/login/phone.png" />
<input type="text" name="phone" id="phone" class="form-control" maxlength="11" onkeyup="this.value=this.value.replace(/\s+/g,'')" placeholder="请输入手机号" />
</div>
<div class="code form-group">
<div class="code_main">
<img src="${contextPath }/resource/img/login/code.png" />
<input type="text" name="code" id="code" class="form-control" maxlength="4" onkeyup="this.value=this.value.replace(/\s+/g,'')" placeholder="请输入验证码" />
</div>
<span>发送验证码</span>
</div>
<div class="password form-group">
<img src="${contextPath }/resource/img/login/password.png" />
<input type="password" name="password" id="password" class="form-control" maxlength="20" onkeydown="if(event.keyCode==32) return false" placeholder="请输入密码" />
</div>
<div class="password form-group">
<img src="${contextPath }/resource/img/login/password.png" />
<input type="password" name="repassword" id="repassword" class="form-control" maxlength="20" onkeydown="if(event.keyCode==32) return false" placeholder="请确认密码" />
</div>
<div class="form-group">
<button type="submit" name="submit" id="register_btn" class="btn btn-primary register">登录</button>
</div>
</form>
上面是注册页面的表单包括手机号,验证码,密码,重复密码
下面是对应的js
$('#register').bootstrapValidator({
message: 'This value is not valid',
feedbackIcons: {
valid: 'fa fa-check',
invalid: 'fa fa-times',
validating: 'fa fa-refresh'
},
fields: {
phone: {
message: '手机号校验失败!',
verbose:false,
validators: {
notEmpty: {
message: '手机号不能为空'
},regexp: {
regexp: /^1(3|4|5|6|7|8)\d{9}$/,
message: '手机号不合法'
},stringLength: {
min: 11,
max: 11,
message: '手机号长度必须为11位'
},threshold:11 , //有11字符以上才发送ajax请求,(input中输入一个字符,插件会向服务器发送一次,设置限制,11字符以上才开始)
remote: {//ajax验证。{"valid":true} 服务器返回值必须是这种 否则识别不了
url: contextPath+'/login/checkPhone',//验证地址
message: '手机号已被注册',//提示消息
delay : 1,//每输入一个字符,就发ajax请求,服务器压力还是太大,设置1秒发送一次ajax(默认输入一个字符,提交一次,服务器压力太大)
type: 'POST',//请求方式
/**自定义提交数据,默认值提交当前input value*/
data:function(validator){
return {
phone:$('[name="phone"]').val()
};
},
}
}
},
code: {
message: '验证码输入错误',
verbose:false,
validators: {
notEmpty: {
message: '手机验证码不能为空'
},regexp: {
regexp: /^\d{4}$/,
message: '手机验证码只能是4位数字'
}
}
},password: {
message: '密码验证失败',
verbose:false,
validators: {
notEmpty: {
message: '密码不能为空'
},regexp: {
regexp: /^[a-zA-Z0-9_]+$/,
message: '密码只能包含大写、小写、数字和下划线'
},stringLength: {
min: 6,
max: 20,
message: '密码长度必须在6到20位之间'
}
}
},
repassword: {
message: '密码输入错误!',
verbose:false,
validators: {
notEmpty: {
message: '密码不能为空'
},regexp: {
regexp: /^[a-zA-Z0-9_]+$/,
message: '密码只能包含大写、小写、数字和下划线'
},stringLength: {
min: 6,
max: 20,
message: '密码长度必须在6到20位之间'
},identical: {
field: 'password',
message: '两次密码必须保持一致'
}
}
}
}
}).on('success.form.bv', function (e) {
e.preventDefault();
var toURL = $("#toURL").val();
//判断记住密码是否选中
if($("input[name='remeberme']").is(':checked')==true){
console.log("提交表单并记住密码》》");
saveInfo();//选中的话那么浏览器就记住密码了;
}
$.ajax({
url: contextPath+"/login/login",
dataType:"json",
type: "POST",
data: {"loginname":$('#loginname').val(),"loginpwd":$('#loginpwd').val()},
success: function(data){
if(data.code == 0){
layui.use('layer',function () {
layer.msg('登录成功!');
})
if(toURL != null && toURL != '' && toURL != undefined && toURL != 'undefined'){
window.location.href = decodeURIComponent(toURL);
}else{
window.location.href = contextPath+"/main/homePage";
}
}else if(data.code == 2){//登录失败
layui.use('layer',function () {
layer.msg('由于您登陆失败次数过多,请于一小时后登陆');
})
}else{
if(data.obj.remainTimes > 0){
$('#login').bootstrapValidator('disableSubmitButtons', false);
}
layui.use('layer',function () {
layer.msg('用户名或密码错误,一小时内您还有'+data.obj.remainTimes+'次登陆次数');
})
}
}
})
});
$('#loginname').focus();
GetCookie();
})
remote 远程验证后台返回的String类型必须为{"valid":true} 或者{"valid":false}
verbose:false,每一个input顺序验证,一个验证不通过,那么下一个验证就不走,所以只显示一条错误信息
identical: {
field: 'password',//另外一个input的name
message: '两次密码必须保持一致'
}
验证两个密码是否相同
以上是简单总结,还有工作要忙,所以等下班之后再进行完善;如果有问题,请联系292738354@qq.com