About BV form validation, in the company came into contact with, came to understand its powerful;
Now the company has used, so tidy, Baidu a lot, but is fragmented, incomplete, or some pit;
首先第一步:引入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 dependent bootstrap rely jquery
The following jsp page form
<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" οnkeyup="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" οnkeyup="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" οnkeydοwn="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" οnkeydοwn="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>The above is a form registration page includes phone number, code, password, repeat password
The following is the corresponding 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();
})
Background remote Remote Authentication must return a String { "valid": true} or { "valid": false}
verbose: false, each input sequence verification, a verification is not passed, then the next verification is not gone, only displays an error message
Identical: {
Field: 'password', // the other input of the name
Message: 'Two password must be consistent'
}
Verify that both passwords are the same
The above is a brief summary, there is work to be busy, so perfect and so after work then; If you have questions, please contact [email protected]
