当前位置： 首页 > news >正文

验证码介绍及生成与验证（HTML + JavaScript实现）

news 2026/2/9 22:59:54

验证码介绍及生成与验证（HTML + JavaScript实现）

验证码

验证码（全自动区分计算机和人类的图灵测试，‌CAPTCHA ，C‌ompletely ‌A‌utomated ‌P‌ublic ‌T‌uring test to tell ‌C‌omputers and ‌H‌umans ‌A‌part）是一种用于区分用户是人类还是自动化程序的安全机制，通过生成人类易识别、机器难破解的测试题目实现身份验证。

作用‌

  • ‌防止恶意攻击‌：抵御机器人批量注册、暴力破解密码、刷票等行为。
  • ‌保护数据安全‌：拦截网络爬虫非法抓取敏感信息。
  • ‌提升系统稳定性‌：减少服务器因自动化请求导致的过载风险。

 ‌常见类型‌

‌类型‌

‌示例‌

‌特点‌

‌传统文本验证码‌

扭曲字母/数字组合

简单易实现，但易被OCR技术破解

‌图像识别验证码‌

点击包含“红绿灯”的图片

依赖图像语义理解，机器识别难度较高

‌短信/邮件验证码‌

发送6位数字到用户手机/邮箱

依赖真实身份绑定，安全性强

‌行为验证码‌

滑动拼图、点选汉字

通过交互行为特征判断人类操作

‌智能无感验证‌

Google reCAPTCHA v3

后台分析用户行为，无需主动操作

下面以传统文本验证码为例给出演示代码，特别提示，为简化实现，下面的演示验证码生成与验证示例都是在客户端实现的，仅适用于教学场景，并且验证码未设置失效时间与防重放机制，实际生产必须将验证码生成、存储、验证逻辑全部移至服务端，并综合运用加密、干扰技术、限流防御和监控告警，才能有效抵御自动化攻击与数据篡改风险。

客户端验证码生成与验证示例代码（HTML + JavaScript实现）先看运行效果：

源码如下：

