search

Home >Web Front-end >JS Tutorial >How to make verification code in javascript

How to make verification code in javascript

王林
王林Original
2021-10-26 16:54:073576browse

Javascript method to create verification code: [var code; window.onload = function creatCode() { code=""; var codeLength = 4; var checkCode = ...}].

How to make verification code in javascript

#The operating environment of this article: windows10 system, javascript 1.8.5, thinkpad t480 computer.

Use javascript to implement the login verification code function. The following is the specific implementation code:

test.html

<!DOCTYPE html>
<html>  
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<head>  
	<title>验证码</title>   
	<script src = "checkCode.js">   </script>  
</head>  
<body>  
	<div>  
		<input type = "text" id = "input"/>  
		<input type = "button" id="code" οnclick="createCode()"/>  
		<input type = "button" value = "验证" onclick = "validate()"/>  
	</div>  
</body> 
</html>

checkCode.js

var code ; //在全局定义验证码   
 
window.onload = function createCode(){  
	 code = "";   
	 var codeLength = 4;//验证码的长度  
	 var checkCode = document.getElementById("code");   
	 var random = new Array(0,1,2,3,4,5,6,7,8,9,&#39;A&#39;,&#39;B&#39;,&#39;C&#39;,&#39;D&#39;,&#39;E&#39;,&#39;F&#39;,&#39;G&#39;,&#39;H&#39;,&#39;I&#39;,&#39;J&#39;,&#39;K&#39;,&#39;L&#39;,&#39;M&#39;,&#39;N&#39;,&#39;O&#39;,&#39;P&#39;,&#39;Q&#39;,&#39;R&#39;,  
	 &#39;S&#39;,&#39;T&#39;,&#39;U&#39;,&#39;V&#39;,&#39;W&#39;,&#39;X&#39;,&#39;Y&#39;,&#39;Z&#39;);//随机数  
	 for(var i = 0; i < codeLength; i++) {//循环操作  
		var index = Math.floor(Math.random()*36);//取得随机数的索引（0~35）  
		code += random[index];//根据索引取得随机数加到code上  
	}  
	checkCode.value = code;//把code值赋给验证码  
}  
//校验验证码  
function validate(){  
	var inputCode = document.getElementById("input").value.toUpperCase(); //取得输入的验证码并转化为大写        
	if(inputCode.length <= 0) { //若输入的验证码长度为0  
		alert("Empty Code!"); //则弹出请输入验证码  
	}         
	else if(inputCode != code ) { //若输入的验证码与产生的验证码不一致时  
		alert("Error Code"); //则弹出验证码输入错误  
		createCode();//刷新验证码  
		document.getElementById("input").value = "";//清空文本框  
	}         
	else { //输入正确时  
		alert("OK"); //弹出^-^  
	}             
}

When clicked Code that does not move the position: 

<p class="red"><a href="javascript:;" οnclick="createCode()">看不清？</a></p>

Recommended learning: javascript video tutorial

The above is the detailed content of How to make verification code in javascript. For more information, please follow other related articles on the PHP Chinese website!

Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：How to find the area of ​​a graphic in javascriptNext article：How to find the area of ​​a graphic in javascript

Related articles

See more