微客导航 » 文章资讯 » BootstrapValidator验证用户名已存在（ajax）

BootstrapValidator验证用户名已存在（ajax）

2023-08-09 16:34:03 157

Javaweb项目：bootstrap实现注册页面，mvc模式联合mysql数据库检查用户名的唯一性。

一、实现效果：

重置这里有bug，bootstrapValidator验证不能重置，待解决。

二、代码准备：

引入bootstrap，bootstrapValidator和jquery。

/css/bootstrap.min.css"rel="externalnofollow"/>
/css/bootstrapValidator.min.css"rel="externalnofollow"/>

/js/jquery.min.js">
/js/bootstrap.min.js">
/js/bootstrapValidator.min.js">

三、部分代码：

/UserServlet"method="post">


用户名

邮箱

密码

确认密码

利用bootstrapValidator表单验证代码。ajax部分有详细注释


$(function(){
$('#registerForm').bootstrapValidator({
message:'Thisvalueisnotvalid',
feedbackIcons:{
valid:'glyphiconglyphicon-ok',
invalid:'glyphiconglyphicon-remove',
validating:'glyphiconglyphicon-refresh'
},
fields:{
userName:{
message:'Theusernameisnotvalid',
validators:{
notEmpty:{
message:'用户名不能为空'
},
stringLength:{
min:2,
max:12,
message:'用户名由2-12位字符组成'
},
threshold:2,//有2字符以上才发送ajax请求
remote:{//ajax验证。serverresult:{"valid",trueorfalse}
url:"/ImageShare/UserServlet",
message:'用户名已存在,请重新输入',
delay:1000,//ajax刷新的时间是1秒一次
type:'POST',
//自定义提交数据，默认值提交当前inputvalue
data:function(validator){
return{
userName:$("input[name=userName]").val(),
method:"checkUserName"//UserServlet判断调用方法关键字。
};
}
}
}
},
userEmail:{
validators:{
notEmpty:{
message:'邮箱不能为空'
},
emailAddress:{
message:'输入不是有效的电子邮件地址'
}
}
},
userPassword:{
validators:{
notEmpty:{
message:'密码不能为空'
},
stringLength:{
min:6,
max:10,
message:'密码由6-10位字符组成'
},
identical:{
field:'confirmUserPassword',
message:'密码输入不一致'
}
}
},
confirmUserPassword:{
validators:{
notEmpty:{
message:'密码不能为空'
},
stringLength:{
min:6,
max:10,
message:'密码由6-10位字符组成'
},
identical:{
field:'userPassword',
message:'密码输入不一致'
}
}
}
}
});
});

UserServlet.java检查用户名唯一性部分代码。

protectedvoiddoPost(HttpServletRequestrequest,HttpServletResponseresponse)throwsServletException,IOException{
//TODOAuto-generatedmethodstub
request.setCharacterEncoding("UTF-8");
//0、获取method判断执行操作
Stringmethod=request.getParameter("method");
if("checkUserName".equals(method)){
//验证用户名是否已存在
checkUserName(request,response);
}
}

//根据用户名称查询，检查用户名称的唯一性（用户注册）
publicvoidcheckUserName(HttpServletRequestrequest,HttpServletResponseresponse)throwsIOException{
response.setCharacterEncoding("UTF-8");
//返回json数据，格式为{"valid",true}表示合法，验证通过。{"valid":false}表示不合法，验证不通过
StringjsonResult="";
StringuserName=request.getParameter("userName");
//去数据进行唯一性确认
if(userName!=null){
//服务层service调用数据库访问层dao中的searchUserName方法。
booleanb=UserServiceImpl.searchUserName(userName);
if(b){
//如果名称存在
jsonResult="{\"valid\":false}";
}else{
//如果该名称不存在
jsonResult="{\"valid\":true}";
}
}else{
jsonResult="{\"valid\":false}";
}
//response把jsonResult打到前台
response.getWriter().write(jsonResult);
}

四、总结：

1.利用bootstrapValidator的ajax表单验证用户名已存在关键是自定义提交的数据。

2.将当前input的value值和判断操作方法的method关键字提交

3.注意当server必需返回形如：{“valid”,trueorfalse}的json数据格式

4.servlet通过response.getWriter().write(jsonResult)返回响应的内容jsonResult到前台页面。

如果大家还想深入学习，可以点击这里进行学习，再为大家附3个精彩的专题：

Bootstrap学习教程

Bootstrap实战教程

Bootstrap插件使用教程

以上就是关于本文的全部内容，希望对大家的学习有所帮助。

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

返回顶部
3162201930
czq8825@qq.com

BootstrapValidator验证用户名已存在（ajax）

热门推荐

随机推荐