JavaScript验证码

柔光的暖阳◎ 2023-06-24 08:19 1阅读 0赞

验证码在生活中很常见，所以做了个验证码案例：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0NzY4NTY0_size_16_color_FFFFFF_t_70]  
感觉蛮简单的，就不解释了，代码里有注释，如下：

var span =  document.getElementsByTagName('span')[0];
    		var a = document.getElementsByTagName('a')[0];
    		var input = document.getElementsByTagName('input')[0];
    		var btn = document.getElementsByTagName('button')[0];
    		var code = "";
    
    		//生成验证码
    		function createCode(){ 
    			code="";
    			var codelength = 6; //设置验证码位数；
    
    			//设置验证码生成数组，验证码从中取直；
    			var codeArr = new Array(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','z','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');
    
    			//随机获取验证码数组下标，生成验证码
    			for(var i=0; i<codelength; i++){ 
    				code += codeArr[Math.floor(Math.random()*codeArr.length)];
    			}
    
    			span.innerText = code;
    			return code;
    		}
    
    		//cresteCode();
    		window.onload = function(){ 
    			createCode();
    		}
    
    		a.onclick = function(){ 
    			createCode();
    			return false;
    		}
    
    		btn.onclick = function(){ 
    
    			if(input.value == ""){ 
    
    				alert("验证码为空，请输入验证码！");
    
    			}else if(input.value.toLocaleUpperCase() == code.toLocaleUpperCase()){ 
    
    				alert("验证码输入正确！");
    
    			}else { 
    
    				alert("验证码输入错误，请重新输入验证码！");
    
    				createCode();
    			}
    		}

html：

<div id="wrap">
    		<div id="code">
    			<span></span>
    			<a href="">看不清楚换一个</a>
    		</div>
    		<div id="checkcode">
    			<ul>
    				<li>请输入验证码：<input type="text"></li>
    				<li><button>验证</button></li>
    		</div>
    	</div>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0NzY4NTY0_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20191221222310940.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0NzY4NTY0,size_16,color_FFFFFF,t_70

发表评论取消回复

表情：

评论列表（有 0 条评论，1人围观）

还没有评论，来说两句吧...

相关阅读

相关 JavaScript验证码

验证码在生活中很常见，所以做了个验证码案例： ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_

柔光的暖阳◎/ 2023年06月24日 08:19/ 0 赞/ 2 阅读

相关 JavaScript实现随机验证码并验证

前言在许多登录页面里，我们都可以看到验证码的身影，每次登录都需要重新输入验证码。这个功能非常重要，它可以有效防止这种问题对某一个特定注册用户用特定程序暴力破解方式进行不

àì夳堔傛蜴生んèń/ 2023年01月13日 15:00/ 0 赞/ 240 阅读

相关 Javascript前端验证码的实现

1、Javascript前端验证码的实现 2、前端代码 <!DOCTYPE html> <html> <head> <

- 日理万妓/ 2022年09月24日 02:28/ 0 赞/ 167 阅读

相关 JavaScript编写验证码

<head> <meta charset="UTF-8"> <title>验证码</title> </head> <bo

向右看齐/ 2022年06月09日 14:41/ 0 赞/ 227 阅读

相关 javascript时间验证源码

js时间验证源码 (1) 短时间，形如 (13:04:06) function isTime(str) \{ var a ＝ str.match(/^(\

水深无声/ 2022年04月01日 09:10/ 0 赞/ 231 阅读

相关 javascript实现验证码功能

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

以你之姓@/ 2022年03月26日 01:06/ 0 赞/ 415 阅读

相关 tp5 验证码验证验证码刷新

首先使用`Composer`安装`think-captcha`扩展包： composer require topthink/think-captcha 在控制器中使

我会带着你远行/ 2022年02月23日 14:16/ 0 赞/ 370 阅读

相关 javascript随机验证码

随机验证码 box { width: 100px; height: 40px;

川长思鸟来/ 2022年01月28日 00:29/ 0 赞/ 333 阅读

相关验证码---短信验证码

最近自学了短信的验证码实现。以下是自己用的一种方法实现的完整的过程。短信验证登陆(前端+后台) 1、前端填写手机号以及点击触发，以电话号码为参数调用发送验证登录短信方法并

青旅半醒/ 2022年01月09日 08:53/ 0 赞/ 656 阅读

相关 JavaScript实现页面动态验证码

引言：现在很多在用户登陆或注册的时候为了防止程序攻击，加入了动态验证的技术，一般是让用户输入随即生成的验证码来实现。我自己写了一个没有跟后台交互的，就在前端验证，发

太过爱你忘了你带给我的痛/ 2021年07月24日 16:48/ 0 赞/ 402 阅读