JSP页面实现验证码校验 jsp登录界面验证码
yuyutoo 2024-10-12 01:06 2 浏览 0 评论
在网页页面的使用中为防止“非人类”的大量操作和防止一些的信息冗余，增加验证码校验是许多网站常用的方式。
而让用户输入字母和数字组合的验证码是最经典也是最常用的方式。
这一篇是纯利用现有JDK提供的绘图类(ImageIO)类制作,这个过程比较复杂且需要了解ImageIO类。
今天发布的第二篇文章是利用Hutool工具类来实现的，该工具类已经封装验证码所需的相关类等，使用起来较为简单和方便。
验证码的生成和校验过程均使用Servlet和JSP的结合来实现，Servlet的相关内容可以参阅
Servlet技术:https://mp.weixin.qq.com/s/__e_ef0SI6kVPiRaU0MXJw
如何利用基础的JSP知识来实现网页的验证码校验呢？
验证码校验分析
首先要验证码的校验的过程。
验证码校验分为三部分：
- 生成验证码
- 获取用户输入的验证码
- 判断验证码是否输入正确
验证码的生成实际就是输出一个图像，所以在这里使用ImageIO来生成图片，然后结合使用随机数（Random）来实现随机生成验证上的内容，最后进而展示出来，然后利用Session对象存储验证码的内容。在用户输入验证码的时候可以用request来获取用户输入的内容，让其余Session对象中保存的验证码内容进行比较，若一致则验证成功，不一致就验证失败。
生成验证码
先创建一个图片的缓冲区：
BufferedImage bi=new BufferedImage(68, 22,BufferedImage.TYPE_INT_RGB);
创建画布：
Graphics g=bi.getGraphics();
创建颜色：
Color c=new Color(200,150,255);
创建背景颜色：
g.setColor(c);
填充矩形：
g.fillRect(0, 0, 68,22);
将要显示的验证码内容组成元素存入字符串数组：
char[] ch="ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789".toCharArray();
创建随机的验证码内容：
Random r=new Random();
int len=ch.length;
int index; //index用于存放随机数字
StringBuffer sb=new StringBuffer();
for(int i=0;i<4;i++)
{
index=r.nextInt(len);//产生随机数字
g.setColor(new Color(r.nextInt(88),r.nextInt(188),r.nextInt(255))); //设置颜色
g.drawString(ch[index]+"",(i*15)+3, 18);//画数字以及数字的位置
sb.append(ch[index]);
}
将验证码的内容存入Session及显示在页面上：
request.getSession().setAttribute("piccode",sb.toString());
ImageIO.write(bi, "JPG", response.getOutputStream());
完整代码：
public class ImageServlet extends HttpServlet {
public void doGet(HttpServletRequest request, HttpServletResponse response) throws IOException {
BufferedImage bi = new BufferedImage(68, 22, BufferedImage.TYPE_INT_RGB);//创建图像缓冲区
Graphics g = bi.getGraphics(); //通过缓冲区创建一个画布
Color c = new Color(200, 150, 255); //创建颜色
g.setColor(c);//为画布创建背景颜色
g.fillRect(0, 0, 68, 22); //填充矩形
char[] ch = "ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789".toCharArray();//转化为字符型的数组
Random r = new Random();
int len = ch.length;
int index; //index用于存放随机数字
StringBuffer sb = new StringBuffer();
for (int i = 0; i < 4; i++) {
index = r.nextInt(len);//产生随机数字
g.setColor(new Color(r.nextInt(88), r.nextInt(188), r.nextInt(255))); //设置颜色
g.drawString(ch[index] + "", (i * 15) + 3, 18);//画数字以及数字的位置
sb.append(ch[index]);
}
request.getSession().setAttribute("piccode", sb.toString());
ImageIO.write(bi, "JPG", response.getOutputStream());
}
}
测试验证码
在测试之前需要先在web.xml文件中配置一下：
<servlet>
<servlet-name>ImageServlet</servlet-name>
<servlet-class>com.kailong.servlet.ImageServlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>ImageServlet</servlet-name>
<url-pattern>/imageServlet</url-pattern>
</servlet-mapping>
启动服务器后在浏览器中输入http://localhost:8080/工程名/imageServlet 即可
验证码的生成已经实现成功，下面实现验证验证码的Servlet。
校验验证码
先新建一个jsp用户界面：
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>登录界面</title>
</head>
<body>
<form action="<%= request.getContextPath()%>/loginServlet" method="get" >
验证码:<input type="text" name="checkCode"/><br/>
<img alt="验证码" id="imagecode" src="<%= request.getContextPath()%>/imageServlet"/>
<input type="submit" value="提交">
</form>
</body>
</html>
校验验证码过程：
- 将生成的验证码内容保存在Session对象中
- 获取用户输入的验证码内容
- 将两个内容进行对照
代码实现：
获取Session中的验证码内容：
String piccode=(String) request.getSession().getAttribute("piccode");
获取用户输入的验证码内容：
String checkCode=request.getParameter("checkCode");
验证码判断（使用了PrintWriter将相关内容输出）
response.setContentType("text/html;charset=utf-8");//解决乱码问题
PrintWriter out=response.getWriter();
if(checkCode.equals(piccode))
{
out.println("验证码输入正确！");
}
else
{
out.println("验证码输入错误！！！");
}
out.flush();//将流刷新
out.close();//将流关闭
完整代码：
public class LoginServlet extends HttpServlet {
public void doGet(HttpServletRequest request, HttpServletResponse response) throws IOException
//用于验证验证码
{
String piccode = (String) request.getSession().getAttribute("piccode");
String checkCode = request.getParameter("checkCode");
response.setContentType("text/html;charset=utf-8");//解决乱码问题
PrintWriter out = response.getWriter();
if (checkCode.equals(piccode)) {
out.println("验证码输入正确！");
} else {
out.println("验证码输入错误！！！");
}
out.flush();//将流刷新
out.close();//将流关闭
}
}
测试验证码校验
测试前先在web.xml文件中配置一下：
<servlet>
<servlet-name>LoginServlet</servlet-name>
<servlet-class>com.kailong.servlet.LoginServlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>LoginServlet</servlet-name>
<url-pattern>/loginServlet</url-pattern>
</servlet-mapping>
添加验证码刷新
在验证码生成之后，用户在识别的时候可能不能正确识别，这时候就需要刷新一下重新生成。
添加超链接实现刷新：
login.jsp:
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>登录界面</title>
<script>
function reloadCode() {
var time=new Date().getTime();
document.getElementById("imagecode").src="<%= request.getContextPath()%>/imageGenerate?d="+time;
}
</script>
</head>
<body>
<form action="<%= request.getContextPath()%>/loginServlet" method="get" >
验证码:<input type="text" name="checkCode"/><br/>
<img alt="验证码" id="imagecode" src="<%= request.getContextPath()%>/imageServlet"/>
<a href="javascript:reloadCode();">看不清楚</a><br>
<br/><input type="submit" value="提交">
</form>
</body>
</html>
js部分的Date相关是防止浏览器缓存后不能正常刷新，添加时间的唯一性来实现能够及时刷新和展示。
js 部分可以参阅：JavaScript 语言入门: https://mp.weixin.qq.com/s/37CaC25_1agb-aXBLhUKtg
也可以在ImageServlet中添加防止浏览器缓存的语句：
response.setHeader("Pragma", "No-cache");
公众号本文地址：https://mp.weixin.qq.com/s/XHucabQ_WwUx2OMDGSTMkw
欢迎关注公众号：愚生浅末。
相关推荐
- jQuery VS AngularJS 你更钟爱哪个?
-
在这一次的Web开发教程中，我会尽力解答有关于jQuery和AngularJS的两个非常常见的问题，即jQuery和AngularJS之间的区别是什么？也就是说jQueryVSAngularJS？...
- Jquery实时校验，指定长度的「负小数」，小数位未满末尾补0
-
在可以输入【负小数】的输入框获取到焦点时，移除千位分隔符，在输入数据时，实时校验输入内容是否正确，失去焦点后，添加千位分隔符格式化数字。同时小数位未满时末尾补0。HTML代码...
- 如何在pbootCMS前台调用自定义表单?pbootCMS自定义调用代码示例
-
要在pbootCMS前台调用自定义表单，您需要在后台创建表单并为其添加字段，然后在前台模板文件中添加相关代码，如提交按钮和表单验证代码。您还可以自定义表单数据的存储位置、添加文件上传字段、日期选择器、...
- 编程技巧:Jquery实时验证，指定长度的「负小数」
-
为了保障【负小数】的正确性，做成了通过Jquery，在用户端，实时验证指定长度的【负小数】的方法。HTML代码<inputtype="text"class="forc...
- 一篇文章带你用jquery mobile设计颜色拾取器
-
【一、项目背景】现实生活中，我们经常会遇到配色的问题，这个时候去百度一下RGB表。而RGB表只提供相对于的颜色的RGB值而没有可以验证的模块。我们可以通过jquerymobile去设计颜色的拾取器...
- 编程技巧:Jquery实时验证，指定长度的「正小数」
-
为了保障【正小数】的正确性，做成了通过Jquery，在用户端，实时验证指定长度的【正小数】的方法。HTML做成方法<inputtype="text"class="fo...
- jquery.validate检查数组全部验证
-
问题：html中有多个name[]，每个参数都要进行验证是否为空，这个时候直接用required:true话，不能全部验证，只要这个数组中有一个有值就可以通过的。解决方法使用addmethod...
- Vue进阶(幺叁肆):npm查看包版本信息
-
第一种方式npmviewjqueryversions这种方式可以查看npm服务器上所有的...
- layui中使用lay-verify进行条件校验
-
一、layui的校验很简单，主要有以下步骤：1.在form表单内加上class="layui-form"2.在提交按钮上加上lay-submit3.在想要校验的标签，加上lay-...
- jQuery是什么?如何使用? jquery是什么功能组件
-
jQuery于2006年1月由JohnResig在BarCampNYC首次发布。它目前由TimmyWilson领导,并由一组开发人员维护。jQuery是一个JavaScript库，它简化了客户...
- django框架的表单form的理解和用法-9
-
表单呈现...
- jquery对上传文件的检测判断 jquery实现文件上传
-
总体思路：在前端使用jquery对上传文件做部分初步的判断，验证通过的文件利用ajaxFileUpload上传到服务器端，并将文件的存储路径保存到数据库。<asp:FileUploadI...
- Nodejs之MEAN栈开发(四)-- form验证及图片上传
-
这一节增加推荐图书的提交和删除功能，来学习node的form提交以及node的图片上传功能。开始之前需要源码同学可以先在git上fork：https://github.com/stoneniqiu/R...
- 大数据开发基础之JAVA jquery 大数据java实战
-
上一篇我们讲解了JAVAscript的基础知识、特点及基本语法以及组成及基本用途，本期就给大家带来了JAVAweb的第二个知识点jquery，大数据开发基础之JAVAjquery，这是本篇文章的主要...
- 推荐四个开源的jQuery可视化表单设计器
-
jquery开源在线表单拖拉设计器formBuilder(推荐)jQueryformBuilder是一个开源的WEB在线html表单设计器，开发人员可以通过拖拉实现一个可视化的表单。支持表单常用控件...
欢迎 你 发表评论:
- 一周热门
- 最近发表
- 标签列表
-
- mybatis plus (70)
- scheduledtask (71)
- css滚动条 (60)
- java学生成绩管理系统 (59)
- 结构体数组 (69)
- databasemetadata (64)
- javastatic (68)
- jsp实用教程 (53)
- fontawesome (57)
- widget开发 (57)
- vb net教程 (62)
- hibernate 教程 (63)
- case语句 (57)
- svn连接 (74)
- directoryindex (69)
- session timeout (58)
- textbox换行 (67)
- extension_dir (64)
- linearlayout (58)
- vba高级教程 (75)
- iframe用法 (58)
- sqlparameter (59)
- trim函数 (59)
- flex布局 (63)
- contextloaderlistener (56)