列表结构如下，三行列进行表格分布
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>注册页面</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
<link rel="stylesheet" type="text/css" href="<c:url value='/jsps/css/user/regist.css'/>">
<script type="text/javascript" src="<c:url value='/jquery/jquery-1.5.1.js'/>"></script>
<script type="text/javascript" src="<c:url value='/jsps/js/user/regist.js'/>"></script>
</head>
<body>
<div id="divMain">
<div id="divTitle">
<span id="spanTitle">新用户注册</span>
</div>
<div id="divBody">
<form action="<c:url value='/UserServlet'/>" method="post" id="registForm">
<input type="hidden" name="method" value="regist"/>
<table id="tableForm">
<tr>
<td class="tdText">用户名：</td>
<td class="tdInput">
<input class="inputClass" type="text" name="loginname" id="loginname" value="${form.loginname }"/>
</td>
<td class="tdError">
<label class="errorClass" id="loginnameError">${errors.loginname }</label>
</td>
</tr>
<tr>
<td class="tdText">登录密码：</td>
<td>
<input class="inputClass" type="password" name="loginpass" id="loginpass" value="${form.loginpass }"/>
</td>
<td>
<label class="errorClass" id="loginpassError">${errors.loginpass }</label>
</td>
</tr>
<tr>
<td class="tdText">确认密码：</td>
<td>
<input class="inputClass" type="password" name="reloginpass" id="reloginpass" value="${form.reloginpass }"/>
</td>
<td>
<label class="errorClass" id="reloginpassError">${errors.reloginpass}</label>
</td>
</tr>
<tr>
<td class="tdText">Email：</td>
<td>
<input class="inputClass" type="text" name="email" id="email" value="${form.email }"/>
</td>
<td>
<label class="errorClass" id="emailError">${errors.email}</label>
</td>
</tr>
<tr>
<td class="tdText">验证码：</td>
<td>
<input class="inputClass" type="text" name="verifyCode" id="verifyCode" value="${form.verifyCode }"/>
</td>
<td>
<label class="errorClass" id="verifyCodeError">${errors.verifyCode}</label>
</td>
</tr>
<tr>
<td></td>
<td>
<div id="divVerifyCode"><img id="imgVerifyCode" src="<c:url value='/VerifyCodeServlet'/>"/></div>
</td>
<td>
<label><a href="javascript:_hyz()">换一张</a></label>
</td>
</tr>
<tr>
<td></td>
<td>
<input type="image" src="<c:url value='/images/regist1.jpg'/>" id="submitBtn"/>
</td>
<td>
<label></label>
</td>
</tr>
</table>
</form>
</div>
</div>
</body>
</html>
css结构样式
#divMain {margin-left: 240px;}
#divTitle {line-height: 30px; width: 880px; height: 30px; border: 1px solid #d0d0d0; background: url(/goods/images/bg_btns.png) repeat-x 0px -132px;}
#spanTitle {margin-left: 18px; font-weight: 900;}
#divBody {width: 880px; height: 400px; border-left: 1px solid #d0d0d0;border-bottom: 1px solid #d0d0d0;border-right: 1px solid #d0d0d0;}
.tdText {width: 300px; text-align: right;}
.tdInput{width: 250px;}
.tdError {width: 300px;}
#tableForm {line-height: 50px;}
.inputClass {width: 240px; height: 32px; border: 1px solid #7f9db9; line-height: 32px; padding-left: 10px;}
#imgVerifyCode {width: 100px;}
#divVerifyCode {text-align: center; border: 1px solid #e2e2e2;}
.errorClass {background: url(/goods/images/error.png) no-repeat; color: #f40000; font-size: 10pt; border:1px solid #ffb8b8; background-color: #fef2f2; padding: 8px 8px 8px 35px;}
js代码
验证错误信息
/*
* 判断当前元素是否存在内容，如果存在显示，不页面不显示！
*/
function showError(ele) {
var text = ele.text();//获取元素的内容
if(!text) {//如果没有内容
ele.css("display", "none");//隐藏元素
} else {//如果有内容
ele.css("display", "");//显示元素
}
}
在闭包中进行调用和显示错误信息以及输入框的切换
$(".errorClass").each(function() {
showError($(this));//遍历每个元素，使用每个元素来调用showError方法
});
/*
* 2. 切换注册按钮的图片
*/
$("#submitBtn").hover(
function() {
$("#submitBtn").attr("src", "/goods/images/regist2.jpg");
},
function() {
$("#submitBtn").attr("src", "/goods/images/regist1.jpg");
}
);
/*
* 3. 输入框得到焦点隐藏错误信息
*/
$(".inputClass").focus(function() {
var labelId = $(this).attr("id") + "Error";//通过输入框找到对应的label的id
$("#" + labelId).text("");//把label的内容清空！,才可以调用
showError($("#" + labelId));//隐藏没有信息的label
});
/*
* 4. 输入框失去焦点进行校验
*/
$(".inputClass").blur(function() {
var id = $(this).attr("id");//获取当前输入框的id
var funName = "validate" + id.substring(0,1).toUpperCase() + id.substring(1) + "()";//得到对应的校验函数名
eval(funName);//执行函数调用
});
登录时是否错误校验
$("#registForm").submit(function() {
var bool = true;//表示校验通过
if(!validateLoginname()) {
bool = false;
}
if(!validateLoginpass()) {
bool = false;
}
if(!validateReloginpass()) {
bool = false;
}
if(!validateEmail()) {
bool = false;
}
if(!validateVerifyCode()) {
bool = false;
}
return bool;
});
/*
* 登录名校验方法
*/
function validateLoginname() {
var id = "loginname";
var value = $("#" + id).val();//获取输入框内容
/*
* 1. 非空校验
*/
if(!value) {
/*
* 获取对应的label
* 添加错误信息
* 显示label
*/
$("#" + id + "Error").text("用户名不能为空！");
showError($("#" + id + "Error"));
return false;
}
/*
* 2. 长度校验
*/
if(value.length < 3 || value.length > 20) {
/*
* 获取对应的label
* 添加错误信息
* 显示label
*/
$("#" + id + "Error").text("用户名长度必须在3 ~ 20之间！");
showError($("#" + id + "Error"));
false;
}
/*
* 登录密码校验方法
*/
function validateLoginpass() {
var id = "loginpass";
var value = $("#" + id).val();//获取输入框内容
/*
* 1. 非空校验
*/
if(!value) {
/*
* 获取对应的label
* 添加错误信息
* 显示label
*/
$("#" + id + "Error").text("密码不能为空！");
showError($("#" + id + "Error"));
return false;
}
/*
* 2. 长度校验
*/
if(value.length < 3 || value.length > 20) {
/*
* 获取对应的label
* 添加错误信息
* 显示label
*/
$("#" + id + "Error").text("密码长度必须在3 ~ 20之间！");
showError($("#" + id + "Error"));
false;
}
return true;
}
/*
* 确认密码校验方法
*/
function validateReloginpass() {
var id = "reloginpass";
var value = $("#" + id).val();//获取输入框内容
/*
* 1. 非空校验
*/
if(!value) {
/*
* 获取对应的label
* 添加错误信息
* 显示label
*/
$("#" + id + "Error").text("确认密码不能为空！");
showError($("#" + id + "Error"));
return false;
}
/*
* 2. 两次输入是否一致校验
*/
if(value != $("#loginpass").val()) {
/*
* 获取对应的label
* 添加错误信息
* 显示label
*/
$("#" + id + "Error").text("两次输入不一致！");
showError($("#" + id + "Error"));
false;
}
return true;
}
/*
* Email校验方法
*/
function validateEmail() {
var id = "email";
var value = $("#" + id).val();//获取输入框内容
/*
* 1. 非空校验
*/
if(!value) {
/*
* 获取对应的label
* 添加错误信息
* 显示label
*/
$("#" + id + "Error").text("Email不能为空！");
showError($("#" + id + "Error"));
return false;
}
/*
* 2. Email格式校验
*/
if(!/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((\.[a-zA-Z0-9_-]{2,3}){1,2})$/.test(value)) {
/*
* 获取对应的label
* 添加错误信息
* 显示label
*/
$("#" + id + "Error").text("错误的Email格式！");
showError($("#" + id + "Error"));
false;
}
/*
* 验证码校验方法
*/
function validateVerifyCode() {
var id = "verifyCode";
var value = $("#" + id).val();//获取输入框内容
/*
* 1. 非空校验
*/
if(!value) {
/*
* 获取对应的label
* 添加错误信息
* 显示label
*/
$("#" + id + "Error").text("验证码不能为空！");
showError($("#" + id + "Error"));
return false;
}
/*
* 2. 长度校验
*/
if(value.length != 4) {
/*
* 获取对应的label
* 添加错误信息
* 显示label
*/
$("#" + id + "Error").text("错误的验证码！");
showError($("#" + id + "Error"));
false;
}
提交表格后进行的校验
实体层的代码，改写toString的代码
/*
* 属性哪里来
* 1. t_user表：因为我们需要把t_user表查询出的数据封装到User对象中
* 2. 该模块所有表单：因为我们需要把表单数据封装到User对象中
*/
public class User {
// 对应数据库表
private String uid;//主键
private String loginname;//登录名
private String loginpass;//登录密码
private String email;//邮箱
private boolean status;//状态，true表示已激活，或者未激活
private String activationCode;//激活码，它是唯一值！即每个用户的激活码是不同的！
// 注册表单
private String reloginpass;//确认密码
private String verifyCode;//验证码
// 修改密码表单
private String newpass;//新密码
public String getReloginpass() {
return reloginpass;
}
public void setReloginpass(String reloginpass) {
this.reloginpass = reloginpass;
}
public String getVerifyCode() {
return verifyCode;
}
public void setVerifyCode(String verifyCode) {
this.verifyCode = verifyCode;
}
public String getUid() {
return uid;
}
public void setUid(String uid) {
this.uid = uid;
}
public String getLoginname() {
return loginname;
}
public void setLoginname(String loginname) {
this.loginname = loginname;
}
public String getLoginpass() {
return loginpass;
}
public void setLoginpass(String loginpass) {
this.loginpass = loginpass;
}
public String getEmail() {
return email;
}
public void setEmail(String email) {
this.email = email;
}
public boolean isStatus() {
return status;
}
public void setStatus(boolean status) {
this.status = status;
}
public String getActivationCode() {
return activationCode;
}
public void setActivationCode(String activationCode) {
this.activationCode = activationCode;
}
public String getNewpass() {
return newpass;
}
public void setNewpass(String newpass) {
this.newpass = newpass;
}
@Override
public String toString() {
return "User [uid=" + uid + ", loginname=" + loginname + ", loginpass="
+ loginpass + ", email=" + email + ", status=" + status
+ ", activationCode=" + activationCode + ", reloginpass="
+ reloginpass + ", verifyCode=" + verifyCode + ", newpass="
+ newpass + "]";
}
}
dao层的逻辑操作
private QueryRunner qr = new TxQueryRunner();
/**
* 校验用户名是否注册
* @param loginname
* @return
* @throws SQLException
*/
public boolean ajaxValidateLoginname(String loginname) throws SQLException {
String sql = “select count(1) from t_user where loginname=?”;
Number number = (Number)qr.query(sql, new ScalarHandler(), loginname);
return number.intValue() == 0;
}
/**
* 校验Email是否注册
* @param email
* @return
* @throws SQLException
*/
public boolean ajaxValidateEmail(String email) throws SQLException {
String sql = "select count(1) from t_user where email=?";
Number number = (Number)qr.query(sql, new ScalarHandler(), email);
return number.intValue() == 0;
}
service层操作
/**
* 用户名注册校验
* @param loginname
* @return
*/
public boolean ajaxValidateLoginname(String loginname) {
try {
return userDao.ajaxValidateLoginname(loginname);
} catch (SQLException e) {
throw new RuntimeException(e);
}
}
/**
* Email校验
* @param email
* @return
*/
public boolean ajaxValidateEmail(String email) {
try {
return userDao.ajaxValidateEmail(email);
} catch (SQLException e) {
throw new RuntimeException(e);
}
}
与客户端通过ajax进行的交互
private UserService userService = new UserService();
/**
* ajax用户名是否注册校验
* @param req
* @param resp
* @return
* @throws ServletException
* @throws IOException
*/
public String ajaxValidateLoginname(HttpServletRequest req, HttpServletResponse resp)
throws ServletException, IOException {
/*
* 1. 获取用户名
*/
String loginname = req.getParameter("loginname");
/*
* 2. 通过service得到校验结果
*/
boolean b = userService.ajaxValidateLoginname(loginname);
/*
* 3. 发给客户端
*/
resp.getWriter().print(b);
return null;
}
/**
* ajax Email是否注册校验
* @param req
* @param resp
* @return
* @throws ServletException
* @throws IOException
*/
public String ajaxValidateEmail(HttpServletRequest req, HttpServletResponse resp)
throws ServletException, IOException {
/*
* 1. 获取Email
*/
String email = req.getParameter("email");
/*
* 2. 通过service得到校验结果
*/
boolean b = userService.ajaxValidateEmail(email);
/*
* 3. 发给客户端
*/
resp.getWriter().print(b);
return null;
}
/**
* ajax验证码是否正确校验
* @param req
* @param resp
* @return
* @throws ServletException
* @throws IOException
*/
public String ajaxValidateVerifyCode(HttpServletRequest req, HttpServletResponse resp)
throws ServletException, IOException {
/*
* 1. 获取输入框中的验证码
*/
String verifyCode = req.getParameter("verifyCode");
/*
* 2. 获取图片上真实的校验码
*/
String vcode = (String) req.getSession().getAttribute("vCode");
/*
* 3. 进行忽略大小写比较，得到结果
*/
boolean b = verifyCode.equalsIgnoreCase(vcode);
/*
* 4. 发送给客户端
*/
resp.getWriter().print(b);
return null;
}
ajax代码，判断是否注册
$.ajax({
url:"/goods/UserServlet",//要请求的servlet
data:{method:"ajaxValidateLoginname", loginname:value},//给服务器的参数
type:"POST",
dataType:"json",
async:false,//是否异步请求，如果是异步，那么不会等服务器返回，我们这个函数就向下运行了。
cache:false,
success:function(result) {
if(!result) {//如果校验失败
$("#" + id + "Error").text("用户名已被注册！");
showError($("#" + id + "Error"));
return false;
}
}
});
return true;
/*
* 3. 是否注册校验
*/
$.ajax({
url:"/goods/UserServlet",//要请求的servlet
data:{method:"ajaxValidateEmail", email:value},//给服务器的参数
type:"POST",
dataType:"json",
async:false,//是否异步请求，如果是异步，那么不会等服务器返回，我们这个函数就向下运行了。
cache:false,
success:function(result) {
if(!result) {//如果校验失败
$("#" + id + "Error").text("Email已被注册！");
showError($("#" + id + "Error"));
return false;
}
}
});
return true;
/*
* 3. 是否正确
*/
$.ajax({
url:"/goods/UserServlet",//要请求的servlet
data:{method:"ajaxValidateVerifyCode", verifyCode:value},//给服务器的参数
type:"POST",
dataType:"json",
async:false,//是否异步请求，如果是异步，那么不会等服务器返回，我们这个函数就向下运行了。
cache:false,
success:function(result) {
if(!result) {//如果校验失败
$("#" + id + "Error").text("验证码错误！");
showError($("#" + id + "Error"));
return false;
}
}
});
return true;
数据表结构代码
DROP TABLE IF EXISTS `t_user`;
CREATE TABLE `t_user` (
`uid` char(32) NOT NULL,
`loginname` varchar(50) DEFAULT NULL,
`loginpass` varchar(50) DEFAULT NULL,
`email` varchar(50) DEFAULT NULL,
`status` tinyint(1) DEFAULT NULL,
`activationCode` char(64) DEFAULT NULL,
PRIMARY KEY (`uid`),
UNIQUE KEY `loginname` (`loginname`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8;
利用c3p0包的配置文件
<?xml version="1.0" encoding="UTF-8" ?>
<c3p0-config>
<default-config>
<property name="jdbcUrl">
<![CDATA[
jdbc:mysql://localhost:3306/goods?useUnicode=true&characterEncoding=UTF8&useServerPrepStmts=true&prepStmtCacheSqlLimit=256&cachePrepStmts=true&prepStmtCacheSize=256&rewriteBatchedStatements=true
]]>
</property>
<property name="driverClass">com.mysql.jdbc.Driver</property>
<property name="user">root</property>
<property name="password">123456</property>
<property name="acquireIncrement">3</property>
<property name="initialPoolSize">10</property>
<property name="minPoolSize">2</property>
<property name="maxPoolSize">10</property>
</default-config>
</c3p0-config>
541
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
