原生JS实现随机生成指定位数的验证码并校验

最新推荐文章于 2021-07-31 19:43:46 发布
最新推荐文章于 2021-07-31 19:43:46 发布
阅读量2.2k 收藏 3
点赞数 1
分类专栏： JavaScript 文章标签： 验证码 javascript HTML CSS
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Qianqianliuliu/article/details/78376674
版权
这篇博客介绍了如何使用原生JavaScript生成指定长度的验证码，并实现大小写不敏感的验证码校验。通过生成随机Unicode编码对应字母或数字，再进行校验，实现了功能完备的验证码系统。
摘要由CSDN通过智能技术生成

功能：1.生成随机指定位数的验证码，生成的验证码字符可以是字母或数字
2. 忽略字母大小写比较验证码是否输入正确

一、求字母和数字的Unicode 编码

用str.charCodeAt()；来求解：

0~9: 48-57
A-Z: 65-90
a-z: 97-122

二、利用Math.random（）求随机数

str.formCharCode()从字符编码创建一个字符串

校验时统一转化为大写或者小写，这样子验证时可以忽略验证码的大小写

三、效果图

最低0.47元/天 解锁文章
文盗任情
关注
  • 1
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
js生成四位验证码并验证
08-31
js生成四位验证码并验证，一个可行的demo，记得给好评哦。
原生js生成随机验证码
qq_43188340的博客
09-20 380
原生js生成随机验证验证码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta h...
用JavaScript生成随机验证码
苏某人的传奇世界
10-22 4107
说明:复制以下代码,即可生成效果.http://www.w3.org/1999/xhtml" >    无标题页                             function validteCode(){    var codes = new Array(4);       //用于存储随机验证码    var colors = new Array("Red","Green",
用JS,编写一个函数，生成4位数字的验证码 利用随机数
yewengao的博客
07-31 3851
// 第一种方法 function yanzhengma() { // Math.round()函数，表示四舍五入 Math.random()函数，表示随机数生成 // var num1 = Math.round(Math.random() * 10); // var num2 = Math.round(Math.random() * 10); // var num3 = Math.round(Math.
JavaScript 随机生成指定位数的验证码
ByRisonBoy
10-07 1187
代码片段： &lt;html&gt; &lt;title&gt;随机验证码&lt;/title&gt; &lt;body&gt; &lt;form name="form1"&gt; 输入验证码的位数：&lt;input name="num" type="text"/&gt;
原生JS生成指定位数的验证码
01-22
使用原生JS生成指定位数的验证码，验证码包括字母和数字 ##思路：使用String的fromCharCode方法将给定范围的随机数转为大小写字母，再通过随机数决定数组当前位置为大写字母，小写字母或者是数字，函数传入的参数...
原生js实现验证码功能
10-20
在本文中，我们将深入探讨如何使用原生JavaScript实现一个简单的验证码功能。验证码是网页安全的重要组成部分，用于防止自动机器人和恶意脚本进行非法操作。以下就是实现这一功能的关键知识点： 1. **HTML 结构**：...
js实现随机数字字母验证码
12-08
`createCode()`函数首先清空`code`变量，然后根据`codeLength`设定的长度生成随机的数字或字母，并将其添加到`code`中。最后，将生成的新验证码赋值给页面上的验证码元素。 验证功能由`validate()`函数实现： ```...
原生js生成图片验证码
01-18
本文实例为大家分享了js生成图片验证码的具体代码，供大家参考，具体内容如下 html代码 <!DOCTYPE html> <html> <head> <meta charset=UTF-8> <title>图形验证码</title> &lt...
工具类-随机产生指定位数的验证码
Chyson
04-23 342
public class ImageUtil { private static String[] strs = { "a", "b", "c", "d", "e", "f", "g", "h", "i", "j", "k", "m", "n", "p", "q", "r", "s", "t", "u", "v", "w", "x", "y", "z", "2", "
JS 最少代码实现随机十位字符串
04-26
NULL 博文链接：https://onestopweb.iteye.com/blog/2356166
JavaScript：随机生成一个指定长度的验证码
Bule_daze的博客
09-17 260
function randomCode(len) { const allStr = 'azxcvbnmsdfghjklqwertyuiopZXCVBNMASDFGHJKLQWERTYUIOP0123456789.*&^%$#@!~'; let code = ''; for (let index = 0; index < len; index++) { code += allStr.charAt(Math.floor(Math.random() * 72)); } c
利用javascript生成数字加字母的随机验证码
qq_39485970的博客
09-23 457
&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt;     &lt;title&gt;验证码&lt;/title&gt;     &lt;meta charset="utf-8"&gt;     &lt;script type="text/javascript"&gt;         window.onload=
随机生成验证码（JS）
weixin_44970764的博客
05-29 549
效果展示 实现原理 　　1. html：一般就是一个div：<divid="code"></div>，样式根据需求设计。 　　2.JS：1）将所有的验证码所用的字符放在一个字符串中 　　　　　 2）在这个字符串的字符个数以内，随机生成索引号 　　　　　3）根据索引号查找对应字符，拼接成验证码的字符串 代码实现 HTML： &...
JS实现随机验证码功能
guduershi的博客
03-21 394
1、验证码 验证是网页常出现的一个验证点，所谓验证码类型有很多，下面代码只是实现一个简单的验证功能。                                   2、随便加点样式 #code{                   font-family:Arial;                   font-style:italic;      
js 生成任意长度的随机数
weixin_39150852的博客
09-29 1674
function randomWord(length=32){//默认32位 //由以下元素组成 let arr=['0','1','2','3','4','5','6','7','8','9','A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R','S','T','U','V'...
pyton3 随机生成 数字和字母的验证码
Color的博客
07-24 1216
def create_code(): while True: code = random.randint(0x30, 0x5A) if code >= 0x30 and code = 0x41 and code <=0x5A:#数字字母的区段 return chr(code) def security_code():#验证码
js随机生成随机数（验证码）
AnniceCui的博客
09-24 3274
1.我们要先创建一个数组 里面包含写大小写字母还有数字 let codeArr = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', ...
js生成永不重复随机码
爱折腾的程序员
07-09 2520
function createUniqueId(n) { var random = function() { // 生成10-12位不等的字符串 return Number(Math.random().toString().substr(2)).toString(36); // 转换成十六进制 }; var arr = [...
原生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、付费专栏及课程。

余额充值