页面验证码

最新推荐文章于 2023-12-09 16:01:06 发布

yifeixiang

最新推荐文章于 2023-12-09 16:01:06 发布

阅读量117

点赞数

分类专栏： J2EE 文章标签： Servlet JavaScript JSP Web C# ViewUI

J2EE 专栏收录该内容

45 篇文章 0 订阅

订阅专栏


<tr>
 <td  align="right">验证码：</td>
 <td>
 <table style="margin:0px" border="0" cellpadding="0" cellspacing="0">
  <tr>
   <td>
     <input type="text" id="confirmcode" onkeydown="go_der(this);" style="width:40px;" maxlength="4" name="confirmcode"  onfocus="document.getElementById('confimg').style.visibility='visible';document.getElementById('reflushid').style.visibility='visible'" /></td>
   <td valign="bottom" id="confimg" style="padding-left:10px;padding-right:10px;visibility:hidden" align="right">	<script>document.write("<img height='20' style='margin:1px'  src='<%=request.getContextPath()%>/servlet/ConfirmCodeImgServlet'>")</script></td>
   <td align="left"  id="reflushid"   style="visibility:hidden">
	<a href="#" onclick="changeImg()" style="CURSOR: hand;COLOR:Blue;  TEXT-DECORATION: none;TEXT-DECORATION: underline">看不清</a></td>
    </tr>
   </table>
  </td>
</tr>
<tr>
 <td colspan="2">
  <!--  input type="button" style="cursor:hand" class="Btn2" id="login"  onclick="check_data()">-->
   <table align="center"><tr><td>
   <table border="0" cellpadding="0" cellspacing="0" >
     <tr>
      <td >
       <img src="<%=request.getContextPath()%>/img/spacer.png" width="4" height="22" /></td>
      <td >
       <input  type="button" id="login" class="Btn2" value="登录" onclick="check_data()"/></td>
       <td>
         <img src="<%=request.getContextPath()%>/img/spacer.png" width="4" height="22" /></td>
      </tr>
    </table>
   </td>
    <td><input type="button" value="取消" class="Btn2" onClick="window.close();">
<!-- img onClick="window.close();"   src="<%=request.getContextPath()%>/img/quxiao.jpg" /> -->
</td></tr></table></td></tr>


<script type="text/javascript">
function  changeImg()
       {
        var img = document.getElementById("confimg");
        document.getElementById("confirmcode").value="";
        img.innerHTML="<img height='20' style='margin:1px' src='<%=request.getContextPath()%>/servlet/ConfirmCodeImgServlet'>";
      }
function check_data()
	{
	    /*
	    if(!englishandnumberonly(document.loginForm.username))
	    {
	    document.loginForm.username.focus();
	    alert("登录名只能是英文、数字和下划线！");
     	return false;
     	}
     	*/

	    if(!isnumberonly(document.loginForm.confirmcode))
	    {
	    document.loginForm.confirmcode.focus();
	    alert("验证码只能是数字！");
     	return false;
     	}else{
     	if(document.loginForm.confirmcode.value.length!=4){
     	document.loginForm.confirmcode.focus();
	    alert("验证码必须为四位有效数字！");
     	return false;
     	}
     	}

		var username=document.loginForm.username.value;
        var password=document.loginForm.password.value;
        var confirmcode=document.loginForm.confirmcode.value;
        if((username=="")||(password=="")||(confirmcode==""))
        {
            alert("用户名、密码及验证码都不能为空！");
            document.loginForm.username.focus();
            return false;
         }else{
         if(window.name!="<%=ActionGlobalDefine.mainframe%>"){
	        window.opener = null;
	        window.open("",'<%=ActionGlobalDefine.mainframe%>','height=730,width=1020,top=0,left=0,toolbar=no,menubar=no,scrollbars=yes, resizable=no,location=no, status=yes');
            window.open("<%=request.getContextPath()%>/login.jsp",'_self','height=730,width=1020,top=0,left=0,toolbar=no,menubar=no,scrollbars=yes, resizable=no,location=no, status=yes');
            window.close();
               }
                document.loginForm.password.value=hex_md5(password);
     	        document.loginForm.submit();
     	  }
    }
</script>


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;

import com.lct.trans.dao.MyLog;

public class ConfirmCodeImgServlet extends HttpServlet {

	/**
	 * 
	 */
	private static final long serialVersionUID = 1L;

	/**
	 * 
	 */

	public void init() throws ServletException {
		System.out
				.println("*****  confirmCodeImageServlet  init  is  ok  !!! ******");
	}

	public void doPost(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		doGet(request, response);
	}

