|
kaptcha是一个简单好用的验证码生成工具通过配置可以自己定义验证码大小颜色显示的字符等等 下载kaptcha 新建一个Web项目并将下载压缩包中的kaptchajar放在项目的WEBINF/lib目录下 配置webxml文件 <?xml version= encoding=UTF?><webapp version= xmlns= xmlns:xsi=instance xsi:schemaLocation= app__xsd> <displayname></displayname> <! kaptcha验证码配置 > <servlet> <! 生成图片的Servlet > <servletname>Kaptcha</servletname> <servletclass>dekaptchaservletKaptchaServlet</servletclass> <! 是否有边框> <initparam> <paramname>kaptchaborder</paramname> <paramvalue>no</paramvalue> </initparam> <! 字体颜色 > <initparam> <paramname>kaptchatlor</paramname> <paramvalue>red</paramvalue> </initparam> <! 图片宽度 > <initparam> <paramname>kaptchaimagewidth</paramname> <paramvalue></paramvalue> </initparam> <! 使用哪些字符生成验证码 > <initparam> <paramname>kaptchatextproducercharstring</paramname> <paramvalue>ACDEFHKPRSTWX</paramvalue> </initparam> <! 图片高度 > <initparam> <paramname>kaptchaimageheight</paramname> <paramvalue></paramvalue> </initparam> <! 字体大小 > <initparam> <paramname>kaptchatextproducerfontsize</paramname> <paramvalue></paramvalue> </initparam> <! 干扰线的颜色 > <initparam> <paramname>lor</paramname> <paramvalue>black</paramvalue> </initparam> <! 字符个数 > <initparam> <paramname>kaptchatextproducercharlength</paramname> <paramvalue></paramvalue> </initparam> <! 使用哪些字体 > <initparam> <paramname>kaptchatextproducerfontnames</paramname> <paramvalue>Arial</paramvalue> </initparam> </servlet> <! 映射的url > <servletmapping> <servletname>Kaptcha</servletname> <urlpattern>/Kaptchajpg</urlpattern> </servletmapping> <welcomefilelist> <welcomefile>indexjsp</welcomefile> </welcomefilelist></webapp> 显示验证码的页面indexjsp <%@ page language=java contentType=text/html; charset=UTF pageEncoding=UTF%><!DOCTYPE html PUBLIC //WC//DTD HTML Transitional//EN ><html><head><meta httpequiv=ContentType content=text/html; charset=UTF><title>验证码</title><script type=text/javascript> //点击切换验证码 function changeVerifyCode（img）{ imgsrc = Kaptchajpg?+Mathfloor（Mathrandom（）*） }</script></head><body> <p> <form action=resultjsp> <table> <tr> <td> </td> <td> <img src=Kaptchajpg onclick=changeVerifyCode（this） style=cursor: pointer;> </td> </tr> <tr> <td> 请输入验证码 </td> <td> <input type=text name=verifyCode> </td> </tr> <tr> <td> </td> <td> <input type=submit value=提交> </td> </tr> </table> </form> </body></html> 运行项目显示结果 最后加上异步验证看输入的验证码是否正确 ）增加一个验证的Servlet package cnluxhservlet;import javaioIOException;import javaioPrintWriter;import javaxservletServletException;import javaxservlethttpHttpServlet;import javaxservlethttpHttpServletRequest;import javaxservlethttpHttpServletResponse;public class VerifyServlet extends HttpServlet { public void doGet（HttpServletRequest request HttpServletResponse response） throws ServletException IOException { responsesetContentType（text/html;charaset=utf） responsesetHeader（pragma nocache） responsesetHeader（cachecontrol nocache） PrintWriter out = null; try { //响应数据 String resultData; //获取传过来的验证码 String verifyCode = requestgetParameter（verifyCode） Systemoutprintln（verifyCode+verifyCode） if（verifyCode==） { resultData = N; }else { //获取kaptcha生成存放在session中的验证码 String kaptchaValue = （String） requestgetSession（）getAttribute（dekaptchaConstantsKAPTCHA_SESSION_KEY） //比较输入的验证码和实际生成的验证码是否相同 if（kaptchaValue = null || kaptchaValue =||!verifyCodeequalsIgnoreCase（kaptchaValue）） { resultData = N; }else { resultData = Y; } } out = responsegetWriter（） outwrite（resultData） outflush（） }catch（Exception e） { eprintStackTrace（） }finally { if（out != null） { outclose（） } } } } ）在webxml中添加这个Servlet的配置 <! 检查验证码是否输入正确 > <servlet> <servletname>VerifyServlet</servletname> <servletclass>cnluxhservletVerifyServlet</servletclass> </servlet> <servletmapping> <servletname>VerifyServlet</servletname> <urlpattern>/VerifyServlet</urlpattern> </servletmapping> ）页面indexjsp <%@ page language=java contentType=text/html; charset=UTF pageEncoding=UTF%><!DOCTYPE html PUBLIC //WC//DTD HTML Transitional//EN ><html><head><meta httpequiv=ContentType content=text/html; charset=UTF><title>验证码</title><script type=text/javascript src=${pagntextPath}/jqueryminjs></script><script type=text/javascript> //点击切换验证码 function changeVerifyCode（img）{ imgsrc = Kaptchajpg?+Mathfloor（Mathrandom（）*） } //提交 function doSubmit（） { var verifyCodeValue = $（#verifyCode）val（） if（verifyCodeValuereplace（/\s/g） == ） { alert（请输入验证码） }else { //提交前先异步检查验证码是否输入正确 var = ${pagntextPath}/VerifyServlet?verifyCode=+verifyCodeValue; $ajax（{ type:GET url: success:function（returnData）{ if（returnData!=Y） { alert（请输入正确的验证码！） }else { //验证码正确进行提交操作 //…… } } error:function（e）{ alert（e） } }） } }</script></head><body> <p> <form action=resultjsp> <table> <tr> <td> </td> <td> <img src=Kaptchajpg onclick=changeVerifyCode（this） style=cursor: pointer;> </td> </tr> <tr> <td> 请输入验证码 </td> <td> <input type=text name=verifyCode id=verifyCode> </td> </tr> <tr> <td> </td> <td> <input type=button value=提交 onclick=doSubmit（）> </td> </tr> </table> </form> </body></html> ）运行结果 |
