登录注册页面如何实现验证码功能
一、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);
四、代码展示: