jsp代码：
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>简单的注册页面</title>
<!-- 引入我们的regist.cs -->
<link rel="stylesheet" type="text/css" href="css/regist.css">
<script type="text/javascript" src="/Book/js/jquery-3.2.1.js"></script>
<script type="text/javascript" src="/Book/js/regist.js"></script>
</head>
<body>
<div id="div1">
<div id="div2">
<span id="spanTitle">新用户注册</span>
</div>
<div id="div3">
<table id="table">
<tr>
<td class="clas1">用户名：</td>
<td class="clas2">
<input class="clas4" type="text" name="username" id="username"/>
</td>
<td class="clas3">
<label class="errorClass" id="usernameError">用户名不能为空！</label>
</td>
</tr>
<tr>
<td class="clas1">登录密码：</td>
<td>
<input class="clas4" type="password" name="password" id="password"/>
</td>
<td>
<label class="errorClass" id="passwordError"></label>
</td>
</tr>
<tr>
<td class="clas1">确认密码：</td>
<td>
<input class="clas4" type="password" name="repassword" id="repassword"/>
</td>
<td>
<label class="errorClass" id="repasswordError"></label>
</td>
</tr>
<tr>
<td class="clas1">Email：</td>
<td>
<input class="clas4" type="text" name="email" id="email"/>
</td>
<td>
<label class="errorClass" id="emailError"></label>
</td>
</tr>
<tr>
<td class="clas1">验证码：</td>
<td>
<input class="clas4" type="text" name="verifyCode" id="verifyCode"/>
</td>
<td>
<label class="errorClass" id="verifyCodeError"></label>
</td>
</tr>
<tr>
<td></td>
<td>
<div id="divVerifyCode"><img id="validationCode_img" src="verifyCode.jsp"></div>
</td>
<td>
<label ><a href="javascript:another('verifyCode.jsp')">换一张</a></label>
</td>
</tr>
<tr>
<td></td>
<td>
<input type="image" src="image/regist1.jpg" id="submit"/>
</td>
<td>
<label></label>
</td>
</tr>
</table>
</div>
</div>
</body>
</html>
js样式：
$(function() {
/*
* 得到所有的错误信息，循环遍历，调用一个方法是否显示错误的信息
*/
$(".errorClass").each(function(){
showError($(this));
});
/**
* 切换注册码的图片
*/
$("#submit").hover(
function() {
$("#submit").attr("src","/Book/image/regist2.jpg")
},
function() {
$("#submit").attr("src","/Book/image/regist1.jpg")
}
);
/**
* 输入框得到焦点隐藏信息
*/
$(".clas4").focus(function() {
var labelId = $(this).attr("id") + "Error";//通过输入框找到对应的labelId
$("#" + labelId).text("");//把label内容清空
showError($("#" + labelId));//隐藏没有信息的label
});
/**
* 输入框失去焦点进行效验
*/
$(".clas4").blur(function() {
/* 举一反三*/
});
});
/**
* 判断当前元素是否存在内容
*/
function showError(ele) {
var text = ele.text();//获取元素的内容
if(!text){//如果没有内容
ele.css("display","none");//隐藏元素
}else{
ele.css("display","");//显示元素
}
}
/**
* 换一张验证码
*/
function another(img){
var getImageCode = document.getElementById("validationCode_img");
getImageCode.src = img + "?id=" +Math.random();
}
cs样式：
#div1{
margin-left: 240px;
}
#div2{
width: 880px;
height: 30px;
border: 1px solid #d0d0d0;
line-height: 30px;
background: url(/Book/image/bg_btns.png)
repeat-x 0px -132px;
}
#spanTitle{
margin-left: 18px;
font-weight: 900;
}
#div3{
width: 880px;
height: 400px;
border-left: 1px solid #d0d0d0;
border-bottom: 1px solid #d0d0d0;
border-right: 1px solid #d0d0d0;
}
.clas1{
width: 300px;
text-align: right;
}
.clas2{
width:250px;
}
.clas3{
width: 300px;
}
.clas4{
width:240px;
height:30px;
border:1px solid #7f9db9;
line-height: 32px;
padding-left: 10px;
}
#table{
line-height: 50px;
}
#validationCode_img{
width: 100px;
}
#divVerifyCode{
text-align: center;
line-height: 30px;
}
.errorClass{
color: #f40000;
font-size: 10pt;
border: 1px solid #ffb8b8;
background-color: #fef2f2;
padding: 8px 8px 8px 35px;
background: url(/Book/image/error.png) no-repeat;
}
生成验证码的verifyCode.jsp：
csdn上找到的现成代码
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@page import="java.awt.image.BufferedImage"%>
<%@page import="java.awt.Graphics2D"%>
<%@page import="java.awt.Color"%>
<%@page import="java.awt.Font"%>
<%@page import="javax.imageio.ImageIO"%>
<%@page import="java.util.Random"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
<%
int width = 60;
int height = 20;
// 创建具有可访问图像数据缓冲区的Image
BufferedImage buffImg = new BufferedImage(width, height,
BufferedImage.TYPE_INT_RGB);
Graphics2D g = buffImg.createGraphics();
// 创建一个随机数生成器
Random random = new Random();
g.setColor(Color.WHITE);
g.fillRect(0, 0, width, height);
// 创建字体，字体的大小应该根据图片的高度来定
Font font = new Font("Times New Roman", Font.PLAIN, 18);
// 设置字体
g.setFont(font);
// 画边框
g.setColor(Color.BLACK);
g.drawRect(0, 0, width - 1, height - 1);
// 随机产生160条干扰线
g.setColor(Color.LIGHT_GRAY);
for (int i = 0; i < 160; i++) {
int x = random.nextInt(width);
int y = random.nextInt(height);
int x1 = random.nextInt(12);
int y1 = random.nextInt(12);
g.drawLine(x, y, x + x1, y + y1);
}
// randomCode 用于保存随机产生的验证码
StringBuffer randomCode = new StringBuffer();
int red = 0, green = 0, blue = 0;
// 随机产生4位数字的验证码
for (int i = 0; i < 4; i++) {
// 得到随机产生的验证码数字
String strRand = String.valueOf(random.nextInt(10));
// 产生随机的颜色分量来构造颜色值
red = random.nextInt(110);
green = random.nextInt(50);
blue = random.nextInt(50);
// 用随机产生的颜色将验证码绘制到图像中
g.setColor(new Color(red, green, blue));
g.drawString(strRand, 13 * i + 6, 16);
randomCode.append(strRand);
}
// 将四位数字的验证码保存到session中
//HttpSession session = request.getSession();
session.setAttribute("randomCode", randomCode.toString());
// 禁止图像缓存
response.setHeader("Pragma", "no-cache");
response.setHeader("Cache-Control", "no-cache");
response.setDateHeader("Expires", 0);
response.setContentType("image/jpeg");
// 将图像输出到servlet输出流中
ServletOutputStream sos = response.getOutputStream();
ImageIO.write(buffImg, "jpeg", sos);
sos.close();
//sos = null;
out.clear();
out = pageContext.pushBody();
%>
</body>
</html>
项目截图：
效果图：
输入框得到焦点和失去焦点功能并未完善。
