4位随机简单验证码的JS实现

最新推荐文章于 2025-04-13 21:29:42 发布

原创最新推荐文章于 2025-04-13 21:29:42 发布 · 1.1w 阅读

19 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#JS初学

前端基础学习笔记同时被 2 个专栏收录

7 篇文章

订阅专栏

JavaScript学习笔记

2 篇文章

订阅专栏

本文介绍了如何使用JavaScript实现一个简单的4位验证码功能，旨在防止机器自动化操作，如刷票和灌水。示例包括HTML、CSS和基础JS代码，适合JS初学者。

验证码是用来区分人和计算机的，通常通过模糊字符、拼图等形式达到让人能看懂且计算机无法识别的效果。我们采用验证码是为了防止机器不断登录的现象，比如现实生活中的刷票、刷帖、灌水等。在本篇用JS实现4位简单网页验证码，当然这是最基础的验证码，安全性比较低。

以下是HTML的代码：

<body onload="createCode()">
	<form>
		<center>验证码：
			<input type="text" id="input1" />
			<input type="text" id="checkNode" class="code" style="width: 55px" disabled="disabled" />
			<a href="#" onclick="createCode()">看不清楚，换一张</a><br/>
			<input type="button" name="button1" onclick="validate()" value="确定" />
		</center>
	</form>
</body>

给呈现验证码的文本框添加 disabled="disabled",将验证码设置为可读不可写。

以下是CSS的代码，是对验证码加的样式：

<style type="text/css">
		.code{
			background-image: url(securityCodeBackground2.png);/* 验证码的背景图 */
			font-family: Arial;
			font-style: italic;
			color: black;
			border: 0;
			padding:2px 3px;
			letter-spacing: 3px;
			font-weight: bolder;
			text-align: center;
		}
</style>

设置验证码在文本框中居中。

以下是JS代码：

<script type="text/javascript">
		/*在页面加载完成时生成一个随机的验证码*/
		window.onload=function(){
			createCode();
		}
		var code;/*定义一个验证码的全局变量*/
		function createCode(){/* 生成验证码的函数 */
			code="";
			var codeLength=4;
			var checkCode=document.getElementById("checkNode");
			checkCode.value="";
			var selectChar=new Array(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','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++){
				var charIndex=Math.floor(Math.random()*61);
				code+ = selectChar[charIndex];
			}
			if (code.length != codeLength) {
				createCode();
			}
			checkCode.value=code;
		}

		function validate() {/* 检验输入的验证码的正确性 */
			var inputCode = document.getElementById("input1").value.toUpperCase();
			var codeToUp=code.toUpperCase();
			if(inputCode.length<=0){
				alert("请输入验证码！");
				return false;
			}
			else if(inputCode != codeToUp){
				alert("验证码输入错误！");
				createCode();
				return false;
			}
			else{
				alert("输入正确，输入的验证码为："+inputCode);
				return true;
			}
		}
	</script>

红笔标出来的地方是我出错的地方，第一处是把id传错了，结果是不会生成验证码；第二处是在CSS中把input1写成了name的属性值，没有写id，结果是不会对用户的输入产生反应。初写JS代码，被这些笔误害惨了，花了很多时间才找到错误。以后还是应该先在火狐浏览器中调试，firebug真心对调试JS代码非常好用，花几个小时也找不到的bug一下就找出来了。

这是JS的第一篇文章，从此要打开编写JS的大门啦，，，

文章中部分内容有来自网络的借鉴