html页面实现登录验证码功能（纯前端）

最新推荐文章于 2024-06-16 01:19:55 发布

爱学习的大雄

最新推荐文章于 2024-06-16 01:19:55 发布

阅读量2.1w

点赞数 19

文章标签：前端 html javascript

本文链接：https://blog.csdn.net/qq_49137582/article/details/125253568

版权

html+css+javascript简易实现注册或登录时实现验证码功能：

原文链接：https://blog.csdn.net/weixin_41472431/article/details/90732468

<!DOCTYPE HTML>
<html>
	<head>
		<title>注册模块</title>
		<meta charset="utf-8">
		<style>
			#vcode {
				height: 35px;
				width: 40%;
				font-size: 15pt;
				margin-left: 15%;
				border-radius: 5px;
				border: 1;
				padding-left: 8px;
			}
			#code {
				color: #ffffff;
				/*字体颜色白色*/
				background-color: #000000;
				font-size: 20pt;
				font-family: "华康娃娃体W5";
				padding: 5px 35px 10px 35px;
				margin-left: 5%;
				cursor: pointer;
			}
			#search_pass_link {
				width: 70%;
				text-align: right;
				margin: 0 auto;
				padding: 5px;
			}
			.btns {
				width: 30%;
				margin-left: 13%;
				height: 40px;
				border: 0;
				font-size: 14pt;
				font-family;
				"微软雅黑";
				background-color: #FC5628;
				color: #ffffff;
				cursor: pointer;
				/*设置指针鼠标的样式*/
				border-radius: 20px;
				/*设置圆角样式*/
				border: 0;
			}
		</style>
	</head>

	<body leftmargin="0" onload="changeImg()">
		<div class="main_bar">
				<form action="login.html" onsubmit="return check()">
						<input type="text" id="vcode" placeholder="验证码" value="验证码" onfocus="this.value=''" onblur="if(this.value=='')this.value='验证码'" /><span id="code" title="看不清，换一张"></span>
						<div id="search_pass_link">
						</div>
						<input type="submit" id="submit" value="登录" class="btns" onmouseover="this.style.backgroundColor='#FF8D00'" onmouseout="this.style.backgroundColor='#FC5628'">
						<input type="reset"  value="取消" class="btns" onmouseover="this.style.backgroundColor='#FF8D00'" onmouseout="this.style.backgroundColor='#FC5628'">

				</form>
		</div>
	</body>


	<script type="text/javascript">

		var code; //声明一个变量用于存储生成的验证码
		document.getElementById("code").onclick = changeImg;
		function changeImg() {
			var arrays = new Array(
				'1', '2', '3', '4', '5', '6', '7', '8', '9', '0',
				'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'
			);
			code = ''; //重新初始化验证码
			//alert(arrays.length);
			//随机从数组中获取四个元素组成验证码
			for(var i = 0; i < 4; i++) {
				//随机获取一个数组的下标
				var r = parseInt(Math.random() * arrays.length);
				code += arrays[r];
			}
			document.getElementById('code').innerHTML = code; //将验证码写入指定区域
		}


		//效验验证码(表单被提交时触发)
		function check() {

			//获取用户输入的验证码
			var input_code = document.getElementById('vcode').value;
			if(input_code.toLowerCase() == code.toLowerCase()) {
				//验证码正确(表单提交)
				return true;
			}
			alert("请输入正确的验证码!");
			//验证码不正确,表单不允许提交

			return false;

		}

        </script>
</html>

爱学习的大雄

关注

19
点赞
踩
187

收藏

觉得还不错? 一键收藏
打赏
4
评论
html页面实现登录验证码功能（纯前端）

html+css+javascript简易实现注册或登录时实现验证码功能：原文链接：https://blog.csdn.net/weixin_41472431/article/details/90732468
复制链接

扫一扫