1.在jsp頁面用js生成驗證碼並保存在變量中,驗證碼作為參數傳到java(繼承了HttpServlet)類
2.根據jsp頁面中傳過來的驗證碼畫出一個有幹擾線或幹擾點的圖片
3.在WEB-INF/web.xml中配置 servlet
4.在jsp頁面調用配置好的servlet,一般是通過<img src="servlet名" id="code"/>調用
5.提交數據之前驗證
<form onsubmit="return validate();"....../>
局部刷新驗證碼:<a href="#" onclick="javascript:show();return false;">看不清,換一張!</a>-----return false;很重要啊
- package com.zou.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.servlet.ServletException;
- import javax.servlet.http.HttpServlet;
- import javax.servlet.http.HttpServletRequest;
- import javax.servlet.http.HttpServletResponse;
- //import javax.servlet.http.HttpSession;
- import com.sun.image.codec.jpeg.JPEGCodec;
- import com.sun.image.codec.jpeg.JPEGImageEncoder;
- @SuppressWarnings("serial")
- public class CodeServlet extends HttpServlet {
- /**
- * 產生驗證碼圖片
- */
- public void doGet(HttpServletRequest request, HttpServletResponse response)
- throws ServletException, IOException {
- response.setContentType("image/jpeg");
- response.setHeader("Cache-Control", "no-cache");
- response.setHeader("Pragma", "No-cache");
- response.setDateHeader("Expires", 0L);
- //HttpSession session = request.getSession(true);
- int width = 80;
- int height = 30;
- BufferedImage image = new BufferedImage(width, height, 1);
- Graphics g = image.getGraphics();
- Random random = new Random();
- g.setColor(getRandColor(200, 250));
- g.fillRect(0, 0, width, height);
- g.setFont(new Font("Arial", 0, 25));
- g.setColor(getRandColor(160, 200));
- for (int i = 0; i < 155; i++) {
- int x = random.nextInt(width + 100);
- int y = random.nextInt(height + 100);
- int xl = random.nextInt(10);
- int yl = random.nextInt(12);
- g.drawOval(x, y, x + xl, y + yl);
- }
- String code = request.getParameter("code");
- //System.out.println(code);
- String sRand=code;
- for (int i = 0; i < sRand.length(); i++) {
- //String rand = getRandChar(random.nextInt(36));
- String rand = sRand.substring(i, i+1);
- //sRand = sRand + rand;
- g.setColor(new Color(20 + random.nextInt(110), 20 + random
- .nextInt(110), 20 + random.nextInt(110)));
- g.drawString(rand, 14 * i + 5, 25);
- }
- //session.setAttribute("rand", sRand);
- //request.setAttribute("rand", sRand);
- g.dispose();
- javax.servlet.ServletOutputStream imageOut = response.getOutputStream();
- JPEGImageEncoder encoder = JPEGCodec.createJPEGEncoder(imageOut);
- encoder.encode(image);
- }
- private Color getRandColor(int fc, int bc) {
- Random random = new Random();
- if (fc > 255)
- fc = 255;
- if (bc > 255)
- bc = 255;
- int r = fc + random.nextInt(bc - fc);
- int g = fc + random.nextInt(bc - fc);
- int b = fc + random.nextInt(bc - fc);
- return new Color(r, g, b);
- }
- /* private String getRandChar(int randNumber) {
- return CHARARRAY[randNumber];
- }*/
- //private static final String CONTENT_TYPE = "image/jpeg";
- /* private static final String CHARARRAY[] = { "0", "1", "2", "3", "4", "5",
- "6", "7", "8", "9", "a", "b", "c", "d", "e", "f", "g", "h", "i",
- "j", "k", "l", "m", "n", "o", "p", "q", "r", "s", "t", "u", "v",
- "w", "x", "y", "z" };*/
- }
web.xml
- <?xml version="1.0" encoding="UTF-8"?>
- <web-app version="2.5"
- xmlns="http://java.sun.com/xml/ns/javaee"
- xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
- xsi:schemaLocation="http://java.sun.com/xml/ns/javaee
- http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd">
- <welcome-file-list>
- <welcome-file>index.jsp</welcome-file>
- </welcome-file-list>
- <servlet>
- <servlet-name>code</servlet-name>
- <servlet-class>com.zou.servlet.CodeServlet</servlet-class>
- </servlet>
- <servlet-mapping>
- <servlet-name>code</servlet-name>
- <url-pattern>/codeServlet</url-pattern>
- </servlet-mapping>
- </web-app>
index.jsp
- <%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
- <html>
- <head>
- <title>驗證碼測試</title>
- <mce:script language="javascript" type="text/javascript"><!--
- var code ; //在全局 定義驗證碼
- function createCode()
- {
- code = "";
- var codeLength = 5;//驗證碼的長度
- //所有候選組成驗證碼的字符,可以用中文
- var selectChar = new Array(0,1,2,3,4,5,6,7,8,9,'A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R','S','T','U','V','W','X','Y','Z','a','b','c','d','e','f','g','h','i','j','k','l','m','n','o','p','q','r','s','t','u','v','w','x','y','z');
- for(var i=0;i<codeLength;i++)
- {
- var charIndex = Math.floor(Math.random()*60);
- code +=selectChar[charIndex];
- }
- return code;
- }
- function validate ()
- {
- var inputCode = document.getElementById("vcode").value.toLowerCase();
- if(inputCode.length <=0)
- {
- alert("請輸入驗證碼!");
- return false;
- }
- else if(inputCode != code.toLowerCase())
- {
- alert("驗證碼輸入錯誤!");
- show();//刷新驗證碼
- return false;
- }
- else
- {
- alert("^-^ OK");
- return true;
- }
- }
- function show(){
- //顯示驗證碼
- document.getElementById("code").src="codeServlet?code="+createCode();
- }
- window.onload = function() {//document.onload=show();
- show();//頁面加載時加載驗證碼
- //這時無論在ie還是在firefox中,js沒有加載完,頁面的東西是不會被執行的;
- }
- // --></mce:script>
- </head>
- <body>
- <form onsubmit="return validate();" action="" method="post">
- <h3>jsp+js+servlet實現驗證碼</h3><br/>
- 用戶名:<input type="text" name=""/><br/>
- 請輸入驗證碼:
- <input type="text" id="vcode" style="width: 60;" maxLength="5" />
- <img src="" id="code"/>
- <a href="#" mce_href="#"
- onclick="javascript:show();return false;">看不清,換一張!</a>
- <br/>
- <input type="submit"/>
- </form>
- </body>
- </html>
全站熱搜
留言列表