1.验证码工具类
package com.syh.utils;
import java.awt.Color;
import java.awt.Font;
import java.awt.Graphics2D;
import java.awt.image.BufferedImage;
import java.io.FileOutputStream;
import java.io.IOException;
import java.io.OutputStream;
import java.io.PrintWriter;
import java.util.Random;
import javax.imageio.ImageIO;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;
public class ValidateCodeServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
@Override
protected void service(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
createCode(request);
write(response.getOutputStream());
}
// 图片的宽度
private int width = 160;
// 图片的高度
private int height = 28;
// 要输入验证码的数量
private int codeCount = 4;
// 验证码上面的模糊线
private int lineCount = 150;
// 验证码,要和用户输入的对比
private String code = null;
private BufferedImage buffImg = null;
private char[] codeSequence = { 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'P', 'Q', 'R',
'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z', '1', '2', '3', '4', '5', '6', '7', '8', '9' };
public void createCode(HttpServletRequest request) {
int x = 0, fontHeight = 0, codeY = 0;
int red = 0, green = 0, blue = 0;
x = width / (codeCount + 2);
fontHeight = height - 2;
codeY = height - 4;
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("Fixedsys", Font.BOLD, fontHeight);
g.setFont(font);
for (int i = 0; i < lineCount; i++) {
int xs = random.nextInt(width);
int ys = random.nextInt(height);
int xe = xs + random.nextInt(width / 8);
int ye = ys + random.nextInt(height / 8);
red = random.nextInt(255);
green = random.nextInt(255);
blue = random.nextInt(255);
g.setColor(new Color(red, green, blue));
g.drawLine(xs, ys, xe, ye);
}
StringBuffer randomCode = new StringBuffer();
for (int i = 0; i < codeCount; i++) {
String strRand = String.valueOf(codeSequence[random.nextInt(codeSequence.length)]);
red = random.nextInt(255);
green = random.nextInt(255);
blue = random.nextInt(255);
g.setColor(new Color(red, green, blue));
g.drawString(strRand, (i + 1) * x, codeY);
randomCode.append(strRand);
}
code = randomCode.toString();
HttpSession session = request.getSession();
session.setAttribute("code", code);
}
public void write(String path) throws IOException {
OutputStream sos = new FileOutputStream(path);
this.write(sos);
}
public void write(OutputStream sos) throws IOException {
ImageIO.write(buffImg, "png", sos);
sos.close();
}
public BufferedImage getBuffImg() {
return buffImg;
}
public String getCode() {
return code;
}
}
2.验证码使用
jsp代码
<form method="get" onSubmit="javascript:CheckForm(this,event)" action= "${pageContext.request.contextPath}/addStudentServlet">
<table>
<caption style="font-size:25px;">注册本系统用户</caption>
<tr>
<td><span>用户名</span></td>
<td><input type="text" name="username"/></td>
</tr>
<tr class="info">
<td>提示信息</td>
<td><span></span></td>
</tr>
<tr>
<td><span>密 码</span></td>
<td><input type="password" name="password"/></td>
</tr>
<tr>
<td><span>重复密码</span></td>
<td><input type="password" name="repassword"/></td>
</tr>
<!-- 验证码 -->
<tr>
<td><input style="width:60px;margin-right:10px;" id="code" value="sfds" type="text"/></td>
<td><img src="${pageContext.request.contextPath}/validateCodeServlet" id="CreateCheckCode" align="middle" title="点击刷新验证码" οnclick="getCode()" style="cursor: pointer;"/></td>
</tr>
<tr id="btn">
<td align="center"><input type="submit" name="sub" value="注册"/></td>
</tr>
</table>
</form>
js代码
function getCode(){
$("#CreateCheckCode").attr("src","${pageContext.request.contextPath}/validateCodeServlet?time="
+ new Date().getTime());
}
3.遇到的问题
自己输入的验证码和系统通过session对象返回的验证码老是不一致,老是出现从session中取出的值是上次刷新页面的的验证码,老是不同步,在这里我是用的Ajax来实现了同步
$.ajax({
cache: true,
type: "POST",
url:ajaxCallUrl,
async: false,
error: function(request) {
alert("Connection error");
evt.preventDefault();
},
success: function(data) {
//回调函数
if("验证失败" == data){
evt.preventDefault();
}
}
});
4.通过Ajax访问检查验证码是否正确的Servlet代码
package com.syh.utils;
import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
public class CheckImageCodeServlet extends HttpServlet{
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp)
throws ServletException, IOException {
doPost(req, resp);
}
@Override
protected void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
String code = request.getParameter("code");
String code1 = (String) request.getSession().getAttribute("code");
PrintWriter writer = response.getWriter();
if(code1.equals(code)){
writer.write("验证成功");
}else{
writer.write("验证失败");
}
}
}
5.web.xml文件的配置的验证的验证码的servlet配置
<servlet>
<servlet-name>CheckImageCodeServlet</servlet-name>
<servlet-class>com.syh.utils.CheckImageCodeServlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>CheckImageCodeServlet</servlet-name>
<url-pattern>/checkImageCodeServlet</url-pattern>
</servlet-mapping>
========================================================================
5.整个jsp页面的代码
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>注册用户</title>
<style type="text/css">
html,body{
padding:0px;
margin:0px;
height:100%;
width:100%;
}
#main,table{
width:40%;
margin:0 auto;
background:#DBDBDB;
height:40%;
}
table{
margin-top:20%;
}
table tr {
height:50px;
line-height:50px;
}
#btn button,#btn input{
margin-top:50px;
width:80px;
height:30px;
background:green;
text-align:center;
}
.info{
color:red;
FILTER: alpha(opacity=0);
opacity:0;
height:20px;
line-height:20px;
}
</style>
<script type="text/javascript" src="${pageContext.request.contextPath }/file/js/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("input[name='username']").blur(function(){
CheckUsername();
} );
})
CheckUsername = function(){
var username = $("input[name=username]").val();
//alert(username);
if($.trim(username) != ""){
var username1 = $.trim(username);
/*使用Ajax进行验证*/
var ajaxCallUrl = '${pageContext.request.contextPath}/checkUsernameServlet?username=' + username1;
$.ajax({
cache: true,
type: "POST",
url:ajaxCallUrl,
async: false,
error: function(request) {
alert("Connection error");
},
success: function(data) {
//验证用户名是否已经存在
//alert(data);
if("no" == data){
$(".info td span").html("用户名已经被占用");
$(".info").css("color","red");
}else{
$(".info td span").html("用户名可以使用");
$(".info").css("color","blue");
}
$(".info").css("opacity","1");
}
});
}else{
//提示用户名不能为空
}
}
function getCode(){
$("#CreateCheckCode").attr("src","${pageContext.request.contextPath}/validateCodeServlet?time="
+ new Date().getTime());
}
//鼠标出输入框时验证
CheckPassord = function(){
var password = $("input[name=password]").val();
var repassword = $("input[name=repassword]").val();
if($.trim(password) != '' && $.trim(repassword) != '' && $.trim(password) == $.trim(repassword)){
return 1;
}else{
return 0;
}
}
function CheckForm(form,evt){
var flag = 0;
//验证用户是否为空
if($.trim($("input[name=username]").val()) != ""){
flag = 1;
}
//验证用户名
var text = $(".info td span").html();
alert(text);
if(text == "用户名可以使用"){
flag = 1;
}else{
flag = 0;
}
if(flag == 1){
//验证密码是否相同
flag = CheckPassord();
if(flag ==1){
//验证验证码是否正确
var code = $("#code").val();
var ajaxCallUrl = '${pageContext.request.contextPath}/checkImageCodeServlet?code=' + code;
/*Ajax验证验证码*/
$.ajax({
cache: true,
type: "POST",
url:ajaxCallUrl,
async: false,
error: function(request) {
alert("Connection error");
evt.preventDefault();
},
success: function(data) {
//回调函数
if("验证失败" == data){
evt.preventDefault();
}
}
});
}else{
evt.preventDefault();
}
}else{
evt.preventDefault();
}
}
</script>
</head>
<body>
<h2>${error}</h2>
<div id = "main">
<form method="get" onSubmit="javascript:CheckForm(this,event)" action= "${pageContext.request.contextPath}/addStudentServlet">
<table>
<caption style="font-size:25px;">注册本系统用户</caption>
<tr>
<td><span>用户名</span></td>
<td><input type="text" name="username"/></td>
</tr>
<tr class="info">
<td>提示信息</td>
<td><span></span></td>
</tr>
<tr>
<td><span>密 码</span></td>
<td><input type="password" name="password"/></td>
</tr>
<tr>
<td><span>重复密码</span></td>
<td><input type="password" name="repassword"/></td>
</tr>
<!-- 验证码 -->
<tr>
<td><input style="width:60px;margin-right:10px;" id="code" value="sfds" type="text"/></td>
<td><img src="${pageContext.request.contextPath}/validateCodeServlet" id="CreateCheckCode" align="middle" title="点击刷新验证码" οnclick="getCode()" style="cursor: pointer;"/></td>
</tr>
<tr id="btn"> <td align="center"><input type="submit" name="sub" value="注册"/></td> </tr> </table> </form> </div> </body></html>
7.上面的jsp代码使用到了用户名通过Ajax进行验证是否已经存在的servlet
package com.syh.servlet;
import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import com.syh.pojo.Student;
import com.syh.service.StudentService;
public class CheckUsernameServlet extends HttpServlet{
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp)
throws ServletException, IOException {
doPost(req, resp);
}
@Override
protected void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
String username = request.getParameter("username");
PrintWriter writer = response.getWriter();
if(username != null && username != ""){
Student student = null;
StudentService service = new StudentService();
student = service.findSampleStudent(username);
System.out.println("啥情况");
if(student.getId() == null){
System.out.println("ok");
writer.write("ok");
}else{//不为空的话说明拥有该用户名的学生存在
System.out.println("用户名:no" + student.getUsername());
writer.write("no");
}
}else{
writer.write("no");
}
}
}
8.验证用户名是否存在的servlet的配置在web.xml
<servlet>
<servlet-name>CheckUsernameServlet</servlet-name>
<servlet-class>com.syh.servlet.CheckUsernameServlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>CheckUsernameServlet</servlet-name>
<url-pattern>/checkUsernameServlet</url-pattern>
</servlet-mapping>