js数字字母验证码

最新推荐文章于 2022-12-07 11:32:10 发布

原创最新推荐文章于 2022-12-07 11:32:10 发布 · 276 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#elementui #前端 #javascript

本文将介绍如何使用JavaScript配合ElementUI库，创建一个既包含数字又包含字母的验证码功能。通过自定义验证规则和随机生成代码，确保验证码的安全性和唯一性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<!--输入验证码-->
		<input type="text" name="" id="input" value="wefg" />
		<!--验证码-->
		<input type="button" id="code" value="" />
		<!--验证-->
		<input type="button" name="yz" id="yz" value="验证" />
		
	</body>
	<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
	<script type="text/javascript">
		var inputc = $("#input");
		var code = $("#code");
		var yz = $("#yz");
		
		function createCode(){
				var	code = "";  
		       var codeLength = 4;//验证码的长度  
		       var random = 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');//随机数  
		       for(var i = 0; i < codeLength; i++) {//循环操作  
		        var index = Math.floor(Math.random()*36);//取得随机数的索引（0~35）  
		        code += random[index];//根据索引取得随机数加到code上  
		      }  
		     return code; //返回code验证码  
		}
//		获取验证码
		code.val(createCode())
		
//		校验
		function validate(){  
	      var inputCode = inputc.val().toUpperCase() //取得输入的验证码并转化为大写     
	      if(inputCode.length <= 0) { //若输入的验证码长度为0  
	        alert("请输入验证码！"); //则弹出请输入验证码  
	      }else if(inputCode != code.val() ) { //若输入的验证码与产生的验证码不一致时  
	        alert("验证码输入错误！@_@"); //则弹出验证码输入错误  
	        createCode();//刷新验证码  
	        inputc.val("");
	      }else { //输入正确时  
	        alert("合格！^-^"); 
	      } 
	    } 
		
		yz.click(function(){
			validate()
		})
		
		code.click(function(){
			code.val(createCode())
		})
		inputc.blur(function(){
			validate()
		})
	</script>
</html>