博客
关于我
验证码的简单实现
阅读量:358 次
发布时间:2019-03-04

本文共 1937 字,大约阅读时间需要 6 分钟。

本质:图片

目的:防止恶意表单注册

文章目录

一、基本实现

@WebServlet("/checkCodeServlet")public class CheckCodeServlet extends HttpServlet {       protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {           int width = 100;        int height = 50;        //1.创建一对象,在内存中图片(验证码图片对象)        BufferedImage image = new BufferedImage(width,height,BufferedImage.TYPE_INT_RGB);        //2.美化图片        //2.1 填充背景色        Graphics g = image.getGraphics();//画笔对象        g.setColor(Color.PINK);//设置画笔颜色        g.fillRect(0,0,width,height);        //2.2画边框        g.setColor(Color.BLUE);        g.drawRect(0,0,width - 1,height - 1);        String str = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghigklmnopqrstuvwxyz0123456789";        //生成随机角标        Random ran = new Random();        for (int i = 1; i <= 4; i++) {               int index = ran.nextInt(str.length());            //获取字符            char ch = str.charAt(index);//随机字符            //2.3写验证码            g.drawString(ch+"",width/5*i,height/2);        }        //2.4画干扰线        g.setColor(Color.GREEN);        //随机生成坐标点        for (int i = 0; i < 10; i++) {               int x1 = ran.nextInt(width);            int x2 = ran.nextInt(width);            int y1 = ran.nextInt(height);            int y2 = ran.nextInt(height);            g.drawLine(x1,y1,x2,y2);        }        //3.将图片输出到页面展示        ImageIO.write(image,"jpg",response.getOutputStream());    }    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {           this.doPost(request,response);    }}

结果如图:

在这里插入图片描述

二、配合 html 表单实现

    
Title 看不清换一张?

这里为了达到点击图片自动更换的效果,加了个时间戳

image.src = "/code?" + time;

这里的?和 time,没有任何意义,效果是让浏览器认为这是次新的刷新,不会去读取浏览器缓存

在这里插入图片描述
但是这里也存在个问题,点击图片实现自动更改,但是实际上是跳转到了另外一个注册码的页面,没有停留在 register.html 页面,所以点击文字"看不清,换一张",只会出现一次效果

所以实际上,<a> 标签实现的是本页面的一个跳转,可以用以前学的一个

看不清换一张

然后通过 id ,添加事件即可

    
验证码 看不清换一张

转载地址:http://lxxr.baihongyu.com/

你可能感兴趣的文章
Node-RED中解析高德地图天气api的json数据显示天气仪表盘
查看>>
Node-RED中连接Mysql数据库并实现增删改查的操作
查看>>
Node-RED中通过node-red-ui-webcam节点实现访问摄像头并截取照片预览
查看>>
Node-RED中配置周期性执行、指定时间阶段执行、指定时间执行事件
查看>>
Node-RED安装图形化节点dashboard实现订阅mqtt主题并在仪表盘中显示温度
查看>>
Node-RED怎样导出导入流程为json文件
查看>>
Node-RED简介与Windows上安装、启动和运行示例
查看>>
Node-RED订阅MQTT主题并调试数据
查看>>
Node-RED通过npm安装的方式对应卸载
查看>>
node-request模块
查看>>
node-static 任意文件读取漏洞复现(CVE-2023-26111)
查看>>
Node.js 8 中的 util.promisify的详解
查看>>
node.js debug在webstrom工具
查看>>
Node.js Event emitter 详解( 示例代码 )
查看>>
Node.js GET、POST 请求是怎样的?
查看>>
Node.js HTTP模块详解:创建服务器、响应请求与客户端请求
查看>>
Node.js RESTful API如何使用?
查看>>
node.js url模块
查看>>
Node.js Web 模块的各种用法和常见场景
查看>>
Node.js 之 log4js 完全讲解
查看>>