验证码实现方式总结

最新推荐文章于 2023-12-28 14:04:20 发布

iteye_15898

最新推荐文章于 2023-12-28 14:04:20 发布

阅读量211

点赞数

文章标签： java javascript web.xml ViewUI

验证码实现方式：

一.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 οnlοad="createCode();">
<form>
 <center>验证码：<input type="text" id="input1" />
<input type="text" id="checkCode" class="code" style="width: 55px" /> <a href="#" οnclick="createCode()">看不清楚</a>
<input id="Button1" οnclick="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,运行结果为：