上篇博客简单介绍了validate的使用，但是在有些时候validate无法满足我们的需求，比如说校验账号是否已经存在或者邮箱是否已经被注册了，这个时候就需要自己写表单校验了，配合着validate使用功能还是非常强大的（代码有点多，其实非常简单）。
首先是引入validate插件和jquery插件，然后通过ajax异步校验的方式进行校验，这里直接上代码
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
<!-- 引入表单校验插件 -->
<script type="text/javascript" src="js/jquery.validate.min.js"></script>
<script type="text/javascript">
//自定义表单校验规则
//校验用户名是否已经存在
$.validator.addMethod(
//规则的名称
"checkUsername",
//校验函数
//value:输入的内容,element:被校验的元素对象,params:规则对应的参数值
function(value,element,params){
var flag = true;
$.ajax({
"async":false,
"url":"${pageContext.request.contextPath}/checkUsername",
"data":{"username":value},
"type":"post",
"dataType":"json",
"success":function(data){
flag = data.isExist;
}
});
//返回false代表检验器不通过
return !flag;
}
);
//校验邮箱是否已经存在
$.validator.addMethod(
//规则的名称
"checkEmail",
//校验函数
//value:输入的内容,element:被校验的元素对象,params:规则对应的参数值
function(value,element,params){
var flag = true;
$.ajax({
"async":false,
"url":"${pageContext.request.contextPath}/checkEmail",
"data":{"email":value},
"type":"post",
"dataType":"json",
"success":function(data){
flag = data.isExist;
}
});
//返回false代表检验器不通过
return !flag;
});
$(function(){
$("#myform").validate({
rules:{
"nikename":{
"required":true
},
"username":{
"required":true,
"checkUsername":true
},
"password":{
"required":true,
"rangelength":[6,12]
},
"repassword":{
"required":true,
"rangelength":[6,12],
"equalTo":"#password"
},
"email":{
"required":true,
"email":true,
"checkEmail":true
}
},
messages:{
"nikename":{
"required":"昵称不能为空"
},
"username":{
"required":"用户名不能为空",
"checkUsername":"用户名已存在"
},
"password":{
"required":"密码不能为空",
"rangelength":"密码长度6-12位"
},
"repassword":{
"required":"密码不能为空",
"rangelength":"密码长度6-12位",
"equalTo":"两次输入密码不一致"
},
"email":{
"required":"邮箱不能为空",
"email":"邮箱格式不正确",
"checkEmail":"该邮箱已被注册"
}
}
});
});
</script>
<body>
<form action="#" method="post" id="myform">
nikename:<input type="text" name="nikename" id="nikename" /></br>
username:<input type="text" name="username" id="username" /></br>
password:<input type="password" name="password" id="password" /></br>
repassword<input type="password" name="repassword" id="repassword" /></br>
email<input type="email" name="email" id="email"></br>
<input type="submit" value="注册" />
</form>
</body>
</html>然后再创建一个servlet用于接收ajax传递过来的数据，由于笔者当时是分开写的所以治理展示2个servlet
package com.news.web.user;
import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import com.news.service.UserService;
@WebServlet("/checkUsername")
public class CheckUsernameServlet extends HttpServlet {
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
String username = request.getParameter("username");
UserService service = new UserService();
boolean isExist = service.checkUsername(username);
System.out.println(isExist);
String json = "{\"isExist\":"+isExist+"}";//最终以json的形式返回给页面
response.getWriter().write(json);
}
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doGet(request, response);
}
}
package com.news.web.user;
import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import com.news.service.UserService;
@WebServlet("/checkEmail")
public class CheckEmailServlet extends HttpServlet {
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
String email = request.getParameter("email");
UserService service = new UserService();
boolean isExist = service.checkEmail(email);
System.out.println(isExist);
String json = "{\"isExist\":"+isExist+"}";
response.getWriter().write(json);
}
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doGet(request, response);
}
}
service层不做任何处理，直接将值传递给dao层
package com.news.service;
import java.sql.SQLException;
import com.news.dao.UserDao;
import com.news.domain.User;
public class UserService {
//异步校验账号是否存在
public boolean checkUsername(String username) {
UserDao dao = new UserDao();
Long isExist = 0L;
try {
isExist = dao.checkUsername(username);
} catch (SQLException e) {
e.printStackTrace();
}
return isExist>0?true:false;
}
//校验邮箱是否已经被注册
public boolean checkEmail(String email) {
UserDao dao = new UserDao();
Long isExist = 0L;
try {
isExist = dao.checkEmail(email);
} catch (SQLException e) {
e.printStackTrace();
}
return isExist>0?true:false;
}
}然后在dao层中查询一下就可以了
package com.news.dao;
import java.sql.SQLException;
import org.apache.commons.dbutils.QueryRunner;
import org.apache.commons.dbutils.handlers.BeanHandler;
import org.apache.commons.dbutils.handlers.ScalarHandler;
import com.news.domain.User;
import com.news.utils.DataSourceUtils;
public class UserDao {
//查询账号是否存在
public Long checkUsername(String username) throws SQLException {
QueryRunner runner = new QueryRunner(DataSourceUtils.getDataSource());
String sql = "select count(*) from user where username = ?";
return (Long)runner.query(sql, new ScalarHandler(),username);
}
//校验邮箱是否已经存在
public Long checkEmail(String email) throws SQLException {
QueryRunner runner = new QueryRunner(DataSourceUtils.getDataSource());
String sql = "select count(*) from user where email = ?";
return (Long)runner.query(sql, new ScalarHandler(),email);
}
}
1255
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
