验证码 Kaptcha 的使用（带例子）

效果图：

1.由于这是大神写好封装起来的一个框架，所有我们使用前得先下载相关

的 jar 包。

第一种：maven

<!-- 验证码 -->
<!-- https://mvnrepository.com/artifact/com.github.penggle/kaptcha -->
<dependency>
    <groupId>com.github.penggle</groupId>
    <artifactId>kaptcha</artifactId>
    <version>2.3.2</version>
</dependency>

第二种：lib

打开链接：https://mvnrepository.com/artifact/com.github.penggle/kaptcha

2.配置 web.xml

验证码的一些样式都是通过配置来实现的，下面是我自己使用的一个例

子，如果需要更改字体颜色还有字体大小什么的等，可以自己根据注释

来修改。不然直接复制粘贴也行。由于配置比较简单，不作过多解释，直

接上代码。

<!-- 验证码相关属性的配置 -->
	<servlet>
		<servlet-name>Kaptcha</servlet-name>
		<servlet-class>com.google.code.kaptcha.servlet.KaptchaServlet</servlet-class>
		<!-- 定义 Kaptcha 的样式 -->
		<!-- 是否有边框 -->
		<init-param>
			<param-name>kaptcha.border</param-name>
			<param-value>no</param-value>
		</init-param>
		<!-- 字体颜色 -->
		<init-param>
			<param-name>kaptcha.textproducer.font.color</param-name>
			<param-value>red</param-value>
		</init-param>
		<!-- 图片宽度 -->
		<init-param>
			<param-name>kaptcha.image.width</param-name>
			<param-value>135</param-value>
		</init-param>
		<!-- 图片高度 -->
		<init-param>
			<param-name>kaptcha.image.height</param-name>
			<param-value>50</param-value>
		</init-param>
		<!-- 使用哪些字符生成验证码 -->
		<init-param>
			<param-name>kaptcha.textproducer.char.string</param-name>
			<param-value>ACDEFHKPRSTWX345975</param-value>
		</init-param>
		<!-- 字体大小 -->
		<init-param>
			<param-name>kaptcha.textproducer.font.size</param-name>
			<param-value>43</param-value>
		</init-param>
		<!-- 干扰线的颜色 -->
		<init-param>
			<param-name>kaptcha.noise.color</param-name>
			<param-value>black</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.font.names</param-name>
			<param-value>Arial</param-value>
		</init-param>
	</servlet>
	<servlet-mapping>
		<servlet-name>Kaptcha</servlet-name>
		<url-pattern>/Kaptcha</url-pattern>
	</servlet-mapping>

3.前端验证码的显示实现

<div class="item-inner">
	<div class="item-title label">验证码</div>
	<input type="text" id="j_captcha" placeholder="验证码">
	<div class="item-input">
		<img id="captcha_img" alt="点击更换" title="点击更换"
			onclick="changeVerifyCode(this)" src="../Kaptcha" />
	</div>
</div>

function changeVerifyCode(img){
	img.src="../Kaptcha?" + Math.floor(Math.random()*100);
}

解释：

验证码图片的链接 src 中的 "../Kaptcha"，这里的“Kaptcha”是要与刚刚 web.xml 中的 url-pattern 配置的值一样的，并非随便写的。

4.后端进行验证码的输入验证

实现思路：我是把验证码的验证单独写成一个静态类，然后在控制层里面

直接调用就行。

验证码静态类：

public class CodeUtil {
	public static boolean checkVerifyCode(HttpServletRequest request){
		String verifyCodeExpected = (String)request.getSession().getAttribute(
				com.google.code.kaptcha.Constants.KAPTCHA_SESSION_KEY);
		String verifyCodeActual = HttpServletRequestUtil.getString(request, "verifyCodeActual");
		if(verifyCodeActual == null || verifyCodeActual.equals(verifyCodeExpected)){
			return false;
		}
		return true;
	}
}

控制层调用代码：

if(!CodeUtil.checkVerifyCode(request)){
	modelMap.put("success", false);
	modelMap.put("errMsg", "输入了错误的验证码");
	return modelMap;
}

if 里面验证码不通过（错误）的时候，我自己做的一些处理，可以根据自己

的实际情况进行修改。

到这里 Kaptcha 的使用就介绍完了，希望对你有帮助！！！

验证码 Kaptcha 的使用（带例子）

猜你喜欢