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

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

news 2026/4/13 6:12:53

验证码介绍及生成与验证（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

Like关联优化

1、问题 最近遇到这样有趣的写法 with temp as (select wm_concat(distinct code) code from t1 ) select count(1) from (select distinct t2.id from t2,temp a where (a.code not like %||substr(t2.code,1,4)||%) ) a计划&#xff1a;语句为了排除不在板块的单位&#xff0…...

编程新知 2026/4/13 6:09:06

Phi-4-Reasoning-Vision一键部署：适配A100/H100集群的多卡扩展部署方案

Phi-4-Reasoning-Vision一键部署&#xff1a;适配A100/H100集群的多卡扩展部署方案 1. 项目概述 Phi-4-Reasoning-Vision是基于微软Phi-4-reasoning-vision-15B多模态大模型开发的高性能推理工具&#xff0c;专为专业级GPU集群环境设计。这个工具解决了大参数多模态模型在实际…...

编程新知 2026/4/13 6:03:05

022.模型评估指标：mAP、Precision、Recall、F1 Score的计算与解读

上周调一个YOLOv5的产线缺陷检测模型&#xff0c;测试集准确率看着挺高&#xff0c;上线后误报却把生产线搞停了。现场工程师抱怨&#xff1a;“你们这模型怎么乱报警&#xff1f;” 打开日志一看&#xff0c;模型把几个正常工件上的划痕阴影也框出来了——典型的精度不足问题。…...

编程新知 2026/4/13 5:12:00

MATLAB矩阵操作：高效删除指定行与列的实用技巧

1. MATLAB矩阵操作基础入门 刚接触MATLAB的朋友可能会被它强大的矩阵运算能力震撼到。作为一款专业的数学软件&#xff0c;MATLAB对矩阵的处理简直就像瑞士军刀一样顺手。今天我要分享的是矩阵操作中最基础但特别实用的技巧——删除指定行和列。 记得我第一次处理实验数据时&am…...

编程新知 2026/4/13 5:09:47

用Python和NumPy手把手实现SVD图片压缩：从原理到实战，5分钟搞定你的第一张压缩图

用Python和NumPy手把手实现SVD图片压缩&#xff1a;从原理到实战&#xff0c;5分钟搞定你的第一张压缩图 当你第一次听说"奇异值分解"这个名词时&#xff0c;脑海中是不是立刻浮现出一堆复杂的数学公式&#xff1f;别担心&#xff0c;今天我们要用最直观的方式——图…...

编程新知 2026/4/13 5:01:04

手把手教你用Python玩转CALCE锂电池数据集：从数据清洗到LSTM/Transformer模型实战

手把手教你用Python玩转CALCE锂电池数据集&#xff1a;从数据清洗到LSTM/Transformer模型实战 锂电池作为新能源领域的核心组件&#xff0c;其剩余寿命预测一直是工业界和学术界的研究热点。CALCE数据集作为马里兰大学发布的权威锂电池老化数据&#xff0c;包含了多组电池在不同…...

编程新知 2026/4/13 4:37:30

扁率和椭率详解

扁率和椭率详解 引言 在几何学、地球科学、天文学等领域，扁率和椭率是两个非常重要的概念。它们描述了几何体（尤其是旋转椭球体）的形状特征，对于理解地球形状、天体运动以及各种工程应用都具有重要意义。本文将深入探讨扁率和椭率的概念、定义、数学推导、应用场景以及使…...

编程新知 2026/4/13 4:23:13

鸿蒙Flutter实战：30.在Pub上发布鸿蒙化插件

背景 当我们编写好鸿蒙化插件后&#xff0c;特别是以 xxx_ohos 命名的联合插件&#xff0c;可以将其发布到 pub.dev 仓库中&#xff0c;以便其他开发者可以轻松地使用。 步骤 准备工作 包括但不限于&#xff1a; 做好插件的测试&#xff0c;尤其要在真机上进行测试&#x…...

编程新知 2026/4/13 4:05:00

嵌入式无锁任务队列：裸机与RTOS下的零内存分配串行化方案

1. 项目概述TaskQueue 是一个轻量级、无依赖的嵌入式任务序列化库&#xff0c;专为资源受限的裸机&#xff08;Bare-Metal&#xff09;或实时操作系统&#xff08;RTOS&#xff09;环境设计。其核心工程目标明确且务实&#xff1a;在不引入复杂同步原语&#xff08;如互斥锁、信…...

编程新知 2026/4/13 3:48:54

大模型幻觉率下降83%的关键不在Prompt，而在图谱对齐粒度——2026奇点大会实测数据首曝

第一章&#xff1a;2026奇点智能技术大会&#xff1a;大模型知识图谱融合 2026奇点智能技术大会(https://ml-summit.org) 大模型与知识图谱的深度协同正从理论探索迈入工程落地新阶段。在2026奇点智能技术大会上&#xff0c;多家头部机构联合发布了开源框架KG-LM Bridge&#…...

编程新知 2026/4/13 3:11:37