jsp生成验证码

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> 
<%@page import="java.awt.image.BufferedImage"%> 
<%@page import="java.awt.Graphics2D"%> 
<%@page import="java.awt.Color"%> 
<%@page import="java.awt.Font"%> 
<%@page import="javax.imageio.ImageIO"%> 
<%@page import="java.util.Random"%> 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>验证码</title> 
</head> 
<body>
	<% 
	int width = 60;
	//定义图片的宽度 
	int height = 20;
	//定义图片的高度
	// 创建具有可访问图像数据缓冲区的Image 
	BufferedImage buffImg = new BufferedImage(width, height, BufferedImage.TYPE_INT_RGB); 
	Graphics2D g = buffImg.createGraphics(); 
	// 创建一个随机数生成器
	Random random = new Random(); 
	//将图像填充为 白色 
	g.setColor(Color.WHITE); 
	g.fillRect(0, 0, width, height); 
	// 创建字体，字体的大小应该根据图片的高度来定 
	Font font = new Font("Times New Roman", Font.PLAIN, 18);
	// 设置字体 
	g.setFont(font); 
	// 画边框
	g.setColor(Color.BLACK); 
	g.drawRect(0, 0, width - 1, height - 1); 
	// 随机产生160条干扰线 ,使图像中的验证码不易被其它程序探测到 
	g.setColor(Color.LIGHT_GRAY); 
	for (int i = 0; i < 160; i++) {
		int x = random.nextInt(width); 
		int y = random.nextInt(height); 
		int x1 = random.nextInt(12); 
		int y1 = random.nextInt(12); 
		g.drawLine(x, y, x + x1, y + y1); 
	} 
	// randomCode 用于保存随机产生的验证码 ，以便用户登陆后进行验证 
	StringBuffer randomCode = new StringBuffer(); 
	int red = 0, green = 0, blue = 0; 
	// 随机产生4位数字的验证码
	for (int i = 0; i < 4; i++) { 
		// 得到随机产生的验证码数字 
		String strRand = String.valueOf(random.nextInt(10)); 
		// 产生随机的颜色分量来构造颜色值 ，这样输出的每位数字的颜色值都将不同 
		red = random.nextInt(110); 
		green = random.nextInt(50); 
		blue = random.nextInt(50); 
		// 用随机产生的颜色将验证码绘制到图像中 
		g.setColor(new Color(red, green, blue));
		g.drawString(strRand, 13 * i + 6, 16); 
		//将产生的四个随机数组合在一起
		randomCode.append(strRand); 
	} 
	// 将四位数字的验证码保存到session中 
	//HttpSession session = request.getSession();
	session.setAttribute("randomCode", randomCode.toString()); 
	// 禁止图像缓存
	response.setHeader("Pragma", "no-cache"); 
	response.setHeader("Cache-Control", "no-cache"); 
	response.setDateHeader("Expires", 0); 
	response.setContentType("image/jpeg"); 
	// 将图像输出到servlet输出流中 
	ServletOutputStream sos = response.getOutputStream(); 
	ImageIO.write(buffImg, "jpeg", sos); 
	sos.close(); 
	//sos = null; 
	out.clear(); 
	out = pageContext.pushBody(); 
	%> 
</body> 
</html>

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>考试星-在线系统考试</title>
    <link href="css/bootstrap.css" rel="stylesheet">
    <link href="css/style.css" rel="stylesheet">
    <link rel="shortcut icon" href="img/logoo.png" type="image/X-icon"/>
    <script src="js/jquery.min.js"></script>
    <script src="js/bootstrap.js"></script>
    <style type="text/css">
			 .l{
    background-color: rgba(255,255,255,0.4);
    width: 500px;
    height:100%;
    position: absolute;
    top: 0px;
    right:30%;
    /*margin:auto;*/
    }
		</style>
    
</head>
<body style="background:url('img/back7.png')no-repeat;background-size:100% 680px;width:900px;height:680px;">

<div class="l container">
    
    <div class="container" style="background: #ffffff;width:360px;height:600px;margin-left:50px;margin-top:50px">
       <form action="login" method="post">
        <center><img src="img/logn.png" style="margin-top: 30px"></center>
        <div class="input-group" style="margin:10px;margin-top: 30px">
       		<span class="input-group-addon" id="basic-addon1"><a class="glyphicon glyphicon-user"></a></span>
			<select class="form-control" name="select">
				<option value="学生">学生</option>
				<option value="管理员">管理员</option>
			</select>
		</div>
        <div class="input-group" style="margin:10px;margin-top: 30px">
           
            <span class="input-group-addon" id="basic-addon1"><a class="glyphicon glyphicon-user"></a></span>

            <input id="userName" type="text" name="uid" class="form-control" placeholder="账号" aria-describedby="basic-addon1">
				
        </div>

        <br>
	
        <!--下面是密码输入框-->

        <div class="input-group" style="margin: 5px">

            <span class="input-group-addon" id=" basic-addon1"><a class="glyphicon glyphicon-lock"></a></span>
            <input id="passWord" type="password" name="password" class="form-control" placeholder="密码" aria-describedby="basic-addon1">
                 
        </div>

        <br>
		
		<span>&nbsp;&nbsp;验&nbsp;证&nbsp;码&nbsp;:&nbsp;&nbsp;</span><input type="text" name="yzm" style="height:30px"> 
       	 		<img src="verifyCode.jsp" id="picture" onclick="change();" style="height:30px"> <!-- 点击图片动态刷新验证码 -->
       	 		<br>
        <!--下面是登陆按钮,包括颜色控制-->
        <center>
        	<input type="submit" name="type" style="margin-top:20px;width:300px;background-color: #2064B7;height: 40px ;color:#ffffff" class="btn btn-default " value="登录">
		</center> 
       <!--  <center>
            <input type="submit" name="type" style="width:280px;background-color: #2064B7;height: 40px ;color:#ffffff" class="btn btn-default " value="管理员登录">
        </center>
        <center>
            <input type="submit" name="type" style="width:280px;background-color: #2064B7;height: 40px;margin-top: 30px;color:#ffffff" class="btn btn-default " value="学生登录">
                
        </center> -->
      
       	
        </form>
        <center>
        <span>${err }</span>
        </center>
    </div>
</div>
<script>
	function change(){
		var pic = document.getElementById("picture");
		var i = Math.random();
		pic.src="verifyCode.jsp?id="+ i;
	}
</script>
</body>
</html>

后台获取验证码的值

HttpSession session = req.getSession();
	String yan=(String)session.getAttribute("randomCode");//获得图片所对应的验证码

猜你喜欢