Java Web学习总结(22)——使用kaptcha生成验证码
kaptcha是一个简单好用的验证码生成工具,通过配置,可以自己定义验证码大小、颜色、显示的字符等等。下面就来讲一下如何使用kaptcha生成验证码以及在服务器端取出验证码进行校验。
一、搭建测试环境
1.1、创建Web测试项目
新建一个Web项目,并将kaptcha-2.3.2.jar放在项目的WEB-INF/lib目录下,如下图所示:
1.2、在web.xml文件配置生成验证码的KaptchaServlet
KaptchaServlet的详细配置如下:

1 <?xml version="1.0" encoding="UTF-8"?>
2 <web-app version="2.5"
3 xmlns="http://java.sun.com/xml/ns/javaee"
4 xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
5 xsi:schemaLocation="http://java.sun.com/xml/ns/javaee
6 http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd">
7 <welcome-file-list>
8 <welcome-file>index.jsp</welcome-file>
9 </welcome-file-list>
10
11 <!-- kaptcha验证码配置 -->
12 <servlet>
13 <!-- 生成图片的Servlet -->
14 <servlet-name>Kaptcha</servlet-name>
15 <servlet-class>com.google.code.kaptcha.servlet.KaptchaServlet</servlet-class>
16
17 <!-- 是否有边框-->
18 <init-param>
19 <param-name>kaptcha.border</param-name>
20 <param-value>no</param-value>
21 </init-param>
22 <!-- 字体颜色 -->
23 <init-param>
24 <param-name>kaptcha.textproducer.font.color</param-name>
25 <param-value>red</param-value>
26 </init-param>
27 <!-- 图片宽度 -->
28 <init-param>
29 <param-name>kaptcha.image.width</param-name>
30 <param-value>135</param-value>
31 </init-param>
32 <!-- 使用哪些字符生成验证码 -->
33 <init-param>
34 <param-name>kaptcha.textproducer.char.string</param-name>
35 <param-value>ACDEFHKPRSTWX345679</param-value>
36 </init-param>
37 <!-- 图片高度 -->
38 <init-param>
39 <param-name>kaptcha.image.height</param-name>
40 <param-value>50</param-value>
41 </init-param>
42 <!-- 字体大小 -->
43 <init-param>
44 <param-name>kaptcha.textproducer.font.size</param-name>
45 <param-value>43</param-value>
46 </init-param>
47 <!-- 干扰线的颜色 -->
48 <init-param>
49 <param-name>kaptcha.noise.color</param-name>
50 <param-value>black</param-value>
51 </init-param>
52 <!-- 字符个数 -->
53 <init-param>
54 <param-name>kaptcha.textproducer.char.length</param-name>
55 <param-value>4</param-value>
56 </init-param>
57 <!-- 使用哪些字体 -->
58 <init-param>
59 <param-name>kaptcha.textproducer.font.names</param-name>
60 <param-value>Arial</param-value>
61 </init-param>
62 </servlet>
63 <!-- 映射的url -->
64 <servlet-mapping>
65 <servlet-name>Kaptcha</servlet-name>
66 <url-pattern>/Kaptcha.jpg</url-pattern>
67 </servlet-mapping>
68 </web-app>

1.3、显示生成的验证码
在页面index.jsp显示验证码

