Java Web项目页面验证码功能

登录注册页面如何实现验证码功能

一、Js验证码

是通过编写JavaScript代码获得的随机验证码,在客户端运行。

二、页面效果

三、代码实现

1、在login.jsp界面的登录和注册（div盒子）下面添加以下内容：

<div class="form-group">
	<label for="validatecode" class="sr-only">验证码</label>
	<img  src="code" onclick="this.src='code?'+Math.random();" class="c_code" title="点击更换"> 
	<input type="text" class="form-control" name="validatecode" id="validatecode" placeholder="验证码" autocomplete="off">
</div>

2、创建一个servlet,名字为ValidateCode

代码如下：

import java.awt.Color;
import java.awt.Font;
import java.awt.Graphics;
import java.awt.image.BufferedImage;
/**
 * 验证码处理逻辑
 */
import java.io.IOException;
import java.io.OutputStream;
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 ValidateCode extends HttpServlet {
	private static final long serialVersionUID = 1L;

	protected void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		Random rand = new Random();
		//1创建空白图片
		BufferedImage image = new BufferedImage(100,24,BufferedImage.TYPE_INT_RGB);
		
		//2获取图片画笔
		Graphics g =image.getGraphics();
		
		//3设置画笔颜色
		g.setColor(new Color(rand.nextInt(255),rand.nextInt(255),rand.nextInt(255)));
		
		//4绘制矩形的背景
		g.fillRect(0, 0, 100, 24);//x，y，width，height
		
		//5获取字符串的方法
		String code = getNumber(5);
		
		//6session绑定验证码
		HttpSession session = request.getSession();
		session.setAttribute("code", code);
		
		//7重新设置画笔默认颜色
		g.setColor(new Color(0,0,0));
		
		//8设置字体颜色
		g.setFont(new Font(null,Font.BOLD,24));//名字，样式粗体，大小24
		
		//9绘制字符串
		g.drawString(code, 15, 20);//str,x,y
		
		response.setContentType("images/jpeg;charset=utf-8");
		OutputStream os = response.getOutputStream();
		ImageIO.write(image, "jpeg", os);//
		
	}

	/**
	 * 获取指定长度的字母和数字组合的字符串
	 * @param size
	 * @return
	 */
	private String getNumber(int size) {
		String code = "";
		String str = "ABCDEFGHIJKMLNOPQRSTUVWSYZabcdefghijklmnopqrstuvwxyz0123456789";
		Random rand = new Random();
		for(int i=0;i<size;i++) {
			code += str.charAt(rand.nextInt(str.length()));
		}
		return code;
	}
}

3、修改web.xml

代码如下：（其中注意ValidateCode的大小写）

 <servlet>
    <description></description>
    <display-name>ValidateCode</display-name>
    <servlet-name>ValidateCode</servlet-name>
    <servlet-class>cn.smp.djc.servlet.ValidateCode</servlet-class>
  </servlet>
  <servlet-mapping>
    <servlet-name>ValidateCode</servlet-name>
    <url-pattern>/code</url-pattern>
  </servlet-mapping>

4、找到login对应的servlet，在其中的protected void login() 方法添加如下代码:

if (count > 0) {
    String code = request.getSession().getAttribute("code").toString().toLowerCase();
	String validatecode = request.getParameter("validatecode").toLowerCase();
	if (!validatecode.equalsIgnoreCase(code)) {
		response.getWriter().write("<script>alert('验证码输入错误');history.back();</script>");
	  } else {
			HttpSession session = request.getSession();
			session.setAttribute("SESSION_user", user);// 调用user的值到某一界面
			request.getRequestDispatcher("index.jsp").forward(request,response);

四、代码展示：