验证码的生成及校验

飞鱼同学

已于 2022-04-08 22:21:27 修改

阅读量6.5k

点赞数 1

分类专栏：前端页面文章标签： js javascript css html

于 2021-01-22 22:44:22 首次发布

本文链接：https://blog.csdn.net/qq_42487459/article/details/113006324

版权

前端页面专栏收录该内容

15 篇文章 0 订阅

订阅专栏

验证码的生成及校验

内容：验证码的刷新，确认时的验证
index.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>验证码的生成及校验</title>
		<style type="text/css">
			div{
				padding: 0px 0px;
				margin: 0px auto;
			}
			a{
				color: blue;
				font-style: 
			}
			input{
				width: 80px;
				padding: 5px;
				border-radius:8px;
				margin-top: 10px;
				border: 1px solid black;
			}
			.done{
				width: 200px;
				margin: 0 auto;
			}
			.inone{
				width: 40px;
				background: burlywood;
				border:  0px none;
				margin: 5px 75px;
			}
		</style>
	</head>
	<body>
		<div class="done">
			<div class="dtwo">
				<span id="showid"></span>
				<a id="refres">看不清，换一张</a>
			</div>
			<div class="dthree">
				<label for="inputCode">验证码：</label>
				<input type="text" name="inputCode" id="inputCode" value="" />
				<span id="text_show"></span>
			</div>
			<input type="button" class="inone" id="button" value="确定" />			
		</div>
		<script type="text/javascript">
			//1. 生成验证码
			//2. 6位数验证码，随机生成6位，内容为数字＋字母
			// 数组中随机取数
			
			window.onload = function(){
				var res = getCode();
				console.log(res);
				function getCode(){
					var 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','w','x','y','z','Q','W','E','R','T','Y','U','I','O','P','A','S',
					'D','F','G','H','J','K','L','Z','X','C','V','B','N','M'];
					var str = '';
					for (var i=0;i<6;i++) {
						var num = Math.round(Math.random()*(61-0)+0);
						//console.log(num);
						str +=arr[num];
					}
					return str;
				}
				document.getElementById('showid').innerHTML = res;
				//点击事件
				document.getElementById('refres').onclick = function(){
					document.getElementById('showid').innerHTML = getCode();
				}
			}
			
			//验证  对比
			document.getElementById('button').onclick = function(){
				var code = document.getElementById('showid').innerText;
				var inpurCode = document.getElementById('inputCode').value;
				if (code != inpurCode) {
					alert("您输入的验证码不正确！！")
					document.getElementById('inputCode').value=''
					return false;
				}
			
			}
		</script>
	</body>
</html>

运行结果
在这里插入图片描述
码完睡觉！！！

飞鱼同学

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
1
评论
验证码的生成及校验

验证码的生成及校验内容：验证码的刷新，确认时的验证index.html<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>验证码的生成及校验</title> <style type="text/css"> div{ padding: 0px 0px; margin: 0px auto; } a{
复制链接

扫一扫