	public void doGet(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		MyLog.getlog().info("****   confirmcodeImage   doget  ");
		int iWidth = 55, iHeight = 18;
		BufferedImage image = new BufferedImage(iWidth, iHeight,
				BufferedImage.TYPE_INT_RGB);
		Graphics g = image.getGraphics();
		g.setColor(Color.white);
		g.fillRect(0, 0, iWidth, iHeight);
		g.setColor(Color.black);
		g.drawRect(0, 0, iWidth - 1, iHeight - 1);
		String rand = new Integer((int) (Math.random() * 10000)).toString();
		switch (rand.length()) {
		case 1:
			rand = "000" + rand;
			break;
		case 2:
			rand = "00" + rand;
			break;
		case 3:
			rand = "0" + rand;
			break;
		default:
			rand = rand.substring(0, 4);
			break;
		}
		request.getSession().setAttribute("realcode", rand);
		g.setColor(Color.black);
		g.setFont(new Font("Times New Roman", Font.PLAIN, 18));
		g.drawString(rand, 10, 15);
		Random random = new Random();
		for (int iIndex = 0; iIndex < 88; iIndex++) {
			int x = random.nextInt(iWidth);
			int y = random.nextInt(iHeight);
			g.drawLine(x, y, x, y);
		}
		g.dispose();
		ImageIO.write(image, "JPEG", response.getOutputStream());
	}

}

另一种页面验证
在web.xml


 <servlet>
  <description>登陆图片验证</description>
  <servlet-name>authimg</servlet-name>
  <servlet-class>com...servlet.AuthImg</servlet-class>
 </servlet>

 <servlet-mapping>
  <servlet-name>authimg</servlet-name>
  <url-pattern>/authimg.gif</url-pattern>
 </servlet-mapping>


import javax.servlet.*;
import javax.servlet.http.*;
import java.io.*;
import java.util.*;

import com.sun.image.codec.jpeg.*;
import java.awt.*;
import java.awt.image.*;
import org.apache.commons.lang.*;
//import org.springframework.web.context.WebApplicationContext;
//import org.springframework.web.context.support.WebApplicationContextUtils;

public class AuthImg extends HttpServlet {
	/**
	 *
	 */
	private static final long serialVersionUID = -7099312208878086233L;

	//private static final String CONTENT_TYPE = "text/html; charset=UTF-8";

	private Font mFont = new Font("Times New Roman", Font.BOLD, 20);

	// Initialize global variables
	public void init() throws ServletException {
	}

	// Process the HTTP Get request
	public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		response.setContentType("image/jpeg");
		ServletOutputStream out = response.getOutputStream();

		int width = 60, height = 20;
		BufferedImage image = new BufferedImage(width, height, BufferedImage.TYPE_INT_RGB);

		Graphics g = image.getGraphics();
		Random random = new Random();

		g.setColor(getRandColor(250, 255));
		g.fillRect(0, 0, width, height);

		g.setFont(mFont);

		g.setColor(getRandColor(240, 250));
		for (int i = 0; i < 155; i++) {
			int x = random.nextInt(width);
			int y = random.nextInt(height);
			int xl = random.nextInt(12);
			int yl = random.nextInt(12);
			g.drawLine(x, y, x + xl, y + yl);
		}

		String rand = RandomStringUtils.randomNumeric(4);
		char c;
		for (int i = 0; i < 4; i++) {
			c = rand.charAt(i);
			g.setColor(new Color(20 + random.nextInt(110), 20 + random.nextInt(110), 20 + random.nextInt(110))); // 调用函数出来的颜色相同，可能是因为种子太接近，所以只能直接生成
			g.drawString(String.valueOf(c), 13 * i + 6, 16);
		}

        //放入Session，解决Cookie出错的问题
        HttpSession seesion = request.getSession();
		seesion.setAttribute("authCode", rand);

//		WebApplicationContext wc = WebApplicationContextUtils.getWebApplicationContext(this.getServletContext());
//		SysConfig sysConfig = (SysConfig) wc.getBean("sysConfig");
//		UserCookie uc = new UserCookie(request, response, sysConfig);
//		uc.addAuthCode(rand);

		JPEGImageEncoder encoder = JPEGCodec.createJPEGEncoder(out);
		encoder.encode(image);
		out.close();
	}

	// Process the HTTP Post request
	public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		doGet(request, response);
	}

	// Clean up resources
	public void destroy() {
	}

	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);
	}

}


<%
String path = request.getContextPath();
%>

<tr>
                <td height="24" valign="bottom"><div align="right"><span class="STYLE3">验证码</span></div></td>
                <td width="10" valign="bottom"> </td>
                <td width="52" height="24" valign="bottom"><input type="text" name="loginForm.authcode" id="authcode" size="5" maxlength="4" onfocus="javascript:showimage();" style="width:50px; height:17px; background-color:#87adbf; border:solid 1px #153966; font-size:12px; color:#283439; "></td>
                <td width="62" valign="bottom"><div align="left"><img id="auimg" style="cursor:pointer;display: none" onclick="javascript:loadimage();" width="38" height="17"></div></td>
              </tr>


function loadimage(){
        document.getElementById("auimg").src="<%=path%>/authimg.gif?"+Math.random();
    }
    function showimage(){
    	var _auimg = document.getElementById("auimg");
    	if(_auimg.style.display == 'none'){
    		_auimg.src="<%=path%>/authimg.gif?"+Math.random();
    		_auimg.style.display = '';
    	}
    }