BootstrapValidator实现注册校验和登录错误提示效果
前端之家收集整理的这篇文章主要介绍了
BootstrapValidator实现注册校验和登录错误提示效果,
前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
使用BootstrapValidator进行注册校验和登录错误提示,具体内容如下
1、介绍
在AdminEAP框架中,使用了BootstrapValidator校验框架,本文以注册校验的用户名、登录名、密码、确认密码的校验(后面还有时间区间、服务器校验)为例,讲述BootstrapValidator的使用。同时以登录错误提示为例,说明如何在动态改变组件的错误提示信息。
先看下面的注册与登录的校验效果图:
注册校验:
登录错误提示:根据不同的错误类型,动态改变组件的样式和错误提示内容
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">
Feedback">
Feedback">
Feedback">
Feedback">
Feedback">
3、引入bootstrap-validator.js
4、校验的核心js代码
$(function () {
//将check
Box渲染为icheck样式
$('input').iCheck({
check
BoxClass: 'icheck
Box_square-red',ra
dioClass: 'ira
dio_square-red',increaseArea: '20%' // optional
});
//此处为校验的核心<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: '密码由数字字母下划线和.组成'
}
}
}
}
});
});
5、登录名唯一性校验的后台代码
登录名/邮箱的唯一性
* @param loginName
登录名
* @param userId
用户ID(
用户已经存在,即又改回原来的名字还是唯一的)
* @return
*/
@RequestMapping(value = "/oauth/checkUnique",method = RequestMethod.POST)
@ResponseBody
public Map checkExist(String loginName,String userId) {
Map
map = new HashMap();
User user = userService.getUserByLoginName(loginName);
//用户不存在,校验有效
if (user == null) {
map.put("valid",true);
} else {
//用户存在(存在的用户是当前用户,登录名一致,校验通过,否则校验不通过)
if(!StrUtil.isEmpty(userId)&&userId.equals(user.getLoginName())){
map.put("valid",true);
}else {
map.put("valid",false);
}
}
return map;
}
以上的配置完成了注册文本框的各种校验,更多的校验内容,可以查看相关的bootstrap-validator的API文档。
1、在后台登录时,会抛出各种登录不成功的提示,需要动态改变前端组件的错误提示信息。不同类型的错误信息编码,要控制不同的组件样式和提示内容。以下是后台抛出的错误类型和错误信息(使用shiro认证)。
roles = roleService.getRoleCodeSet(userName);
if (!roles.isEmpty()) {
subject.getSession().setAttribute("isAuthorized",true);
return MAIN_PAGE;
} else {//没有授权
msg = "您没有得到相应的授权!";
model.addAttribute("message",new ResultCode("1",msg));
subject.getSession().setAttribute("isAuthorized",false);
LOGGER.error(msg);
return LOGIN_PAGE;
}
} 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代码
$(function () {
$('input').iCheck({
check
BoxClass: 'icheck
Box_square-red',increaseArea: '20%' // optional
});
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;">
/**
- Created by billJiang on 2017/1/12.
- 登录异常信息显示
*/
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");
}
();
try {
Class> objClass = Class.forName(jobClass);
if(objClass!=null)
map.put("valid",true);
return map;
} catch (Exception ex) {
logger.error(ex.getMessage().toString());
map.put("valid",false);
return map;
}
}