JavaWeb中实现验证码功能，详解

为什么设置验证码？

验证码就是将一串随机产生的数字或符号，生成一幅图片，图片里加上一些干扰元素，防机器人注册，由用户肉眼识别其中的验证码信息，然后输入表单提交网站验证，验证成功后才能使用某项功能。

 

原理？

验证码通常用在用户登录或留言的网页界面中，当用户在浏览器端输入验证码之后，将用户名、密码和验证码等信息提交到服务器，服务器端获取用户的提交之后，判断用户提交的验证码字符与服务器端保存的字符是否相同。如果相同，则通过对用户提交信息的验证；否则将提示没有通过验证的提示信息。

 

代码？

 

jsp（简写）

                <div class="identifyingcode">
					<div>
						<input class="inputIdentifyingcode" id="code" type="text"
							name="code" placeholder="input identifyingCode">
					</div>
					<div>
						<div style="float: left;">
							<img class="imgcode" alt="Code" id="scode"
								src="/HelpProject/ImageServlet" />
						</div>
						<div style="float: left;">
							<a class="aunclear" href="#" onclick="flushCode()">unClear?</a>
						</div>
					</div>
				</div>

css

.identifyingcode{
	float: left;
	margin-left: 100px;
	margin-top: 10px;
	height: 50px;
	width: 200px;
	border: none;
}
.inputIdentifyingcode{
	height: 29px;
	width: 200px;
	border: none;
	background: white;
}
.imgcode{
	display: inline-block;
	height: 30px;
	width: 100px;
}
.aunclear{
	display: inline-block;
	height: 30px;
	width: 90px;
	text-align: center;
	line-height: 30px;
	color: black;
	font-size: 12px;
}
.okss{
	float: left;
	margin-left: 170px;
	margin-top: 30px;
	height: 30px;
	width: 60px;
	background: white;
}
.okss_in{
	float: left;
	height: 30px;
	width: 60px;
}
.register{
	clear: left;
	float: left;
	margin-left: 10px;
	margin-top: 60px;
	height: 30px;
	width: 100px;
}
.forget{
	float: left;
	margin-left: 150px;
	margin-top: 60px;
	height: 30px;
	width: 120px;
}

js

//用于刷新验证码，每次刷新的时候获取当前时间，防止浏览器缓存刷新失败
	function flushCode() {	
		var time = new Date();
		document.getElementById("scode").src = "/HelpProject/ImageServlet?time=" 
				+ time;
	}

//src路径为项目中下面servlet的路径

 

servlet

package com.qcbylearn.utils;


import java.awt.Color;
import java.awt.Graphics;
import java.awt.image.BufferedImage;
import java.io.IOException;
import java.util.Random;
 
import javax.imageio.ImageIO;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

/**
 * Servlet implementation class GetImage
 */
@WebServlet("/ImageServlet")
public class ImageServlet extends HttpServlet {
	 /**
	 * 
	 */
	private static final long serialVersionUID = 1L;
	// 
    private static final int IMG_HEIGHT = 100;
    // 
    private static final int IMG_WIDTH = 30;
    // 
    private static final int CODE_LEN = 4;
 
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp)
            throws ServletException, IOException {
        doPost(req, resp);
    }
 
    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp)
            throws ServletException, IOException {
        // 
        BufferedImage bi = new BufferedImage(IMG_HEIGHT, IMG_WIDTH, BufferedImage.TYPE_INT_RGB);
        // 
        Graphics graphics = bi.getGraphics();
        graphics.setColor(new Color(220,220,220)); // 
        graphics.fillRect(0, 0, 100, 30); // 
 
        // 
        char[] codeChar = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456".toCharArray();
        String captcha = ""; // 
        Random random = new Random();
        for(int i = 0; i < CODE_LEN; i++) { //
            int index = random.nextInt(codeChar.length);
            // 
            graphics.setColor(new Color(random.nextInt(150), random.nextInt(200), random.nextInt(255)));
            // 
            graphics.drawString(codeChar[index] + "", (i * 20) + 15, 20);
            captcha += codeChar[index];
        }
        // 
        req.getSession().setAttribute("code", captcha); 
       
        //
        ImageIO.write(bi, "JPG", resp.getOutputStream());
    }
 
}

 

 

代码没有给大家具体使用步骤，但是用起来很方便，主要是src中的路径配对了就行，有问题找我哦。