验证码实现方式总结

来源：互联网发布：怎么用nvidia优化吃鸡编辑：程序博客网时间：2024/05/17 07:29

验证码实现方式：

一.js实现验证码：

第一步：建一个login.htm，一个code.js文件，一个code.css文件，准备一张图片code.jpg

第二步：编写login.htm文件，内容为：

<html><head><script language = "javascript" src = "code.js"></script><link rel="stylesheet" type="text/css" href="code.css"></head><body onload="createCode();"><form> <center>验证码：<input type="text" id="input1" /><input type="text" id="checkCode" class="code" style="width: 55px" /> <a href="#" onclick="createCode()">看不清楚</a><input id="Button1" onclick="validate();" type="button" value="确定" /></center></form></body></html>

第三步：编写code.css文件，内容为：

.code{background-image:url(code.jpg);font-family:Arial;font-style:italic;color:Red;border:0;padding:2px 3px;letter-spacing:3px;font-weight:bolder;}

第四步：编写code.js文件，内容为：

var code ; //在全局 定义验证码function createCode(){ code = "";var codeLength = 4;//验证码的长度var checkCode = document.getElementById("checkCode");checkCode.value = "";var selectChar = new Array(2,3,4,5,6,7,8,9,'A','B','C','D','E','F','G','H','J','K','L','M','N','P','Q','R','S','T','U','V','W','X','Y','Z');for(var i=0;i<codeLength;i++) {   var charIndex = Math.floor(Math.random()*32);   code +=selectChar[charIndex];}if(code.length != codeLength){   createCode();}checkCode.value = code;}function validate () {var inputCode = document.getElementById("input1").value.toUpperCase();if(inputCode.length <=0) {   alert("请输入验证码！");   return false;}else if(inputCode != code ){   alert("验证码输入错误！");   createCode();   return false;}else {   alert("OK");   return true;}}

第五步：把四个文件放到一个文件夹中，运行login.htm文件，显示结果为：

二.servlet实现验证码：

第一步：建一个动态工程check,一个check.java(servlet类)，一个login.jsp文件

第二步：编写check.java文件，内容为：

package check;import javax.servlet.ServletException;import javax.servlet.http.*;import java.io.*;import java.awt.*;import java.awt.image.*;import java.util.*;import javax.imageio.*; /** * @author  yeeku.H.lee kongyeeku@163.com * @version  1.0 * <br>Copyright (C), 2005-2008, yeeku.H.Lee * <br>This program is protected by copyright laws. * <br>Program Name: * <br>Date:  */public class check extends HttpServlet{    private Font mFont = new Font("Arial Black", Font.PLAIN, 16);    public void init() throws ServletException    {        super.init();    }    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);    }    public void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException    {        response.setHeader("Pragma","No-cache");        response.setHeader("Cache-Control","no-cache");        response.setDateHeader("Expires", 0);        response.setContentType("image/jpeg");                int width=100, height=18;        BufferedImage image = new BufferedImage(width, height, BufferedImage.TYPE_INT_RGB);                Graphics g = image.getGraphics();        Random random = new Random();        g.setColor(getRandColor(200,250));        g.fillRect(1, 1, width-1, height-1);        g.setColor(new Color(102,102,102));        g.drawRect(0, 0, width-1, height-1);        g.setFont(mFont);        g.setColor(getRandColor(160,200));        for (int i=0;i<155;i++)        {            int x = random.nextInt(width - 1);            int y = random.nextInt(height - 1);            int xl = random.nextInt(6) + 1;            int yl = random.nextInt(12) + 1;            g.drawLine(x,y,x + xl,y + yl);        }        for (int i = 0;i < 70;i++)        {            int x = random.nextInt(width - 1);            int y = random.nextInt(height - 1);            int xl = random.nextInt(12) + 1;            int yl = random.nextInt(6) + 1;            g.drawLine(x,y,x - xl,y - yl);        }        String sRand="";        for (int i=0;i<6;i++)        {   String tmp = getRandomChar();            sRand += tmp;            g.setColor(new Color(20+random.nextInt(110),20+random.nextInt(110),20+random.nextInt(110)));         g.drawString(tmp,15*i+10,15);        }        HttpSession session = request.getSession(true);        session.setAttribute("rand",sRand);        g.dispose();        ImageIO.write(image, "JPEG", response.getOutputStream());    }    private String getRandomChar()    {  int rand = (int)Math.round(Math.random() * 2);  long itmp = 0;  char ctmp = '\u0000';  switch (rand)  {   case 1:    itmp = Math.round(Math.random() * 25 + 65);    ctmp = (char)itmp;    return String.valueOf(ctmp);   case 2:    itmp = Math.round(Math.random() * 25 + 97);    ctmp = (char)itmp;    return String.valueOf(ctmp);   default :    itmp = Math.round(Math.random() * 9);    return String.valueOf(itmp);  }    }}

第三步：编写login.jsp文件，内容为：

<%@ page language="java" import="java.util.*" pageEncoding="GB18030"%><%String path = request.getContextPath();String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";%><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html>  <head>    <base href="<%=basePath%>">        <title>My JSP 'index.jsp' starting page</title><meta http-equiv="pragma" content="no-cache"><meta http-equiv="cache-control" content="no-cache"><meta http-equiv="expires" content="0">    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"><meta http-equiv="description" content="This is my page"><!--<link rel="stylesheet" type="text/css" href="styles.css">--><script>   function refresh()   {    document.getElementById("authImg").src='check?now=' + new Date();   }  </script>  </head>    <body>  <%     %>    验证码如图：<img src="check" id="authImg"/>看不清？<a href="#" onClick="refresh()">单击此处刷新</a>  </body></html>

第四步：在web.xml文件中配置代码，内容为：

<servlet>        <servlet-name>img</servlet-name>        <servlet-class>check.check</servlet-class>    </servlet>    <servlet-mapping>        <servlet-name>img</servlet-name>     <url-pattern>/check</url-pattern>    </servlet-mapping>

第五步：在tomcat服务器上发布项目check,运行login.jsp,运行结果为：