1 <%@ page language="java" pageEncoding="UTF-8"%>
2 <!DOCTYPE HTML>
3 <html>
4 <head>
5 <title>显示KaptchaServlet生成的验证码</title>
6 <script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-1.9.1.js"></script>
7 <script type="text/javascript">
8 //点击切换验证码
9 function changeVerifyCode(){
10 $("#yzmImg").attr("src","Kaptcha.jpg?"+Math.floor(Math.random()*100));
11 }
12
13 //提交
14 function doSubmit() {
15 var verifyCodeValue = $("#verifyCode").val();
16 if(verifyCodeValue.replace(/\s/g,"") == "") {
17 alert("请输入验证码");
18 }else {
19 //提交前先异步检查验证码是否输入正确
20 var verifyUrl = "${pageContext.request.contextPath}/servlet/VerifyServlet?verifyCode="+verifyCodeValue;
21 $.ajax({
22 type:"GET",
23 url:verifyUrl,
24 success:function(returnData){
25 if(returnData!="Y") {
26 alert("请输入正确的验证码!");
27 }else {
28 //验证码正确,进行提交操作
29 alert("验证码输入正确,提交表单");
30 }
31 },
32 error:function(e){
33 alert(e);
34 }
35 });
36 }
37 }
38 </script>
39 </head>
40
41 <body>
42 <form>
43 <table>
44 <tr>
45 <td>
46 请输入验证码:
47 </td>
48 <td>
49 <input type="text" name="verifyCode" id="verifyCode">
50 <img src="Kaptcha.jpg" onclick="changeVerifyCode()" id="yzmImg" style="cursor: pointer;">
51 <a href="javascript:void(0)" onclick="changeVerifyCode()">看不清,换一张</a>
52 </td>
53 </tr>
54 <tr>
55 <td>
56
57 </td>
58 <td>
59 <input type="button" value="提交" onclick="doSubmit()">
60 </td>
61 </tr>
62 </table>
63 </form>
64 </body>
65 </html>

运行效果如下图所示:
1.4、在服务器端验证提交的验证码
用户在form表单中提交了验证码之后,我们会在服务器端进行验证,编写一个VerifyServlet,代码如下:

1 /**
2 *
3 */
4 package me.gacl.web.controller;
5
6 import java.io.IOException;
7 import java.io.PrintWriter;
8
9 import javax.servlet.ServletException;
10 import javax.servlet.http.HttpServlet;
11 import javax.servlet.http.HttpServletRequest;
12 import javax.servlet.http.HttpServletResponse;
13
14 public class VerifyServlet extends HttpServlet {
15
16
17 public void doGet(HttpServletRequest request, HttpServletResponse response)
18 throws ServletException, IOException {
19
20 response.setContentType("text/html;charaset=utf-8");
21 response.setHeader("pragma", "no-cache");
22 response.setHeader("cache-control", "no-cache");
23 PrintWriter out = null;
24 try {
25 //响应数据
26 String resultData;
27 //获取传过来的验证码
28 String verifyCode = request.getParameter("verifyCode");
29 System.out.println("verifyCode----"+verifyCode);
30 if(verifyCode=="") {
31 resultData = "N";
32 }else {
33 //获取kaptcha生成存放在session中的验证码
34 String kaptchaValue = (String) request.getSession().getAttribute(com.google.code.kaptcha.Constants.KAPTCHA_SESSION_KEY);
35 //比较输入的验证码和实际生成的验证码是否相同
36 if(kaptchaValue == null || kaptchaValue == ""||!verifyCode.equalsIgnoreCase(kaptchaValue)) {
37 resultData = "N";
38 }else {
39 resultData = "Y";
40 }
41 }
42 out = response.getWriter();
43 out.write(resultData);
44 out.flush();
45 }catch(Exception e) {
46 e.printStackTrace();
47 }finally {
48 if(out != null) {
49 out.close();
50 }
51 }
52 }
53 }

在web.xml中注册VerifyServlet

1 <!-- 检查验证码是否输入正确 -->
2 <servlet>
3 <servlet-name>VerifyServlet</servlet-name>
4 <servlet-class>me.gacl.web.controller.VerifyServlet</servlet-class>
5 </servlet>
6 <servlet-mapping>
7 <servlet-name>VerifyServlet</servlet-name>
8 <url-pattern>/servlet/VerifyServlet</url-pattern>
9 </servlet-mapping>

