验证码实现方式总结

最新推荐文章于 2024-06-28 17:29:14 发布

zsw2zkl

最新推荐文章于 2024-06-28 17:29:14 发布

阅读量649

点赞数

分类专栏： java 文章标签： html servlet input button tomcat image

java 专栏收录该内容

24 篇文章 0 订阅

订阅专栏

验证码实现方式：

一.js实现验证码：

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

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

[html]view plaincopy 
   
 <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文件，内容为：

[html]view plaincopy 
   
 .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文件，内容为：

[html]view plaincopy 
   
 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文件，内容为：

[java]view plaincopy 
   
 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文件，内容为：

[html]view plaincopy 
   
 <%@ 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文件中配置代码，内容为：

[html]view plaincopy 
   
 <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,运行结果为：

复制搜索

zsw2zkl

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
验证码实现方式总结

验证码实现方式：一.js实现验证码：第一步：建一个login.htm，一个code.js文件，一个code.css文件，准备一张图片code.jpg第二步：编写login.htm文件，内容为：[html] view plaincopyhtml> head> scr
复制链接

扫一扫