基於ssm實現驗證碼功能
阿新 • • 發佈:2021-07-21
3、驗證碼
- 使用現成的依賴生成驗證碼
- web.xml配置生成驗證碼的引數及url-pattern
3.1 匯入依賴
<!-- 驗證碼依賴 --> <!-- Kaptcha --> <dependency> <groupId>com.github.penggle</groupId> <artifactId>kaptcha</artifactId> <version>2.3.2</version> <exclusions> <exclusion> <groupId>javax.servlet</groupId> <artifactId>javax.servlet-api</artifactId> </exclusion> </exclusions> </dependency>
3.2 web.xml 配置Servlet
<servlet> <servlet-name>cap</servlet-name> <servlet-class>com.google.code.kaptcha.servlet.KaptchaServlet</servlet-class> <init-param> <param-name>kaptcha.border</param-name> <param-value>no</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.string</param-name> <param-value>abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789</param-value> </init-param> <init-param> <param-name>kaptcha.background.clear.to</param-name> <param-value>211,229,237</param-value> </init-param> <init-param> <!-- session.setAttribute("captcha","驗證碼") --> <param-name>kaptcha.session.key</param-name> <param-value>captcha</param-value> </init-param> </servlet> <servlet-mapping> <servlet-name>cap</servlet-name> <!-- 請求如下地址,就能獲取一個驗證碼圖片 --> <url-pattern>/captcha</url-pattern> </servlet-mapping>
3.3 頁面
<%@ page contentType="text/html;charset=UTF-8" language="java" %> <html> <head> <title>Title</title> </head> <body> <form action="regist" method="post"> 驗證碼:<input type="text" name="validateCode"/><img src="captcha" onclick="changeCode(this);"/> <input type="submit" value="註冊"/> </form> </body> <script> function changeCode(obj) { obj.src = "captcha?time="+new Date().getTime(); } </script> </html>