使用BootstrapValidator进行注册校验和登录错误提示，具体内容如下
@H_502_3@1、介绍
在AdminEAP框架中，使用了BootstrapValidator校验框架，本文以注册校验的用户名、登录名、密码、确认密码的校验（后面还有时间区间、服务器校验）为例，讲述BootstrapValidator的使用。同时以登录错误提示为例，说明如何在动态改变组件的错误提示信息。
502_3@注册校验：
502_3@登录错误提示：根据不同的错误类型，动态改变组件的样式和错误提示内容
1、头部引入bootstrap-validator.css
${basePath}为系统的路径变量
2、form组件
<div class="jb51code">
<pre class="brush:xhtml;">
<form action="${basePath}/oauth/register" method="post" id="register-form">
<input type="hidden" name="oAuthId" value="${oAuthInfo.oAuthId?default('-1')}">
<input type="hidden" name="oAuthType" value="${oAuthInfo.oAuthType?default('-1')}">
<div class="form-group has-Feedback">
3、引入bootstrap-validator.js
4、校验的核心js代码
//此处为校验的核心<a href="https://www.jb51.cc/tag/daima/" target="_blank" class="keywords">代码</a>
$("#register-form").bootstrapValidator({
submitHandler: function (valiadtor,loginForm,submitButton) {
valiadtor.defaultSubmit();
},fields: {
userName: {
validators: {
notEmpty: {
message: '<a href="https://www.jb51.cc/tag/yonghuming/" target="_blank" class="keywords">用户名</a>不能为空'
},stringLength: {
/*长度<a href="https://www.jb51.cc/tag/tishi/" target="_blank" class="keywords">提示</a>*/
min: 4,max: 30,message: '<a href="https://www.jb51.cc/tag/yonghuming/" target="_blank" class="keywords">用户名</a>长度必须在4到30之间'
}
}
},loginName: {
validators: {
notEmpty: {
message: '<a href="https://www.jb51.cc/tag/denglu/" target="_blank" class="keywords">登录</a>邮箱名或<a href="https://www.jb51.cc/tag/yonghuming/" target="_blank" class="keywords">用户名</a>不能为空'
},message: '<a href="https://www.jb51.cc/tag/yonghuming/" target="_blank" class="keywords">用户名</a>长度必须在4到30之间'
},threshold: 4,//只有4个字符以上才发送ajax请求
remote: {
url: "${basePath}/oauth/checkUnique",data: function (validator) {
return {
loginName: $("#loginName").val(),userId: null
};
},message: '该<a href="https://www.jb51.cc/tag/denglu/" target="_blank" class="keywords">登录</a>名已被使用，请使用其他<a href="https://www.jb51.cc/tag/denglu/" target="_blank" class="keywords">登录</a>名',delay:2000
}
}
},password: {
validators: {
notEmpty: {
message: '密码不能为空'
},stringLength: {
/*长度<a href="https://www.jb51.cc/tag/tishi/" target="_blank" class="keywords">提示</a>*/
min: 6,message: '密码长度必须在6到30之间'
},different: {//不能和<a href="https://www.jb51.cc/tag/yonghuming/" target="_blank" class="keywords">用户名</a>相同
field: 'loginName',//需要进行比较的input name值
message: '不能和<a href="https://www.jb51.cc/tag/yonghuming/" target="_blank" class="keywords">用户名</a>相同'
},regexp: {
regexp: /^[a-zA-Z0-9_\.]+$/,message: '密码由数字字母下划线和.组成'
}
}
},repassword: {
message: '密码无效',validators: {
notEmpty: {
message: '密码不能为空'
},stringLength: {
min: 6,message: '<a href="https://www.jb51.cc/tag/yonghuming/" target="_blank" class="keywords">用户名</a>长度必须在6到30之间'
},identical: {//相同
field: 'password',message: '两次密码不一致'
},message: '不能和<a href="https://www.jb51.cc/tag/yonghuming/" target="_blank" class="keywords">用户名</a>相同'
},regexp: {//匹配规则
regexp: /^[a-zA-Z0-9_\.]+$/,message: '密码由数字字母下划线和.组成'
}
}
}
}
});});
以上的配置完成了注册文本框的各种校验，更多的校验内容，可以查看相关的bootstrap-validator的API文档。
1、在后台登录时，会抛出各种登录不成功的提示，需要动态改变前端组件的错误提示信息。不同类型的错误信息编码，要控制不同的组件样式和提示内容。以下是后台抛出的错误类型和错误信息（使用shiro认证）。
} else {
return LOGIN_PAGE;
}
//0 未授权 1 账号问题 2 密码<a href="https://www.jb51.cc/tag/cuowu/" target="_blank" class="keywords">错误</a> 3 账号密码<a href="https://www.jb51.cc/tag/cuowu/" target="_blank" class="keywords">错误</a>
} catch (IncorrectCredentialsException e) {
msg = "<a href="https://www.jb51.cc/tag/denglu/" target="_blank" class="keywords">登录</a>密码<a href="https://www.jb51.cc/tag/cuowu/" target="_blank" class="keywords">错误</a>. Password for account " + token.getPrincipal() + " was incorrect";
model.addAttribute("message",new ResultCode("2",msg));
LOGGER.error(msg);
} catch (ExcessiveAttemptsException e) {
msg = "<a href="https://www.jb51.cc/tag/denglu/" target="_blank" class="keywords">登录</a>失败<a href="https://www.jb51.cc/tag/cishu/" target="_blank" class="keywords">次数</a>过多";
model.addAttribute("message",new ResultCode("3",msg));
LOGGER.error(msg);
} catch (LockedAccountException e) {
msg = "帐号已被锁定. The account for username " + token.getPrincipal() + " was locked.";
model.addAttribute("message",msg));
LOGGER.error(msg);
} catch (DisabledAccountException e) {
msg = "帐号已被禁用. The account for username " + token.getPrincipal() + " was disabled.";
model.addAttribute("message",msg));
LOGGER.error(msg);
} catch (ExpiredCredentialsException e) {
msg = "帐号已过期. the account for username " + token.getPrincipal() + " was expired.";
model.addAttribute("message",msg));
LOGGER.error(msg);
} catch (UnknownAccountException e) {
msg = "帐号不存在. There is no user with username of " + token.getPrincipal();
model.addAttribute("message",msg));
LOGGER.error(msg);
} catch (UnauthorizedException e) {
msg = "您没有得到相应的授权！" + e.getMessage();
model.addAttribute("message",msg));
LOGGER.error(msg);
}2、前端核心JS代码
fillbackLoginForm();
$("#login-form").bootstrapValidator({
message:'请输入<a href="https://www.jb51.cc/tag/yonghuming/" target="_blank" class="keywords">用户名</a>/密码',submitHandler:function (valiadtor,submitButton) {
rememberMe($("input[name='rememberMe']").is(":checked"));
valiadtor.defaultSubmit();
},fields:{
userName:{
validators:{
notEmpty:{
message:'<a href="https://www.jb51.cc/tag/denglu/" target="_blank" class="keywords">登录</a>邮箱名或<a href="https://www.jb51.cc/tag/yonghuming/" target="_blank" class="keywords">用户名</a>不能为空'
}
}
},password:{
validators:{
notEmpty:{
message:'密码不能为空'
}
}
}
}
});
<!--freemark语法，查看是否从后台传送过来错误信息，并初始化错误提示组件LoginValidator-->
<#if message??>
new LoginValidator({
code:"${message.code?default('-1')}",message:"${message.message?default('')}",userName:'userName',password:'password'
});
</#if>
});
//使用本地缓存记住<a href="https://www.jb51.cc/tag/yonghuming/" target="_blank" class="keywords">用户名</a>密码
function rememberMe(rm_flag){
//remember me
if(rm_flag){
localStorage.userName=$("input[name='userName']").val();
localStorage.password=$("input[name='password']").val();
localStorage.rememberMe=1;
}
//delete remember msg
else{
localStorage.userName=null;
localStorage.password=null;
localStorage.rememberMe=0;
}
}
//记住回填
function fillbackLoginForm(){
if(localStorage.rememberMe&&localStorage.rememberMe=="1"){
$("input[name='userName']").val(localStorage.userName);
$("input[name='password']").val(localStorage.password);
$("input[name='rememberMe']").iCheck('check');
$("input[name='rememberMe']").iCheck('update');
}
}3、LoginValidator组件的代码 login.js
<div class="jb51code">
<pre class="brush:js;">
/**
function LoginValidator(config) {
this.code = config.code;
this.message = config.message;
this.userName = config.userName;
this.password = config.password;
this.initValidator();
}
//0 未授权 1 账号问题 2 密码错误 3 账号密码错误
LoginValidator.prototype.initValidator = function () {
if (!this.code)
return;
if(this.code==0){
this.addPasswordErrorMsg();
}else if(this.code==1){
this.addUserNameErrorStyle();
this.addUserNameErrorMsg();
}else if(this.code==2){
this.addPasswordErrorStyle();
this.addPasswordErrorMsg();
}else if(this.code==3){
this.addUserNameErrorStyle();
this.addPasswordErrorStyle();
this.addPasswordErrorMsg();
}
return;
}
LoginValidator.prototype.addUserNameErrorStyle = function () {
this.addErrorStyle(this.userName);
}
LoginValidator.prototype.addPasswordErrorStyle = function () {
this.addErrorStyle(this.password);
}
LoginValidator.prototype.addUserNameErrorMsg = function () {
this.addErrorMsg(this.userName);
}
LoginValidator.prototype.addPasswordErrorMsg = function () {
this.addErrorMsg(this.password);
}
LoginValidator.prototype.addErrorMsg=function(field){
$("input[name='"+field+"']").parent().append('<small data-bv-validator="notEmpty" data-bv-validator-for="'+field+'" class="help-block">' + this.message + '');
}
LoginValidator.prototype.addErrorStyle=function(field){
$("input[name='" + field + "']").parent().addClass("has-error");
}
以上把错误提示封装成了一个LoginValidator组件，方便前端调用，增强代码的可维护性，因为没有找到Bootstrap-validator改变错误提示的接口，所以查看了源码之后做了封装。
@H_502_3@4、补充
1、时间区间校验
},message:'结束时间不能小于开始时间'
}
}
},"endTime":{
validators:{
date:{
format:'YYYY-MM-DD HH:mm',validator){
var startTime=$("#startTime").val();
var endTime=value;
if(startTime&&endTime){
return DateDiff(endTime,message:'结束时间不能小于开始时间'
}
}
},</pre>2、服务器校验
Github： AdminEAP：
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程之家。
原文链接：https://www.f2er.com/bootstrap/40828.html