<!DOCTYPE html>
<html lang="zh-cn">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>验证码生成与验证</title><style>body {font-family: "微软雅黑", sans-serif;padding: 10px;background: #333333;color: #eeeeee;display: block;}h1 {text-align: center;margin: 100px;}.container {  text-align: center;margin: 0 auto;width: 1000px;height: 300px;font-size: 1.1em;  /*   */}#captchaInput {font-size: 2em;width: 220px;}#captchaImg {display: block;margin: 10px auto;  /* 上下边距 */width: 180px;       /* 图片显示尺寸 */height: 50px;}button {font-size: 2em;background-color: #2196F3;margin: 10px;       /* 增加按钮间距 */}</style>
</head>
<body>
<div class="container">  <!-- 同步修正类名 --><h1>客户端验证码生成与验证</h1><img id="captchaImg" alt="Captcha Image"><input type="text" id="captchaInput" placeholder="请输入验证码"><button id="validateBtn">验证</button><button id="regenerateBtn">重新生成</button><script>let currentCaptchaInfo;function generateCaptcha(length = 6) {const hexChars = '0123456789ABCDEF';let captchaCode = '';// 生成验证码文本for (let i = 0; i < length; i++) {captchaCode += hexChars[Math.floor(Math.random() * hexChars.length)];}// 配置画布参数const canvas = document.createElement('canvas');canvas.width = 180;   // 画布避免溢出canvas.height = 50;const ctx = canvas.getContext('2d');// 绘制背景ctx.fillStyle = '#f0f0f0';ctx.fillRect(0, 0, canvas.width, canvas.height);// 字符绘制参数const baseX = 20;      // 起始X坐标const charSpacing = 25; // 字符间距ctx.font = '36px Courier New';  // 使用等宽字体for (let i = 0; i < captchaCode.length; i++) {ctx.fillStyle = '#ff0055';// 生成有限旋转角度(-45°~45°)const angle = (Math.random() - 0.5) * 90;ctx.save();// 定位到字符中心点ctx.translate(baseX + (i * charSpacing), 30);ctx.rotate(angle * Math.PI / 180);ctx.fillText(captchaCode[i], -6, 8);  // 微调字符位置ctx.restore();}return {code: captchaCode,imageUrl: canvas.toDataURL()};}// 初始化验证码window.onload = () => {regenerateCaptcha();};function regenerateCaptcha() {currentCaptchaInfo = generateCaptcha();document.getElementById('captchaImg').src = currentCaptchaInfo.imageUrl;document.getElementById('captchaInput').value = '';}// 按钮事件监听document.getElementById('regenerateBtn').addEventListener('click', regenerateCaptcha);document.getElementById('validateBtn').addEventListener('click', () => {const userInput = document.getElementById('captchaInput').value.toUpperCase();userInput === currentCaptchaInfo.code ? alert('验证成功!') : alert('验证失败!');regenerateCaptcha();});</script>
</div>
</body>
</html>

相关文章：

验证码介绍及生成与验证（HTML + JavaScript实现）

验证码介绍及生成与验证&#xff08;HTML JavaScript实现&#xff09; 验证码 验证码&#xff08;全自动区分计算机和人类的图灵测试&#xff0c;‌CAPTCHA &#xff0c;C‌ompletely ‌A‌utomated ‌P‌ublic ‌T‌uring test to tell ‌C‌omputers and ‌H‌umans ‌A‌…...

编程日记 2025/2/27 7:45:21

文心一言AI创意画

介绍 文心一言是百度推出的新一代知识增强大语言模型&#xff0c;属于文心大模型家族的新成员。‌它能够与人对话互动、回答问题、协助创作&#xff0c;高效便捷地帮助人们获取信息、知识和灵感。‌ 特点 文心一言基于数万亿数据和数千亿知识进行融合学习&#xff0c;采用预训…...

编程日记 2025/2/27 7:44:18

WebRTC解析

一、WebRTC 协议概述 WebRTC&#xff08;Web Real-Time Communication&#xff09;是由 Google 发起并成为 W3C 标准的实时音视频通信技术&#xff0c;核心特点&#xff1a; 零插件&#xff1a;浏览器原生支持端到端加密&#xff08;SRTP DTLS&#xff09;P2P 优先架构&…...

编程日记 2025/2/27 7:41:15

升级Office软件后，Windows 系统右键里没有新建Word、Excel、PowerPoint文件的解决办法

我办公用的电脑&#xff0c;Office 2013 已经用了好多年&#xff0c;最近突发奇想给升级到了 Ofiice 2024。升级过程还蛮顺利的&#xff0c;但是安装完成后&#xff0c;发现点右键里没有新建Word、Excel、PowerPoint&#xff0c;开始菜单里 Word、Excel、PowerPoint 使用都正常…...

编程日记 2025/2/27 7:33:07

车载DoIP诊断框架 --- 连接 DoIP ECU/车辆的故障排除

我是穿拖鞋的汉子，魔都中坚持长期主义的汽车电子工程师。 老规矩，分享一段喜欢的文字，避免自己成为高知识低文化的工程师： 简单，单纯，喜欢独处，独来独往，不易合同频过着接地气的生活，除了生存温饱问题之外，没有什么过多的欲望，表面看起来很高冷，内心热情，如果你身…...

编程日记 2025/2/27 7:32:06

洛谷每日1题-------Day4__陶陶摘苹果

# P1046 [NOIP 2005 普及组] 陶陶摘苹果 ## 题目描述 陶陶家的院子里有一棵苹果树&#xff0c;每到秋天树上就会结出 $10$ 个苹果。苹果成熟的时候&#xff0c;陶陶就会跑去摘苹果。陶陶有个 $30$ 厘米高的板凳&#xff0c;当她不能直接用手摘到苹果的时候&#xff0c;就会踩…...

编程日记 2025/2/27 7:29:01

萌新学 Python 之模块管理

模块就是一个 python 代码文件&#xff0c;模块可以包含函数、类&#xff0c;可以提高代码复用率提高效率 python 模块主要分为三种&#xff1a; 1.内置模块&#xff1a;python 自带的模块&#xff0c;导入后可以直接使用&#xff0c;比如 import 模块名 2.第三方模块&#…...

编程日记 2025/2/27 7:22:55

6.3 - UART串口数据发送之中断

文章目录 1 实验任务2 系统框图3 软件设计 1 实验任务 本实验使用中断方式实现UART串口数据的连续发送。 2 系统框图 参见6.1。 3 软件设计 注意事项&#xff1a; 系统上电、程序下载后&#xff0c;此时TX FIFO虽然为空&#xff0c;但并不会触发空中断&#xff1b;空中断…...

编程日记 2025/2/27 7:19:51

Fisher信息矩阵（Fisher Information Matrix, FIM）与自然梯度下降：机器学习中的优化利器

Fisher信息矩阵与自然梯度下降&#xff1a;机器学习中的优化利器 在机器学习尤其是深度学习中&#xff0c;优化模型参数是一个核心任务。我们通常依赖梯度下降&#xff08;Gradient Descent&#xff09;来调整参数&#xff0c;但普通的梯度下降有时会显得“笨拙”&#xff0c;…...

编程日记 2025/2/27 7:16:48

Mysql基础-多表查询（详细版）

目录 一、表的关系类型与适用场景二、连接方式与使用场景三、易错点与注意事项四、总结 一、表的关系类型与适用场景 1. 一对一关系 场景&#xff1a;一个表的记录对应另一个表的唯一记录 案例&#xff1a;用户表 用户详情表 CREATE TABLE users (id INT PRIMARY KEY,name…...

编程日记 2025/2/27 7:15:47

港科大提出开放全曲音乐生成基础模型YuE:可将歌词转换成完整歌曲

YuE是港科大提出的一个开源的音乐生成基础模型&#xff0c;专为音乐生成而设计&#xff0c;专门用于将歌词转换成完整的歌曲&#xff08;lyrics2song&#xff09;。它可以生成一首完整的歌曲&#xff0c;时长几分钟&#xff0c;包括朗朗上口的声乐曲目和伴奏曲目。YuE 能够模拟…...

编程日记 2025/2/27 7:13:44

Python学习第十七天之PyTorch保姆级安装

PyTorch安装与部署 一、准备工作二、pytorch介绍三、CPU版本pytorch安装1. 创建虚拟环境2. 删除虚拟环境1. 通过环境名称删除2. 通过环境路径删除 3. 配置镜像源4. 安装pytorch1. 首先激活环境变量2. 进入pytorch官网&#xff0c;找到安装指令 5. 验证pytorch是否安装成功 四、…...

编程日记 2025/2/27 7:11:41

有关与 WSL 2 的主要区别的信息，请访问 https://aka.ms/wsl2

https://learn.microsoft.com/zh-cn/windows/wsl/install-manual#step-4—download-the-linux-kernel-update-package...

编程日记 2025/2/27 7:10:40

什么是 Java 中的线程安全？

回答 Java 中的线程安全&#xff08;Thread Safety&#xff09;指的是在多线程环境下&#xff0c;当多个线程同时访问和操作共享资源&#xff08;如对象、变量、数据结构等&#xff09;时&#xff0c;能够保证程序的正确性&#xff0c;不会出现数据不一致、竞争条件&#xff0…...

编程日记 2025/2/27 7:09:37

计算机视觉(opencv-python)入门之图像的读取,显示,与保存

在计算机视觉领域&#xff0c;Python的cv2库是一个不可或缺的工具&#xff0c;它提供了丰富的图像处理功能。作为OpenCV的Python接口&#xff0c;cv2使得图像处理的实现变得简单而高效。 示例图片 目录 opencv获取方式 图像基本知识 颜色空间 RGB HSV CV2常用图像处理方…...

编程日记 2025/2/27 7:07:34

QT:Graphics View的坐标系介绍

在 Qt 的 Graphics View 框架中&#xff0c;存在三种不同的坐标系&#xff0c;分别是 物品坐标系&#xff08;Item Coordinates&#xff09;、场景坐标系&#xff08;Scene Coordinates&#xff09; 和 视图坐标系&#xff08;View Coordinates&#xff09;。这三种坐标系在图形…...

编程日记 2025/2/27 7:06:33

530 Login fail. A secure connection is requiered(such as ssl)-java发送QQ邮箱（简单配置）

由于cs的csdN许多文章关于这方面的都是vip文章&#xff0c;而本文是免费的&#xff0c;希望广大网友觉得有帮助的可以多点赞和关注&#xff01; QQ邮箱授权码到这里去开启 授权码是16位的字母&#xff0c;填入下面的mail.setting里面的pass里面 # 邮件服务器的SMTP地址 host…...

编程日记 2025/2/27 7:01:23

vs2015下使用openmp

一 OPENMP 简介 OpenMP（Open Multi-Processing）是一个基于共享内存的并行编程API，通过编译器指令实现多线程并行开发。其核心特性包括： 1）通过简单的#pragma指令实现并行化 2）支持增量并行（逐步优化代码） 3）跨平台（Windows/Linux/macOS） 4）支持C/C++/Fortra …...

编程日记 2025/2/27 7:00:19

Docker 搭建 Gitlab 服务器 (完整详细版)

参考 Docker 搭建 Gitlab 服务器 (完整详细版)_docker gitlab-CSDN博客 Docker 安装 (完整详细版)_docker安装-CSDN博客 Docker 日常命令大全(完整详细版)_docker命令-CSDN博客 1、Gitlab镜像 # 查找Gitlab镜像 docker search gitlab # 拉取Gitlab镜像 docker pull gitlab/g…...

编程日记 2025/2/27 6:59:16

【万字长文】开源之播对话白鲸开源CEO郭炜--乐观主义的开源精神走得更远

本文为白鲸开源科技CEO郭炜1小时深度访谈全记录 来源于&#xff1a;开源之播」Episode15:对话郭炜–乐观主义的开源精神走得更远 大家好&#xff0c;我是郭炜&#xff0c;开源圈的“郭大侠”。作为 Apache 基金会的成员&#xff0c;我曾参与并孵化了多个开源项目&#xff0c;如…...

编程日记 2025/2/27 6:58:14

RestClient

什么是RestClient RestClient 是 Elasticsearch 官方提供的 Java 低级 REST 客户端&#xff0c;它允许HTTP与Elasticsearch 集群通信&#xff0c;而无需处理 JSON 序列化/反序列化等底层细节。它是 Elasticsearch Java API 客户端的基础。 RestClient 主要特点 轻量级&#xff…...

编程新知 2025/11/30 15:33:36

Admin.Net中的消息通信SignalR解释

定义集线器接口 IOnlineUserHub public interface IOnlineUserHub {/// 在线用户列表Task OnlineUserList(OnlineUserList context);/// 强制下线Task ForceOffline(object context);/// 发布站内消息Task PublicNotice(SysNotice context);/// 接收消息Task ReceiveMessage(…...

编程新知 2025/9/10 5:36:56

srs linux

下载编译运行 git clone https:///ossrs/srs.git ./configure --h265on make 编译完成后即可启动SRS # 启动 ./objs/srs -c conf/srs.conf # 查看日志 tail -n 30 -f ./objs/srs.log 开放端口 默认RTMP接收推流端口是1935&#xff0c;SRS管理页面端口是8080&#xff0c;可…...

编程新知 2026/2/6 9:49:55

在Ubuntu中设置开机自动运行（sudo）指令的指南

在Ubuntu系统中&#xff0c;有时需要在系统启动时自动执行某些命令&#xff0c;特别是需要 sudo权限的指令。为了实现这一功能&#xff0c;可以使用多种方法&#xff0c;包括编写Systemd服务、配置 rc.local文件或使用 cron任务计划。本文将详细介绍这些方法&#xff0c;并提供…...

编程新知 2025/12/23 11:20:24

Redis数据倾斜问题解决

Redis 数据倾斜问题解析与解决方案 什么是 Redis 数据倾斜 Redis 数据倾斜指的是在 Redis 集群中&#xff0c;部分节点存储的数据量或访问量远高于其他节点&#xff0c;导致这些节点负载过高&#xff0c;影响整体性能。 数据倾斜的主要表现 部分节点内存使用率远高于其他节…...

编程新知 2026/1/27 19:28:11

力扣-35.搜索插入位置

题目描述 给定一个排序数组和一个目标值&#xff0c;在数组中找到目标值&#xff0c;并返回其索引。如果目标值不存在于数组中&#xff0c;返回它将会被按顺序插入的位置。 请必须使用时间复杂度为 O(log n) 的算法。 class Solution {public int searchInsert(int[] nums, …...

编程新知 2025/12/3 3:22:43

JVM 内存结构 详解

内存结构 运行时数据区&#xff1a; Java虚拟机在运行Java程序过程中管理的内存区域。 程序计数器&#xff1a; ​ 线程私有&#xff0c;程序控制流的指示器&#xff0c;分支、循环、跳转、异常处理、线程恢复等基础功能都依赖这个计数器完成。 ​ 每个线程都有一个程序计数…...

编程新知 2026/2/6 3:24:58

QT3D学习笔记——圆台、圆锥

类名作用Qt3DWindow3D渲染窗口容器QEntity场景中的实体&#xff08;对象或容器&#xff09;QCamera控制观察视角QPointLight点光源QConeMesh圆锥几何网格QTransform控制实体的位置/旋转/缩放QPhongMaterialPhong光照材质&#xff08;定义颜色、反光等&#xff09;QFirstPersonC…...

编程新知 2026/1/29 5:26:37

Python 实现 Web 静态服务器（HTTP 协议）

目录 一、在本地启动 HTTP 服务器1. Windows 下安装 node.js1&#xff09;下载安装包2&#xff09;配置环境变量3&#xff09;安装镜像4&#xff09;node.js 的常用命令 2. 安装 http-server 服务3. 使用 http-server 开启服务1&#xff09;使用 http-server2&#xff09;详解 …...

编程新知 2026/1/29 2:11:49

Modbus RTU与Modbus TCP详解指南

目录 1. Modbus协议基础 1.1 什么是Modbus？ 1.2 Modbus协议历史 1.3 Modbus协议族 1.4 Modbus通信模型 🎭 主从架构 🔄 请求响应模式 2. Modbus RTU详解 2.1 RTU是什么？ 2.2 RTU物理层 🔌 连接方式 ⚡ 通信参数 2.3 RTU数据帧格式 📦 帧结构详解 🔍…...

编程新知 2025/12/29 22:20:36