kaptcha 验证码的使用

碰巧在公司项目中接触到了验证码的使用，就此总结下验证码在Web工程中的使用。kaptcha所有配置都可以通过web.xml来完成，如果项目使用了Spring MVC，那么实现方式会略有不同。

在SSH框架的项目中，如果使用Maven进行项目托管，则需要在pom.xml中添加如下配置，非Maven 项目可以通过引入jar包的方式引入。下载地址：http://code.google.com/p/kaptcha/downloads/list

 <dependency>
  <groupId>com.google.code.kaptcha</groupId>
  <artifactId>kaptcha</artifactId>
  <version>2.3.2</version>
  <classifier>jdk16</classifier>
 </dependency>

接着需要在web.xml中添加如下配置.

<servlet-name>kaptcha</servlet-name>
<servlet-class>com.google.code.kaptcha.servlet.KaptchaServlet</servlet-class>
<servlet-mapping>
                 <servlet-name>kaptcha</servlet-name>
                 <url-pattern>/randomCode.jpg</url-pattern>
</servlet-mapping>
<init-param>
                 <!--是否有边框  默认为true  我们可以自己设置yes，no -->
	<param-name>kaptcha.border</param-name>
	<param-value>yes</param-value> 
</init-param>
<init-param>
                  <!--边框颜色   默认为Color.BLACK-->
	<param-name>kaptcha.border.color</param-name>
	<param-value>white</param-value>
</init-param>
<init-param>
                   <!--边框粗细度  默认为1-->
	<param-name>kaptcha.border.thickness</param-name>
	<param-value>1</param-value>
</init-param>
<init-param>
                  <!--验证码文本字符颜色  默认为Color.BLACK  -->
	<param-name>kaptcha.textproducer.font.color</param-name>
	<param-value>black</param-value>
</init-param>
<init-param>
                   <!--验证码文本字符大小  默认为40 -->
	<param-name>kaptcha.textproducer.font.size</param-name>
	<param-value>60</param-value>
</init-param>
<init-param>
      <!--验证码文本字体样式  默认为new Font("Arial", 1, fontSize), new Font("Courier", 1, fontSize)  -->
	<param-name>kaptcha.textproducer.font.names</param-name>
	<param-value>宋体,楷体,微软雅黑</param-value>
</init-param>
<init-param>
                   
	<param-name>kaptcha.image.width</param-name>
	<param-value>200</param-value>
</init-param>
<init-param>
	<param-name>kaptcha.image.height</param-name>
	<param-value>65</param-value>
</init-param>
<init-param>
	<param-name>kaptcha.textproducer.char.length</param-name>
	<param-value>4</param-value>
</init-param>
<init-param>
	<param-name>kaptcha.textproducer.char.space</param-name>
	<param-value>6</param-value>
</init-param>
<init-param>
	<param-name>kaptcha.background.clear.from</param-name>
	<param-value>white</param-value>
</init-param>
<init-param>
	<param-name>kaptcha.background.clear.to</param-name>
	<param-value>white</param-value>
</init-param>
<init-param>
	<param-name>kaptcha.noise.impl</param-name>
	<param-value></param-value>
</init-param>
<init-param>
	<param-name>kaptcha.textproducer.char.string</param-name>
	<param-value>23456789QWERTYUPASDFGHJKLZXCVBNMqwertyuipasdfghjkzxcvbnm</param-value>
</init-param>
</servlet>

jsp中需要进行如下设置

<script type="text/javascript"> 
$(function(){  //生成验证码         
    $('#kaptchaImage').click(function () {  
    $(this).hide().attr('src', '/code/captcha-image?' + Math.floor(Math.random()*100) ).fadeIn(); });      
});   

window.onbeforeunload = function(){  
    //关闭窗口时自动退出  
    if(event.clientX>360&&event.clientY<0||event.altKey){     
        alert(parent.document.location);  
    }  
};  
  		  
function changeCode() {  //刷新
    $('#kaptchaImage').hide().attr('src', '/code/captcha-image?' + Math.floor(Math.random()*100) ).fadeIn();  
    event.cancelBubble=true;  
}  
</script> 

<div class="form-group">  
   <label>验证码 </label> 
   <input name="j_code" type="text" id="kaptcha" maxlength="4" class="form-control" />
   <br/> 
   <img src="/code/captcha-image" id="kaptchaImage"  style="margin-bottom: -3px"/>       
   <a href="#" onclick="changeCode()">看不清?换一张</a>  
</div

kaptcha 验证码的使用

猜你喜欢