验证码介绍及生成与验证（HTML + JavaScript实现）
验证码介绍及生成与验证（HTML + JavaScript实现）
验证码
验证码（全自动区分计算机和人类的图灵测试，CAPTCHA ，Completely Automated Public Turing test to tell Computers and Humans Apart）是一种用于区分用户是人类还是自动化程序的安全机制，通过生成人类易识别、机器难破解的测试题目实现身份验证。
作用
- 防止恶意攻击：抵御机器人批量注册、暴力破解密码、刷票等行为。
- 保护数据安全：拦截网络爬虫非法抓取敏感信息。
- 提升系统稳定性：减少服务器因自动化请求导致的过载风险。
常见类型
| 类型 | 示例 | 特点 |
| 传统文本验证码 | 扭曲字母/数字组合 | 简单易实现，但易被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实现）
验证码介绍及生成与验证（HTML JavaScript实现） 验证码 验证码（全自动区分计算机和人类的图灵测试，CAPTCHA ，Completely Automated Public Turing test to tell Computers and Humans A…...
文心一言AI创意画
介绍 文心一言是百度推出的新一代知识增强大语言模型，属于文心大模型家族的新成员。它能够与人对话互动、回答问题、协助创作，高效便捷地帮助人们获取信息、知识和灵感。 特点 文心一言基于数万亿数据和数千亿知识进行融合学习，采用预训…...
WebRTC解析
一、WebRTC 协议概述 WebRTC（Web Real-Time Communication）是由 Google 发起并成为 W3C 标准的实时音视频通信技术，核心特点： 零插件：浏览器原生支持端到端加密（SRTP DTLS）P2P 优先架构&…...
升级Office软件后，Windows 系统右键里没有新建Word、Excel、PowerPoint文件的解决办法
我办公用的电脑，Office 2013 已经用了好多年，最近突发奇想给升级到了 Ofiice 2024。升级过程还蛮顺利的，但是安装完成后，发现点右键里没有新建Word、Excel、PowerPoint，开始菜单里 Word、Excel、PowerPoint 使用都正常…...
车载DoIP诊断框架 --- 连接 DoIP ECU/车辆的故障排除
我是穿拖鞋的汉子，魔都中坚持长期主义的汽车电子工程师。 老规矩，分享一段喜欢的文字，避免自己成为高知识低文化的工程师： 简单，单纯，喜欢独处，独来独往，不易合同频过着接地气的生活，除了生存温饱问题之外，没有什么过多的欲望，表面看起来很高冷，内心热情，如果你身…...
洛谷每日1题-------Day4__陶陶摘苹果
# P1046 [NOIP 2005 普及组] 陶陶摘苹果 ## 题目描述 陶陶家的院子里有一棵苹果树，每到秋天树上就会结出 $10$ 个苹果。苹果成熟的时候，陶陶就会跑去摘苹果。陶陶有个 $30$ 厘米高的板凳，当她不能直接用手摘到苹果的时候，就会踩…...
萌新学 Python 之模块管理
模块就是一个 python 代码文件，模块可以包含函数、类，可以提高代码复用率提高效率 python 模块主要分为三种： 1.内置模块：python 自带的模块，导入后可以直接使用，比如 import 模块名 2.第三方模块&#…...
6.3 - UART串口数据发送之中断
文章目录 1 实验任务2 系统框图3 软件设计 1 实验任务 本实验使用中断方式实现UART串口数据的连续发送。 2 系统框图 参见6.1。 3 软件设计 注意事项： 系统上电、程序下载后，此时TX FIFO虽然为空，但并不会触发空中断；空中断…...
Fisher信息矩阵（Fisher Information Matrix, FIM）与自然梯度下降：机器学习中的优化利器
Fisher信息矩阵与自然梯度下降：机器学习中的优化利器 在机器学习尤其是深度学习中，优化模型参数是一个核心任务。我们通常依赖梯度下降（Gradient Descent）来调整参数，但普通的梯度下降有时会显得“笨拙”，…...
Mysql基础-多表查询（详细版）
目录 一、表的关系类型与适用场景二、连接方式与使用场景三、易错点与注意事项四、总结 一、表的关系类型与适用场景 1. 一对一关系 场景：一个表的记录对应另一个表的唯一记录 案例：用户表 用户详情表 CREATE TABLE users (id INT PRIMARY KEY,name…...
港科大提出开放全曲音乐生成基础模型YuE:可将歌词转换成完整歌曲
YuE是港科大提出的一个开源的音乐生成基础模型，专为音乐生成而设计，专门用于将歌词转换成完整的歌曲（lyrics2song）。它可以生成一首完整的歌曲，时长几分钟，包括朗朗上口的声乐曲目和伴奏曲目。YuE 能够模拟…...
Python学习第十七天之PyTorch保姆级安装
PyTorch安装与部署 一、准备工作二、pytorch介绍三、CPU版本pytorch安装1. 创建虚拟环境2. 删除虚拟环境1. 通过环境名称删除2. 通过环境路径删除 3. 配置镜像源4. 安装pytorch1. 首先激活环境变量2. 进入pytorch官网，找到安装指令 5. 验证pytorch是否安装成功 四、…...
有关与 WSL 2 的主要区别的信息，请访问 https://aka.ms/wsl2
https://learn.microsoft.com/zh-cn/windows/wsl/install-manual#step-4—download-the-linux-kernel-update-package...
什么是 Java 中的线程安全？
回答 Java 中的线程安全（Thread Safety）指的是在多线程环境下，当多个线程同时访问和操作共享资源（如对象、变量、数据结构等）时，能够保证程序的正确性，不会出现数据不一致、竞争条件࿰…...
计算机视觉(opencv-python)入门之图像的读取,显示,与保存
在计算机视觉领域，Python的cv2库是一个不可或缺的工具，它提供了丰富的图像处理功能。作为OpenCV的Python接口，cv2使得图像处理的实现变得简单而高效。 示例图片 目录 opencv获取方式 图像基本知识 颜色空间 RGB HSV CV2常用图像处理方…...
QT:Graphics View的坐标系介绍
在 Qt 的 Graphics View 框架中，存在三种不同的坐标系，分别是 物品坐标系（Item Coordinates）、场景坐标系（Scene Coordinates） 和 视图坐标系（View Coordinates）。这三种坐标系在图形…...
530 Login fail. A secure connection is requiered(such as ssl)-java发送QQ邮箱（简单配置）
由于cs的csdN许多文章关于这方面的都是vip文章，而本文是免费的，希望广大网友觉得有帮助的可以多点赞和关注！ QQ邮箱授权码到这里去开启 授权码是16位的字母，填入下面的mail.setting里面的pass里面 # 邮件服务器的SMTP地址 host…...
vs2015下使用openmp
一 OPENMP 简介 OpenMP（Open Multi-Processing）是一个基于共享内存的并行编程API，通过编译器指令实现多线程并行开发。其核心特性包括： 1）通过简单的#pragma指令实现并行化 2）支持增量并行（逐步优化代码） 3）跨平台（Windows/Linux/macOS） 4）支持C/C++/Fortra …...
Docker 搭建 Gitlab 服务器 (完整详细版)
参考 Docker 搭建 Gitlab 服务器 (完整详细版)_docker gitlab-CSDN博客 Docker 安装 (完整详细版)_docker安装-CSDN博客 Docker 日常命令大全(完整详细版)_docker命令-CSDN博客 1、Gitlab镜像 # 查找Gitlab镜像 docker search gitlab # 拉取Gitlab镜像 docker pull gitlab/g…...
【万字长文】开源之播对话白鲸开源CEO郭炜--乐观主义的开源精神走得更远
本文为白鲸开源科技CEO郭炜1小时深度访谈全记录 来源于：开源之播」Episode15:对话郭炜–乐观主义的开源精神走得更远 大家好，我是郭炜，开源圈的“郭大侠”。作为 Apache 基金会的成员，我曾参与并孵化了多个开源项目，如…...
Chapter03-Authentication vulnerabilities
文章目录 1. 身份验证简介1.1 What is authentication1.2 difference between authentication and authorization1.3 身份验证机制失效的原因1.4 身份验证机制失效的影响 2. 基于登录功能的漏洞2.1 密码爆破2.2 用户名枚举2.3 有缺陷的暴力破解防护2.3.1 如果用户登录尝试失败次…...
SkyWalking 10.2.0 SWCK 配置过程
SkyWalking 10.2.0 & SWCK 配置过程 skywalking oap-server & ui 使用Docker安装在K8S集群以外，K8S集群中的微服务使用initContainer按命名空间将skywalking-java-agent注入到业务容器中。 SWCK有整套的解决方案，全安装在K8S群集中。 具体可参…...
云计算——弹性云计算器（ECS）
弹性云服务器：ECS 概述 云计算重构了ICT系统，云计算平台厂商推出使得厂家能够主要关注应用管理而非平台管理的云平台，包含如下主要概念。 ECS（Elastic Cloud Server）：即弹性云服务器，是云计算…...
SciencePlots——绘制论文中的图片
文章目录 安装一、风格二、1 资源 安装 # 安装最新版 pip install githttps://github.com/garrettj403/SciencePlots.git# 安装稳定版 pip install SciencePlots一、风格 简单好用的深度学习论文绘图专用工具包–Science Plot 二、 1 资源 论文绘图神器来了：一行…...
从零实现富文本编辑器#5-编辑器选区模型的状态结构表达
先前我们总结了浏览器选区模型的交互策略，并且实现了基本的选区操作，还调研了自绘选区的实现。那么相对的，我们还需要设计编辑器的选区表达，也可以称为模型选区。编辑器中应用变更时的操作范围，就是以模型选区为基准来…...
ABAP设计模式之---“简单设计原则(Simple Design)”
“Simple Design”（简单设计）是软件开发中的一个重要理念，倡导以最简单的方式实现软件功能，以确保代码清晰易懂、易维护，并在项目需求变化时能够快速适应。 其核心目标是避免复杂和过度设计，遵循“让事情保…...
听写流程自动化实践，轻量级教育辅助
随着智能教育工具的发展，越来越多的传统学习方式正在被数字化、自动化所优化。听写作为语文、英语等学科中重要的基础训练形式，也迎来了更高效的解决方案。 这是一款轻量但功能强大的听写辅助工具。它是基于本地词库与可选在线语音引擎构建，…...
《C++ 模板》
目录 函数模板 类模板 非类型模板参数 模板特化 函数模板特化 类模板的特化 模板，就像一个模具，里面可以将不同类型的材料做成一个形状，其分为函数模板和类模板。 函数模板 函数模板可以简化函数重载的代码。格式：templa…...
STM32---外部32.768K晶振（LSE）无法起振问题
晶振是否起振主要就检查两个1、晶振与MCU是否兼容；2、晶振的负载电容是否匹配 目录 一、判断晶振与MCU是否兼容 二、判断负载电容是否匹配 1. 晶振负载电容（CL）与匹配电容（CL1、CL2）的关系 2. 如何选择 CL1 和 CL…...
零知开源——STM32F103RBT6驱动 ICM20948 九轴传感器及 vofa + 上位机可视化教程
STM32F1 本教程使用零知标准板（STM32F103RBT6）通过I2C驱动ICM20948九轴传感器，实现姿态解算，并通过串口将数据实时发送至VOFA上位机进行3D可视化。代码基于开源库修改优化，适合嵌入式及物联网开发者。在基础驱动上新增…...