jdbc+servlet+jsp员工信息管理(二)：注册页面中简单的验证码

源码https://download.csdn.net/download/qq_39192827/10912080

验证码如何实现？简单来说就是用户输入字符与后台随机生成的字符进行对比，不过是在网页上要显示经过图像处理的验证码。

由于这其中有一个前后台信息传递的过程，所以需要一个独立的servlet组件并通过session来传递信息

在CheckCodeServlet我们首先需要一个随机生成多个字符的方法

public static String getNumber(int n){
	String str = "ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789";
	String number ="";
	Random ran = new Random();
	for(int i = 0 ;i<n;i++){
		number+=str.charAt(ran.nextInt(str.length()));
	}
	return number;
}

然后就是生成经过图像处理的验证码发送给网页，并且验证码放在session里

service方法：

public void service(HttpServletRequest request, HttpServletResponse response)
			                                throws ServletException, IOException {
	BufferedImage image = new BufferedImage(80, 30,BufferedImage.TYPE_INT_RGB);
	Graphics  g = image.getGraphics();
	Random r = new Random();
	g.setColor(new Color(r.nextInt(255),r.nextInt(255),r.nextInt(255))); //rgb随机生成颜色
	g.fillRect(0, 0, 80, 30);
	g.setColor(new Color(0,0,0));
	g.setFont(new Font(null,Font.BOLD,30));  //验证码图片字体
	String number = getNumber(4); //随机4位验证码
	HttpSession session = request.getSession();  //获取session
    session.setAttribute("number", number);   //绑定在session中
	g.drawString(number, 1, 24);
	for(int i=0;i<10;i++){   //随机在图片上划线
		g.setColor(new Color(r.nextInt(255),r.nextInt(255),r.nextInt(255)));
		g.drawLine(r.nextInt(80),r.nextInt(30),r.nextInt(80),r.nextInt(30));
	}
	response.setContentType("image/jpeg");
	OutputStream os = response.getOutputStream();
	javax.imageio.ImageIO.write(image, "jpeg", os);
}

web.xml

  <servlet>
  	<servlet-name>img</servlet-name>
  	<servlet-class>com.hyxy.web.CheckCodeServlet</servlet-class>
  </servlet>
  <servlet-mapping>
  	<servlet-name>img</servlet-name>
  	<url-pattern>/image</url-pattern>
  </servlet-mapping>

regist.jsp

<td valign="middle" align="right">
	验证码
	<img id="num" src="image" onclick="document.getElementById('num').src = 'image?'+(new Date()).getTime()"/>
	<a href="javascript:;" onclick="document.getElementById('num').src = 'image?'+(new Date()).getTime()">换一张</a>

</td>

<td valign="middle" align="left">
	<input type="text" class="inputgri" name="number" />
</td>

效果：

接着就是点击提交按钮后验证码的对比，上面的代码都是在一个action为register.user的表单里

UserServlet中获取session中的验证码和用户输入的验证码进行对比：

部分代码：

if("/emp_v4/register.user".equals(uri)){
	String input=req.getParameter("number");  //用户输入的验证码
	String msg=null;
	String number=(String)session.getAttribute("number");  //session中正确的验证码
	if(!number.equalsIgnoreCase(input)){
		msg="CheckCodeWrong";
	}
    if(msg!=null){
		req.setAttribute("msg", msg);
		rq=req.getRequestDispatcher("regist.jsp");
		rq.forward(req, res);
	}
}

如果输入的验证码错误，向注册页面发送信息并跳转

<c:if test="${msg=='CheckCodeWrong'}">验证码错误</c:if>

别忘了web.xml

 <servlet>
  	<servlet-name>img</servlet-name>
  	<servlet-class>com.hyxy.web.CheckCodeServlet</servlet-class>
 </servlet>
 <servlet-mapping>
  	<servlet-name>img</servlet-name>
  	<url-pattern>/image</url-pattern>
 </servlet-mapping>