客户端验证码实例

注册页 

 <%@ page contentType="text/html; charset=UTF-8"%> <%@ taglib uri="/WEB-INF/struts-logic.tld" prefix="logic"%> <%@ taglib uri="/WEB-INF/struts-template.tld" prefix="template"%> <%@ taglib uri="/WEB-INF/struts-bean.tld" prefix="bean"%> <%@ taglib uri="/WEB-INF/struts-html.tld" prefix="html"%> <%@ taglib uri="/WEB-INF/struts-tiles.tld" prefix="tiles"%> <%@ taglib uri="/WEB-INF/fulong.tld" prefix="fulong"%> <tiles:insert definition="Framework"> <tiles:put name="title">用户注册</tiles:put> <tiles:put name="content"> <table width="650" border="0" align="center" cellpadding="0" cellspacing="0" style="margin-top: 10px;" mce_style="margin-top: 10px;"> <tr> <td colspan="3" align="center"><img src="images/userregister.gif" width="650" height="29" alt=""></td> </tr> </table> <table width="650" border="0" align="center" cellpadding="3" cellspacing="4" bgcolor="f0f0f0" style="margin-bottom: 10px;" mce_style="margin-bottom: 10px;"> <tr> <td bgcolor="f0f0f0"> <table width="100%" border="0" cellpadding="2" cellspacing="0" bgcolor="f0f0f0"> <tr> <td height=30 colspan="3" align="center"><span class="title">用户注册</span> </td> </tr> <tr> <td width="14%"></td> <td width="28%"></td> <td width="58%"></td> </tr> <tr> <td> </td> <td colspan="2"><font color="red"><html:errors /></font></td> </tr> <html:javascript formName="register1Form" /> <html:form action="/register1.do" focus="username" method="post" onsubmit="return validateRegister1Form(this);" style="margin:0px;" mce_style="margin:0px;"> <input type="hidden" name="fromURL" value="<%=request.getParameter("fromURL")%>"> <tr> <td align="right" bgcolor="#f0f0f0"><strong>用 户  名</strong></td> <td><input type="text" name="username" size="30"></td> <td><span class="comment">用户名应该由a-z的英文字母(不区分大小写)、0-9的数字组成，长度在3-16个字符之间。</span></td> </tr> <tr> <td align="right"><strong>密码</strong></td> <td><input type="password" name="password" value="<bean:write name='password' ignore='true'/>" size="32"> </td> <td><span class="comment">密码可使用长度大于3个的任何字符</span></td> </tr> <tr bgcolor="#f0f0f0"> <td align="right"><strong>确认密码</strong></td> <td bgcolor="#f0f0f0"><input type="password" name="confirm" size="32"></td> <td bgcolor="#f0f0f0"><span class="comment">请再输入一次密码</span></td> </tr> <tr bgcolor="#f0f0f0"> <td><img id="authCodeImage" border=0 src="/checkcode/authCodeImage.jsp">   <span onclick="changeImage();" style="cursor: hand"><font id="authCodeChangeImagetext" color="blue">换一张</font></span>  <br> <input type="text" id="authCodeInputCheck" value=""><br> <span style="display: none" mce_style="display: none" id="authCodeInfo"></span></td> </td> </tr> <tr bgcolor="#f0f0f0"> <td align="right"><b>用户协议</b></td> <td colspan=2> <div style="height: 200; border: 2px groove #f0f0f0"><iframe src="<html:rewrite page='/include/contract.jsp'/>" MARGINHEIGHT="1" MARGINWIDTH="1" width="99%" height="99%" scrolling="yes" frameborder="1"> </iframe></div> </td> </tr> <tr> <td></td> <td height="30" colspan="2"><input type="submit" value="我同意协议的内容，注册成为中小企业河北网会员" onclick="return check(this.form);"></td> </tr> <tr> <td></td> <td height="30" colspan="2"> </td> </tr> </html:form> </table> </td> </tr> </table> </tiles:put> </tiles:insert> <mce:script language="javascript"><!-- function check(form) { if(form.password.value!=form.confirm.value) { alert("您输入的密码和确认密码不一致，请重新输入。"); return false; } } // --></mce:script> <mce:script language="Javascript" type="text/Javascript"><!-- var checkcodepassed = "false"; //实际应用时可通过该变量来判断验证码是否输入正确，false为输入错误，true为输入正确 function changeImage() { document.getElementById("authCodeImage").src = "/checkcode/authCodeImage.jsp?date="+(new Date()); } String.prototype.Trim = function() { return this.replace(/(^/s*)|(/s*$)/g, ""); } function checkit() { var req = null; try{ req = new XMLHttpRequest(); }catch(error){ try{ req = new ActiveXObject("Microsoft.XMLHTTP"); }catch(error){return false;} } //设置回调处理函数 var url = '<html:rewrite page="/checkcode/authCodeReturn.jsp"/>?date='+(new Date()); //发送请求的路径 req.open("GET",url,false); //打开连接 req.send(null); //发送请求 var latestcode = req.responseText; latestcode = latestcode.Trim(); var inputcode = document.getElementById("authCodeInputCheck").value; inputcode = inputcode.Trim(); if(latestcode != inputcode) { checkcodepassed = "false"; alert("验证码输入不正确，请重新输入！"); return false; }else{ checkcodepassed = "true"; return true; } } // --></mce:script>

