原生JS项目练习——验证码的生成及教验

原创

已于 2022-10-06 18:33:43 修改 · 1.4k 阅读

20 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #html #原生js #随机验证码 #验证码验证

于 2022-10-06 13:10:16 首次发布

一、主要功能介绍：

1、通过for循环生成生成六位随机验证码

2、通过for循环随机生成验证码颜色

3、窗口加载事件，窗口一加载就调用函数，重置验证码

4、按钮点击事件，一点击就调用函数，重置验证码

5、input输入框已失去焦点就进行验证

6、正则表达式验证输入内容是否符合条件

7、如果输入验证码和随机生成的验证码相同，在后方显示绿色正确标签

二、详细步骤解析：

HTML和CSS代码：

html代码:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>验证码</title>
    <link rel="s

最低0.47元/天解锁文章

200万优质内容无限畅学

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

周百万.

关注关注

5
点赞
踩
20

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
打赏
打赏
打赏举报

举报

专栏目录

Javascript验证码的生成和验证，源代码

qq_50482136的博客

08-13

530

JavaScript验证码生成和验证，源代码，

JavaScript基础 - 经典案例2 - 生成校验验证码

never_stop_study的博客

09-19

738

JavaScript基础案例

参与评论您还未登录，请先登录后发表或查看评论

js验证码生成

05-24

js验证码生成

js生成验证码

宋发元

08-16

1237

js生成验证码 获取验证码 var btn = document.getElementById("btn"); var code = document.getElementById("code"); btn.onclick = function () { console.log("aaa"); code.innerHTM

js实现生成随机验证码

最新发布

weixin_46058007的博客

05-26

437

本文介绍了手机验证码前端校验（不区分大小写）的实现方法。通过随机生成包含大小写字母和数字的4位验证码，并添加背景样式模拟图片效果。

JavaScript生成验证码

qq_44927688的博客

12-07

1119

通过Math.random()生成0~1的随机数，toString(36)将生成的随机数转换为36进制，因为36进制会包含所有的小数和小写字母，substr(3,5)截取字符串，从第3位起往后取5位。前两位是0，所以只从第3位起。具体详情如下：html部分 JavaScript部分 style样式部分

JS 生成验证码

足迹

08-15

901

1. JS 代码如下 var code; function romdon(){ code = ""; var codeLength = 4;//验证码的长度 var checkCode = document.getElementById("accp"); var random = new Array(0,1,2,3,4,5,6,7,8,

【5天打卡】学习Lodash的第二天——常用api学习

happy921212的博客

04-25

1121

以上就是今天的学习，关注我，大家一起进步！文接上篇，大家好，最近，我在学习Lodash这个工具库。Lodash最初是Underscore的分支，后来逐渐壮大后自立门户。Lodash 功能比 Underscore 更丰富，且 Underscore 已有3、4年没有更新，所以推荐使用 Loadash。但是和原生相比还是推荐使用ES6等。Lodash。

原js笔记

Pwsifeng的博客

01-10

2884

s原生JS笔记电话：17339853876（微信同号）二阶段学习内容 1、B/S架构（web结构） [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-4LYi0Arv-1641803458638)(img1628929434621.png)] 2、前端工程师的工作人机交互前后端交互 3、HTML、CSS、JS的作用和关系一个网页由三部分组成：HTML、CSS、Javascript HTML：结构（静态） [外链图片转存失败,源站可能有防盗链

javascript生成验证码

Lau的博客

01-06

1302

思路：先定义一个数组，里面存放着三个元素分别为随机生成大写字母，小写字母，数字的asc码值并转为字符串，再在下面进行循环拼接，循环次数设为需要的验证码位数即可。 let idCode =(obj,num)=>{ let arr = [String.fromCharCode(Math.round(Math.random()*25+97)),String.fromCharCode(Math.round(Math.random()*25+65)),Math.round(Math.random()*

打验证码练习机

04-11

VB制作的简易打验证码练习机，没经过美化，为新手提供思路

JS验证码生成

JerryBro的博客

01-30

297

纯数字组成的验证 //生成n位验证码 每一个数字的范围 0~9 function numTestCode(n){ var arr = []; //存储生成的数字 for(var i = 0; i < n; i++){ var num = p...

js生成验证码并验证

郭岚的博客

10-19

1228

js生成验证码并验证 [html] view plain copy html> head> title>验证码title> style type="text/css"> #code {

JS实现生成验证码

weixin_43966538的博客

05-27

413

JS实现生成验证码 Math.random() 函数返回一个浮点, 伪随机数在范围从0到小于1，也就是说，从0（包括0）往上，但是不包括1（排除1） Math.floor() 返回小于或等于一个给定数字的最大整数。 function createRndCode(){ var chars = ['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','z','A'

JS生成登录验证码