1.所需要的插件下载地址(放到js目录下)
https://pan.baidu.com/s/16KyrX16dzgGTIncho2WHmg
2.引入库
<script src="js/jquery.validate.min.js" type="text/javascript"></script>
3.编写校验文件
<script type="text/javascript">
//自定义校验规则
$.validator.addMethod(
//自定义校验规则的名称
"checkUsername",
//自定义规则校验的函数
function(value,elements,params){
var flag = false ;
$.ajax({
"async":false, //必须是同步才能校验成功
"url":"${pageContext.request.contextPath}/user?method=checkUsername",
"data":{"username":value},
"type":"POST",
"dataType":"json",
"success":function(data){
flag = data.isExit;
}
});
//返回false代表该校验器不通过
return !flag ;
}
)
$(function(){
$("#myform").validate({
rules:{
"username":{
"required":true,
"checkUsername":true
},
"password":{
"required":true,
"rangelength":[6,12]
},
"repassword":{
"required":true,
"rangelength":[6,12],
"equalTo":"#password"
},
"email":{
"required":true,
"email":true
},
"sex":{
"required":true
}
},
messages:{
"username":{
"required":"用户名不能为空哦!",
"checkUsername":"用户名已经存在"
},
"password":{
"required":"密码不能为空哦!",
"rangelength":"密码长度必须为6-12位哦!"
},
"repassword":{
"required":"密码不能为空哦!",
"rangelength":"密码长度必须为6-12位哦!",
"equalTo":"两次密码不一致"
},
"email":{
"required":"邮箱不能为空哦!",
"email":"邮箱格式不正确"
},
"sex":{
"required":"必须选择性别"
}
}
});
});
</script>
4.checkUsername
web层
public void checkUsername(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//接收数据
String username = request.getParameter("username");
UserService service = new UserService();
boolean isExit = service.checkUsername(username);
//将数据写回Ajax
String json = "{\"isExit\":"+isExit+"}";
response.getWriter().write(json);
}
service层
//校验注册时用户名是否已经存在
public boolean checkUsername(String username) {
Long isExit = 0l;
try {
isExit = dao.checkUsername(username);
} catch (SQLException e) {
e.printStackTrace();
}
return isExit>0?true:false;
}
dao层
//注册时校验用户名是否已经存在
public Long checkUsername(String username) throws SQLException {
QueryRunner qr = new QueryRunner(DataSourceUtils.getDataSource());
String sql = "select count(*) from user where username=?";
Long query = (Long) qr.query(sql, new ScalarHandler(), username);
return query;
}