无需后端接口，用原生js轻松实现验证码

最新推荐文章于 2023-12-21 10:39:51 发布
最新推荐文章于 2023-12-21 10:39:51 发布
阅读量551 收藏 2
点赞数
分类专栏： JS实战记录 文章标签： js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_37635012/article/details/107559571
版权

验证码

我们在登录有些网站的时候，能看到要我们输入验证码，验证码作用是验证你是否是机器人。今天，我们一起学习不用调取后端接口，前端实现简单的验证码。

下面实现一个纯数字的6位数验证码
在这里插入图片描述
结果如下，每次刷新都弹出不一样的6位数：
在这里插入图片描述
下面实现的是数字与字符组成的验证码
0~9
a-z 97~122
A~Z 65~90
随机：0~122
方法：随机ASCII码值
在这里插入图片描述
结果如下，每次刷新都弹出不一样的6位字符与数数混合的验证码：
在这里插入图片描述

验证码小demo

先看下效果:
在这里插入图片描述
当我们点击"获取验证码"按钮后，结果如下:
在这里插入图片描述
每点击一次"获取验证码"

了解本专栏 订阅专栏 解锁全文 超级会员免费看
百思不得小李
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
订阅专栏
js案例---验证码
forever_zc的博客
11-24 824
js案例
js发送手机验证码
06-29
在IT行业中，JavaScript...综上所述，"js发送手机验证码"涉及到的技术点主要包括JavaScript的AJAX交互、前端与后端的数据交换、用户验证逻辑以及安全性考量。开发者需要掌握这些知识，以提供流畅、安全的用户体验。
原生简单验证码实现
csdn727232616的博客
09-26 284
原生JavaScript+canvas实现的随机验证码
springboot——kaptcha
hebtu666
10-29 3370
导入包： <dependency> <groupId>com.github.penggle</groupId> <artifactId>kaptcha</artifactId> <version>2.3.2</version> </dependency> 配置类： p...
js学习--验证码的实现
lmd_hdx的博客
06-17 3763
使用js制作验证码，学习中随笔练习有错可以指出。
某度旋转验证码 js逆向分析
最新发布
活捉一只小菜鸟的博客
12-21 1737
最新某度旋转验证码v2
php验证码生成（原生，自带演示demo）
06-21
`jquery.js`是一个JavaScript库，可能用来处理用户输入的验证，比如在用户输入验证码时实时检查其正确性，或者在提交表单前验证验证码。 `Validate.php`可能是后端验证验证码的脚本。当用户提交表单时，服务器会...
原生js2020年最新整理
09-28
JavaScript，简称JS，是Web开发中的核心语言，尤其在2020年，其重要性不言而喻。本篇内容主要涵盖了JS的基础知识，ECMAScript的发展历程，以及前端开发的演变和相关技术栈。 首先，我们来了解一下ECMAScript的发展...
原生双端影视详细视频搭建教程（已去除验证码注册功能）
11-15
"前端"目录可能包含了应用的用户界面代码，通常使用HTML、CSS和JavaScript实现。对于双端影视APP，前端设计需要注重用户体验，确保视频加载速度快，界面美观且易于导航。现代前端框架如React Native、Flutter或Ionic...
apicloud实现注册界面
01-27
在IT行业中，APICloud是一个强大的混合移动应用开发平台，它允许开发者使用JavaScript进行原生App的开发，大大降低了移动端应用的开发门槛。本篇将详细讲解如何利用APICloud技术实现一个用户注册界面，并涵盖获取...
JavaScript图形验证码的实现
11-27
JavaScript验证码的简单实现，有简单的随机数字，也有较复杂的图形验证码， 这种图形验证码很高效简洁，使用爬虫是有较大难度的爬取网站信息的。 而且这种图形验证码的应用场景非常广，可用在登录注册等等需要上传信息的地方。
前端的短信验证码如何做（和后端配合）
热门推荐
jiang7701037的博客
01-25 1万+
前言 阅读本篇文章的要求：懂前端的HTML,CSS,Javascript，ajax；后端的php（或者其它编程语言也行）懂一点，数据库。 这篇文章写了四个小时，希望大家怀着一颗感恩的心阅读，谢谢！感谢您的点赞，让我有继续写下去的兴趣和勇气，谢谢！ 一、前提 申请短信服务：由于发送短信是需要电信行业的公司（中国电信，移动，联通等），所以，我们必须要和电信行业的公司去沟通。不过不要害怕，现在的社会服务很好，有很多的SP（服务提供商）帮你做好了此事。他们作为你和电信行业之间的桥梁，帮你做好了和电...
Javascript代码实现验证码的校验
yytIcon的博客
08-07 6176
之前有分享过如何利用H5+Javascript生成验证码（点击看我之前的博客）。今天主要是想分享如何利用随机数来生成一组验证码，并通过js代码来验证输入的验证码是否匹配。 先看效果图： 实现的总体效果为：点击“验证按钮”或者是点击验证码本身，验证码会重新生成。 在输入框中输入任意与验证码不符的字符，则会提示“验证码输入错误”。 输入框中输入的字符（注意：这里是可以不区分大小写的）与验证...
js验证码
Super_Gods的博客
08-18 443
html验证码 javascript 代码实现<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <style type="text/css"> .code{ background-
JS实现验证码
zlq_CSDN的博客
03-31 5033
温馨提示：不推荐使用下面方法（及前端验证码校验）进行校验，因为只进行前台验证而不进行后台服务器端的校验，黑客大咖们很容易攻破这道防线，不能够很好的保证网站的安全性。 <!Doctype html> <head> <title>js验证码</title> <style type="text/css"> .co...
js简单实现验证码
qq_43399648的博客
05-18 348
个人的笔记 实现验证码的切换 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> </head> <body> <div> 验证码 </div> <di...
原生js生成随机验证码
weixin_34324081的博客
10-21 151
&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;js实现随机验证码功能&lt;/title&gt; &lt;style&gt; *{margin:0;padding:0
牛逼了啊！用 JS 实现了识别网页验证码的功能！
LuckyWinty的博客
07-21 2235
点击上方前端Q，关注公众号回复加群，加入前端Q技术交流群作者：LeoNaNhttps://zhuanlan.zhihu.com/p/28483558很高兴大家喜欢！Github：leon...
原生JavaScript实现 验证码
kiku
08-02 462
原生JavaScript实现 验证码 一，HTML代码 <body onload='createCode()'> <div id="div1"> 请输入验证码：<input type = "text" id = "input"/> 验证码：<input type="button" id="code" onclick="createCode(...
原生js实现验证码
05-25
可以使用原生 JavaScript 实现验证码。以下是一个简单的例子： HTML： ```html <label for="captcha">验证码：</label> <input type="text" id="captcha"> <canvas id="captchaCanvas"></canvas> <button id="refreshCaptcha">刷新验证码</button> ``` JavaScript： ```javascript var canvas = document.getElementById("captchaCanvas"); var ctx = canvas.getContext("2d"); // 生成随机验证码 function generateCaptcha() { var chars = "0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ"; var captchaLength = 6; var captcha = ""; for (var i = 0; i < captchaLength; i++) { captcha += chars.charAt(Math.floor(Math.random() * chars.length)); } return captcha; } // 绘制验证码 function drawCaptcha() { var captcha = generateCaptcha(); canvas.width = 100; canvas.height = 40; ctx.font = "bold 20px sans-serif"; ctx.fillStyle = "#000"; ctx.fillText(captcha, 25, 25); // 添加干扰线 for (var i = 0; i < 5; i++) { ctx.beginPath(); ctx.moveTo(Math.floor(Math.random() * canvas.width), Math.floor(Math.random() * canvas.height)); ctx.lineTo(Math.floor(Math.random() * canvas.width), Math.floor(Math.random() * canvas.height)); ctx.strokeStyle = "#000"; ctx.stroke(); } return captcha; } // 刷新验证码 document.getElementById("refreshCaptcha").addEventListener("click", function() { var captchaInput = document.getElementById("captcha"); captchaInput.value = ""; var captcha = drawCaptcha(); }); // 验证输入的验证码是否正确 document.getElementById("captcha").addEventListener("input", function() { var captchaInput = document.getElementById("captcha"); if (captchaInput.value.length == 6 && captchaInput.value.toUpperCase() == captcha) { alert("验证码正确！"); } }); ``` 这个例子首先定义了一个 `generateCaptcha` 函数来生成随机的验证码，然后定义了一个 `drawCaptcha` 函数来绘制验证码，并在验证码中添加了一些干扰线以增加难度。最后使用 `addEventListener` 为刷新按钮和验证码输入框添加事件监听器。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值