kaptcha验证码组件使用简介

Kaptcha是一个基于SimpleCaptcha的验证码开源项目。
官网地址:http://code.google.com/p/kaptcha/
一、简单的jsp-servlet项目

1.添加jar包依赖

如果你使用maven来统一管理jar包,则在工程的pom.xml中添加dependency
Xml代码 收藏代码

<!-- kaptcha -->  
<dependency>  
    <groupId>com.google.code.kaptcha</groupId>  
    <artifactId>kaptcha</artifactId>  
    <version>2.3.2</version>  
</dependency>  

如果是非maven管理的项目,则直接在官网下载kaptcha的jar包,然后添加到项目lib库中,下载地址:http://code.google.com/p/kaptcha/downloads/list

2.配置web.xml

上面说了,kaptcha都是在web.xml中配置,我们必须在web.xml中配置kaptcha的servlet,具体如下:
Xml代码 收藏代码

<servlet>  
    <servlet-name>Kaptcha</servlet-name>  
    <servlet-class>com.google.code.kaptcha.servlet.KaptchaServlet</servlet-class>  
</servlet>  
<servlet-mapping>  
    <servlet-name>Kaptcha</servlet-name>  
    <url-pattern>/kaptcha.jpg</url-pattern>  
</servlet-mapping>  

其中servlet的url-pattern可以自定义。

kaptcha所有的参数都有默认的配置,如果我们不显示配置的话,会采取默认的配置。

如果要显示配置kaptcha,在配置kaptcha对应的Servlet时,在init-param增加响应的参数配置即可。示例如下:
Xml代码 收藏代码

<servlet>  
    <servlet-name>Kaptcha</servlet-name>  
    <servlet-class>com.google.code.kaptcha.servlet.KaptchaServlet</servlet-class>  
    <init-param>  
        <param-name>kaptcha.image.width</param-name>  
        <param-value>200</param-value>  
        <description>Width in pixels of the kaptcha image.</description>  
    </init-param>  
    <init-param>  
        <param-name>kaptcha.image.height</param-name>  
        <param-value>50</param-value>  
        <description>Height in pixels of the kaptcha image.</description>  
    </init-param>  
    <init-param>  
        <param-name>kaptcha.textproducer.char.length</param-name>  
        <param-value>4</param-value>  
        <description>The number of characters to display.</description>  
    </init-param>  
    <init-param>  
        <param-name>kaptcha.noise.impl</param-name>  
        <param-value>com.google.code.kaptcha.impl.NoNoise</param-value>  
        <description>The noise producer.</description>  
    </init-param>  
</servlet>  

具体的配置参数参见:http://code.google.com/p/kaptcha/wiki/ConfigParameters

3.页面调用
Html代码 收藏代码

<form action="submit.action">  
    <input type="text" name="kaptcha" value="" /><img src="kaptcha.jpg" />  
</form>  

4.在submit的action方法中进行验证码校验
Java代码 收藏代码

//从session中取出servlet生成的验证码text值  
String kaptchaExpected = (String)request.getSession().getAttribute(com.google.code.kaptcha.Constants.KAPTCHA_SESSION_KEY);  
//获取用户页面输入的验证码  
String kaptchaReceived = request.getParameter("kaptcha");  
//校验验证码是否正确  
if (kaptchaReceived == null || !kaptchaReceived.equalsIgnoreCase(kaptchaExpected)){  
    setError("kaptcha", "Invalid validation code.");  
}  

注:确保JDK设置了 -Djava.awt.headless=true

5.实现页面验证码刷新
Html代码 收藏代码

<img src="kaptcha.jpg" width="200" id="kaptchaImage" title="看不清,点击换一张" />  
<script type="text/javascript">  
    $(function() {  
        $('#kaptchaImage').click(function() {$(this).attr('src','kaptcha.jpg?' + Math.floor(Math.random() * 100));});  
    });  
</script>  
<br /><small>看不清,点击换一张</small>  

注:为了避免浏览器的缓存,可以在验证码请求url后添加随机数或者日期

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值