简单验证码的实现
程序员文章站
2022-05-24 20:52:15
...
验证码:
<%@page import="java.awt.Font"%>
<%@page import="javax.imageio.ImageIO"%>
<%@page import="java.awt.Graphics"%>
<%@page import="java.awt.image.BufferedImage"%>
<%@page import="java.util.Random"%>
<%@page import="java.awt.Color"%>
<%@ page language="java" contentType="image/jpeg; charset=UTF-8" pageEncoding="UTF-8"%>
<%!
//随机产生颜色值
public Color getColor(){
//产生r g b 的随机值
Random random = new Random();
int r = random.nextInt(256);
int g = random.nextInt(256);
int b = random.nextInt(256);
return new Color(r,g,b);//red green blue 0-255
}
//产生随机四位数(真实的验证码值)
public String getNum(){
//Math.Random 取值在(0-1) *9000:(0-9000)->0-8999 +1000:(1000-9999)
int num = (int)(Math.random()*9000)+1000;
//转字符串
return String.valueOf(num);
}
%>
<%
//禁止缓存,防止验证码过期
response.setHeader("Pragma", "no-cache");
response.setHeader("Cache-Control", "no-cache");
response.setHeader("Expires", "0");
/*
*绘制验证码
*/
BufferedImage image = new BufferedImage(80,30,BufferedImage.TYPE_INT_RGB);//绘制背景的长宽高
//画笔
Graphics graphics = image.getGraphics();
graphics.fillRect(0, 0, 80, 30);//填充长方形背景
//设置验证码数字的字体
graphics.setFont(new Font("seif",Font.BOLD,18));
graphics.setColor(getColor());//绘制验证码的画笔的颜色
String checkCode = getNum();//验证码的随机数字
StringBuffer sb = new StringBuffer();
for(int i=0;i<checkCode.length();i++){//checkCode.charAt提取验证码,sb.append拼接空格将其分开
sb.append(checkCode.charAt(i)+" ");
}
//验证码数字
graphics.drawString(sb.toString(), 10,20);//绘制
//绘制干扰线条
for(int i=0;i<=20;i++){
Random random = new Random();
int xBegin = random.nextInt(80);
int yBegin = random.nextInt(30);
int xEnd = random.nextInt(xBegin+10);
int yEnd = random.nextInt(yBegin+10);
graphics.setColor(getColor());//绘制扰线条的画笔的颜色
graphics.drawLine(xBegin, yBegin, xEnd, yEnd);//绘制线条
}
//将验证码的真实值放到Session中 供在使用时校验
session.setAttribute("checkCode", checkCode);
ImageIO.write(image, "jpeg", response.getOutputStream());//真实产生图片
//关闭
out.clear();
out = pageContext.pushBody(); // 变成路径 <input type="image" src="xxx" >
%>
client:
<script type="text/javascript" src="js/jquery-3.1.1.js"></script>
<script type="text/javascript">
function reloadChekImg(){
$("img").attr("src","img.jsp?t="+(new Date().getTime()));
}
$(document).ready(function(){
$("#checkCodeId").blur(function(){
//校验:文本框中输入的值 发送到服务器
//服务器: 校验文本框的值 与真是图片的验证码的值 是否相等
var $checkCode = $("#checkCodeId").val();
$.post(
"checkServlet",
"checkCode="+$checkCode,
function(data){//返回图片地址 imgs/right.jpg imgs/wrong.jpg
var $dataContent = $("<img src='"+data+"' height='15px' width='15px' />")
if(data == "imgs/wrong.jpg"){
$("img").attr("src","img.jsp?t="+(new Date().getTime()));
}
$("#tip").html($dataContent);
}
);
}) ;
});
</script>
验证码:
```
***Server***
//返回值
String dataTip = "imgs/wrong.jpg";
//获取用户敲得验证码值
String checkcodeClient = request.getParameter("checkCode");
//获取真实的验证码值
String checkcodeServer = (String) request.getSession().getAttribute("checkCode");
if(checkcodeClient .equals(checkcodeServer )) {//判断两者是否相等
dataTip = "imgs/right.jpg" ;
}
response.setContentType("text/html; charset=UTF-8");
PrintWriter out = response.getWriter();
out.write(dataTip);
out.flush();//刷新
out.close();
上一篇: 简单验证码的实现
下一篇: View的测量与绘制