JSP 和 Servlet 中的验证码

柔光的暖阳◎ 2023-10-03 09:22 31阅读 0赞

***本教程介绍了如何在 JSP 和 Servlet 中创建验证码。本示例在 Eclipse IDE 中创建并在 tomcat 服务器上运行。***

## JSP 和 Servlet 中的验证码 ##

本教程介绍了如何在 JSP 和 Servlet 中创建验证码。本示例在 Eclipse IDE 中创建并在 tomcat 服务器上运行。此示例使用以下 jar

*  imaging.jar
 *  jstl-1.2.jar
 *  simplecaptcha-1.1.1.jar
 *  standard.jar

如果您使用 Eclipse 编辑器开发应用程序，应用程序目录结构将如下所示。

![1121captcha1.gif][]

创建此类应用程序有以下步骤：。

**步骤1 ：**

首先，我们在 Eclipse IDE 中创建动态 Web 项目“captcha”。我们再次在 WebContent 文件夹下创建“simplecaptcha.jsp”文件。“simplecaptcha.jsp”的代码如下：

<%@ page language="java" pageEncoding="UTF-8"%>
    <%@ page contentType="text/html;charset=UTF-8"%>
    <%
    request.setCharacterEncoding("UTF-8");
    response.setCharacterEncoding("UTF-8");
    response.setContentType("text/html; charset=UTF-8");
    %>
    
    
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
    <head>
    <META http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Simple CAPTCHA Example</title>
    <link href="styles.css" type="text/css" rel="stylesheet" />
    <script type="text/javascript">
    	function reloadImg() {
    		var timestamp = new Date().getTime();
    		document.getElementById("captcha").src = "simpleCaptcha.jpg?"
    				+ timestamp;
    	}
    </script>
    </head>
    <body>
    	<center>
    		<h3>验证码测试</h3>
    
    		<form action="captchasubmit.jsp" method="post">
    
    			<img id="captcha" src="simpleCaptcha.jpg" /><br /> <a
    				href="javascript:reloadImg()">刷新验证码</a> <br /> <input type="text"
    				name="answer" /><br> <input type="submit" value="提交">
    		</form>
    	</center>
    </body>
    </html>

**第2步 ：**

我们再次在 WebContent 文件夹下创建“captchasubmit.jsp”文件。此文件用于显示验证码正确与否的消息。“captchasubmit.jsp”的代码如下：

**第 3 步：**

现在在 WebContent 文件夹下创建 css 文件夹并在 css 文件夹下创建“styles.css”文件。“styles.css”的代码如下：

body {
    
    color: black;
    
    background-color: white;
    
    font-family: "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
    
    }

**第四步 ：**

现在您可以打开“web.xml”文件并修改为：

<?xml version="1.0" encoding="UTF-8"?>
    
    <web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    
    xmlns="http://java.sun.com/xml/ns/javaee" xmlns:web="http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"
    
    xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"
    
    id="WebApp_ID" version="2.5">
    
    <display-name>captcha</display-name>
    
    <servlet>
    
    <servlet-name>SimpleCaptcha</servlet-name>
    
    <servlet-class>nl.captcha.servlet.SimpleCaptchaServlet</servlet-class>
    
    </servlet>
    
    <servlet-mapping>
    
    <servlet-name>SimpleCaptcha</servlet-name>
    
    <url-pattern>/simpleCaptcha.jpg</url-pattern>
    
    </servlet-mapping>
    
    <welcome-file-list>
    
    <welcome-file>simpleCaptcha.jsp</welcome-file>
    
    </welcome-file-list>
    
    </web-app>

**第 5 步：**

现在下载imaging.jar、jstl-1.2.jar、simplecaptcha-1.1.1.jar 和standard.jar jar 文件并粘贴到“WebContent/WEB-INF/lib”目录下。

**第 6 步：**

在 tomcat 服务器上运行此应用程序时，以下输出将显示为：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FsbHdheTI_size_16_color_FFFFFF_t_70][]

再次在文本输入框中输入验证码，然后单击“提交”按钮。如果您输入无效的验证码，则会显示以下错误消息：

![20210628123104130.png][]

如果匹配验证码显示消息为：

![20210628123207516.png][]

**下载代码**

[下载示例代码][Link 1]

[1121captcha1.gif]: https://img-blog.csdnimg.cn/img_convert/e6ff17d071cdf0a05bee9a9c3e7b0c8b.gif
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FsbHdheTI_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20210628123019275.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FsbHdheTI=,size_16,color_FFFFFF,t_70
[20210628123104130.png]: https://img-blog.csdnimg.cn/20210628123104130.png
[20210628123207516.png]: https://img-blog.csdnimg.cn/20210628123207516.png
[Link 1]: https://www.devmanuals.com/images/images1/1121captcha.zip