产生随即数字验证码

<%@ page contentType="image/jpeg;charset=utf-8" pageEncoding="utf-8" import="java.awt.*,java.awt.image.*,java.util.*,javax.imageio.*" %> <%! 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); } %> <% //设置页面不缓存 response.setHeader("Pragma","No-cache"); response.setHeader("Cache-Control","no-cache"); response.setDateHeader("Expires", 0); // 在内存中创建图象 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(200,250)); g.fillRect(0, 0, width, height); //设定字体 g.setFont(new Font("Times New Roman",Font.PLAIN,18)); //画边框 //g.setColor(new Color()); //g.drawRect(0,0,width-1,height-1); // 随机产生155条干扰线，使图象中的认证码不易被其它程序探测到 g.setColor(getRandColor(160,200)); 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); } // 取随机产生的认证码(4位数字) String sRand=""; for (int i=0;i<4;i++){ String rand=String.valueOf(random.nextInt(10)); sRand+=rand; // 将认证码显示到图象中 g.setColor(new Color(20+random.nextInt(110),20+random.nextInt(110),20+random.nextInt(110))); //调用函数出来的颜色相同，可能是因为种子太接近，所以只能直接生成 g.drawString(rand,13*i+6,16); } // 将认证码存入SESSION session.setAttribute("rand",sRand); // 图象生效 g.dispose(); // 输出图象到页面 ImageIO.write(image, "JPEG", response.getOutputStream()); %>

回调页面

<%@ page contentType="text/html;charset=utf-8" %> <%=(String)session.getAttribute("rand")%>

页面表单

<%@ page contentType="text/html;charset=utf-8" %> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>认证码输入页面</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <META HTTP-EQUIV="Pragma" CONTENT="no-cache"> <META HTTP-EQUIV="Cache-Control" CONTENT="no-cache"> <META HTTP-EQUIV="Expires" CONTENT="0"> </head> <body> <img id="authCodeImage" border=0 src="/passport/checkcode/authCodeImage.jsp" mce_src="passport/checkcode/authCodeImage.jsp"> <span onclick="changeImage();" style="cursor:hand" mce_style="cursor:hand"><font id="authCodeChangeImagetext" color="blue">看不清？换一张</font></span> <br> <font id="authCodePleaseText">请输入以上认证码：</font> <br> <input type="text" id="authCodeInputCheck" value="" onblur="checkit()">   <span id="authCodeInfo"></span> <mce:script type="text/javascript"><!-- var checkcodepassed = "false"; //实际应用时可通过该变量来判断验证码是否输入正确，false为输入错误，true为输入正确 function changeImage() { document.getElementById("authCodeImage").src = "/passport/checkcode/authCodeImage.jsp?date="+(new Date()); } String.prototype.Trim = function() { return this.replace(/(^/s*)|(/s*$)/g, ""); } function checkit() { var req = null; try{ req = new XMLHttpRequest(); }catch(error){ try{ req = new ActiveXObject("Microsoft.XMLHTTP"); }catch(error){return false;} } req.onreadystatechange = function ajaxExcute() { if((req.readyState==4)&&(req.status==200)) { var latestcode = req.responseText; latestcode = latestcode.Trim(); var inputcode = document.getElementById("authCodeInputCheck").value; inputcode = inputcode.Trim(); if(latestcode != inputcode) { checkcodepassed = "false"; //alert("验证码输入不正确，请重新输入！"); document.getElementById("authCodeInfo").innerHTML = '<font color="red">验证码输入错误，请重新输入！</font>'; //document.getElementById("codeImage").src = "authCodeImage.jsp?date="+(new Date()); //当输入错误时验证码自动刷新 }else{ checkcodepassed = "true"; document.getElementById("authCodeInfo").innerHTML = '<font color="green">验证码输入正确！</font>'; } } } //设置回调处理函数 var url = "/passport/checkcode/authCodeReturn.jsp?date="+(new Date()); //发送请求的路径 req.open("GET",url); //打开连接 req.send(null); //发送请求 } // --></mce:script> </body> </html>