运行结果如下:
1、验证码不输入
2、输入错误的验证码
3、输入正确的验证码
使用kaptcha生成验证码感觉挺不错的,非常好用和方便。
Java Web学习总结(22)——使用kaptcha生成验证码的更多相关文章
- java web学习总结(九) -------------------通过Servlet生成验证码图片
一.BufferedImage类介绍 生成验证码图片主要用到了一个BufferedImage类,如下:
- java web 学习九(通过servlet生成验证码图片)
一.BufferedImage类介绍 生成验证码图片主要用到了一个BufferedImage类,如下:
- [原创]java WEB学习笔记22:MVC案例完整实践(part 3)---多个请求对应一个Servlet解析
本博客为原创:综合 尚硅谷(http://www.atguigu.com)的系统教程(深表感谢)和 网络上的现有资源(博客,文档,图书等),资源的出处我会标明 本博客的目的:①总结自己的学习过程,相当 ...
- Java web学习总结
javaweb学习总结(十四)——JSP原理 孤傲苍狼 2014-07-24 09:38 阅读:46603 评论:37 JavaWeb学习总结(十三)——使用Session防止表单重复提交 孤 ...
- [原创]java WEB学习笔记95:Hibernate 目录
本博客的目的:①总结自己的学习过程,相当于学习笔记 ②将自己的经验分享给大家,相互学习,互相交流,不可商用 内容难免出现问题,欢迎指正,交流,探讨,可以留言,也可以通过以下方式联系. 本人互联网技术爱 ...
- Java web 学习之旅
java web学习之旅 来公司十天了,感觉已经慢慢地融入了这个环境中,几个学长人都很好,都是在他们帮助下,我才能比较顺利的开始了学习java web的旅途. 来这里学习的第一个阶段是做一个简单的用户 ...
- Java Web 学习笔记 1
Java Web 学习笔记 1 一.Web开发基础 1-1 Java Web 应用开发概述 1.1.1 C/S C/S(Client/Server)服务器通常采用高性能的PC机或工作站,并采用大型数据 ...
- Java Web学习笔记之---JSP
Java Web学习笔记之---JSP (一)JSP常用语法 (1)HTML注释 <!--所要注释的内容 --> 在客户端显示一个注释. (2)隐藏注释 <%--所要注释的内容--% ...
- JAVA Web学习笔记
JAVA Web学习笔记 1.JSP (java服务器页面) 锁定 本词条由“科普中国”百科科学词条编写与应用工作项目 审核 . JSP全名为Java Server Pages,中文名叫java服务器 ...
随机推荐
- luogu1417 烹调方案
题目大意 一共有$n$件食材,每件食材有三个属性,$a_i$,$b_i$和$c_i$,如果在$t$时刻完成第$i$样食材则得到$a_i-t*b_i$的美味指数,用第$i$件食材做饭要花去$c_i$的时 ...
- oc27--synthesize,省略getset实现
// // Person.h #import <Foundation/Foundation.h> @interface Person : NSObject { @public int _a ...
- android NDK 神经网络API——是给tensorflow lite调用的底层API,应用开发者使用tensorflow lite即可
eural Networks API In this document show more Understanding the Neural Networks API Runtime Neural N ...
- hdu 1429(BFS+状态压缩)
胜利大逃亡(续) Time Limit: 4000/2000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others)Total Su ...
- yrzl-cloud
- PCB决策引擎:多维决策表转决策树
准备设计一个PCB使用的决策引擎,需要用到决策表,而单维决策表不能满足业务要求, 这里主要是为了实现:用户编辑的是决策表,实际底层存储的是树结构,树的的各个节点挂上业务决策逻辑. 这里将多维决策表转决 ...
- Truck History(prim)
http://poj.org/problem?id=1789 读不懂题再简单也不会做,英语是硬伤到哪都是真理,sad++. 此题就是一个最小生成树,两点之间的权值是毎两串之间的不同字母数. #incl ...
- Appium - 命令行参数
1.cmd端口输入,appium -help参考帮助信息 2.Appium - 命令行参数 参数 默认 描述 举个例子 --shell 空值 进入REPL模式 --ipa 空值 (仅限IOS)ab ...
- SpringCloud学习 什么是微服务(一)
关于SpringCloud,我是看了周老师的<SpringCloud与Docker微服务架构实战>之后才有了一点了解,做下记录,以供后期学习.本人知识有限,如有不对,欢迎批评 1.什么是单 ...
- QQ 临时会话+图标 HTML代码
啦啦啦 QQ会话的HTML代码 <a target="_blank" href="http://wpa.qq.com/msgrd?v=3& uin=2553 ...