JSP之登錄驗證碼

1.JSP頁面中設置輸入選項和驗證碼

<form action=login.do" method="post" >
<div class="line_1" >
　　<span class="line_1_span">會員登錄</span>
　　<input type="text" class="form-control line_2_input" id="exampleInputAmount" placeholder="手機號" name="username">
</div>
<div class="line_3" >
　　<input type="password" class="form-control line_3_input" id="exampleInputPassword3" placeholder="密碼" name="password">
</div>
<div class="line_4">
　　<input type="text"  placeholder="驗證碼" name="code">
<img id="code" alt="點擊刷新" src="code.do" onclick="refreshCode()"/>
</div>
</form>

2.login.jsp中設置JS的方法

<script type="text/javascript">

function refreshCode(){
　　var codeImg = document.getElementById("code");
　　var rand = Math.random();
　　codeImg.src="code.do?random="+rand;
}

</script>

3.配置XML文件

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://xmlns.jcp.org/xml/ns/javaee" xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd" id="WebApp_ID" version="3.1">
  <display-name>D5.10_yanzhengma</display-name>
  <servlet>
      <servlet-name>code.do</servlet-name>
      <servlet-class>com.phone1000.lq.yanzheng.CodeServlet</servlet-class>
  </servlet>
  <servlet-mapping>
      <servlet-name> code.do</servlet-name>
      <url-pattern>/code.do</url-pattern>
  </servlet-mapping>
  
</web-app>

4.servlet中代碼如下

import java.awt.Color;
import java.awt.Font;
import java.awt.Graphics;
import java.awt.image.BufferedImage;
import java.io.IOException;
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;
/**
 * 
 * @author lq
 *
 */
public class CodeServlet extends HttpServlet{
    public static final int NUMBER = 5;
    //1,0,l,容易混淆故去掉這幾個字元
    String strs = "qwertyuipasdfghjkzxcvbnm23456789一二三四五六七八九";
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        //創建模板大小
        BufferedImage bufferImage = new BufferedImage(100, 40, BufferedImage.TYPE_INT_RGB);
        //創建畫筆
        Graphics graphics = bufferImage.getGraphics();
        //調整畫筆顏色
        graphics.setColor(Color.green);
        //設置畫筆初始位子和可畫區域大小
        graphics.fillRect(0, 0, 100, 40);
        int size = strs.length();
        char[] codes = new char[NUMBER];
        Random random = new Random();
        graphics.setFont(new Font("宋體", Font.PLAIN, 16));
        for (int i=0; i<NUMBER; i++){
            int index = random.nextInt(size);
            Character c = strs.charAt(index);
            codes[i]=c;
            graphics.setColor(Color.BLUE);
            //畫出單個字元大小位置
            graphics.drawString(c.toString(),i*20,30);
        }
        //將生成的驗證碼字元串保存在session中
        req.getSession().setAttribute("code", new String(codes));
        //回收資源
        graphics.dispose();
        //顯示圖像及格式
        ImageIO.write(bufferImage, "png", resp.getOutputStream());
        
    }

    
    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        doGet(req,resp);
    }
}

實際使用中註意導入tomcat伺服器，本人使用的測試版本為Apache Tomcat v8.0。