javascript如何制作验证码-js教程-PHP中文网

首页

web前端

js教程

javascript如何制作验证码

王林

Oct 26, 2021 pm 04:54 PM

javascript 验证码

javascript制作验证码的方法：【var code; window.onload = function creatCode() { code=""; var codeLength = 4; var checkCode = ...}】。

javascript如何制作验证码

本文操作环境：windows10系统、javascript 1.8.5、thinkpad t480电脑。

使用javascript实现登录验证码功能，下面是具体的实现代码：

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"); //弹出^-^  
	}             
}

登录后复制

点击的时候不会移动位置的代码：

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

登录后复制

推荐学习：javascript视频教程

以上是javascript如何制作验证码的详细内容。更多信息请关注PHP中文网其他相关文章！

本站声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

热AI工具

热工具

热门话题

gmail邮箱登陆入口在哪里

7494

CakePHP 教程

1377

steam的账户名称是什么格式

win11激活密钥永久

NYT连接提示和答案

显示更多

Related knowledge

谷歌浏览器不显示验证码图片怎么办?chrome浏览器不显示验证码? Mar 13, 2024 pm 08:55 PM

谷歌浏览器不显示验证码图片怎么办？在使用谷歌浏览器登录网页有时候需要验证码验证。部分用户在使用图片验证码的时候发现谷歌浏览器无法正常显示图片的内容。这应该怎么办呢？下面小编带来谷歌浏览器验证码不显示处理方法介绍，希望对大家有所帮助！　　方法介绍　　1、进入软件，点击右上角的“更多”按钮，选择下方选项列表中的“设置”进入。　　2、进入新界面后，点击左侧的“隐私设置和安全性”选项。　　3、接着点击右侧中的“网站设置&rdquo

如何使用WebSocket和JavaScript实现在线语音识别系统 Dec 17, 2023 pm 02:54 PM

如何使用WebSocket和JavaScript实现在线语音识别系统引言：随着科技的不断发展，语音识别技术已经成为了人工智能领域的重要组成部分。而基于WebSocket和JavaScript实现的在线语音识别系统，具备了低延迟、实时性和跨平台的特点，成为了一种被广泛应用的解决方案。本文将介绍如何使用WebSocket和JavaScript来实现在线语音识别系

虚拟号码可以接收验证码吗 Jan 02, 2024 am 10:22 AM

虚拟号码可以接收验证码，只要注册时填写的手机号码符合规定，并且能够正常接通手机号，就可以收到短信验证码。不过，使用虚拟手机号需要注意，部分网站不支持虚拟手机号注册，因此需要选择正规的虚拟手机号服务商。

WebSocket与JavaScript：实现实时监控系统的关键技术 Dec 17, 2023 pm 05:30 PM

WebSocket与JavaScript：实现实时监控系统的关键技术引言：随着互联网技术的快速发展，实时监控系统在各个领域中得到了广泛的应用。而实现实时监控的关键技术之一就是WebSocket与JavaScript的结合使用。本文将介绍WebSocket与JavaScript在实时监控系统中的应用，并给出代码示例，详细解释其实现原理。一、WebSocket技

如何利用JavaScript和WebSocket实现实时在线点餐系统 Dec 17, 2023 pm 12:09 PM

如何利用JavaScript和WebSocket实现实时在线点餐系统介绍：随着互联网的普及和技术的进步，越来越多的餐厅开始提供在线点餐服务。为了实现实时在线点餐系统，我们可以利用JavaScript和WebSocket技术。WebSocket是一种基于TCP协议的全双工通信协议，可以实现客户端与服务器的实时双向通信。在实时在线点餐系统中，当用户选择菜品并下单

如何使用WebSocket和JavaScript实现在线预约系统 Dec 17, 2023 am 09:39 AM

如何使用WebSocket和JavaScript实现在线预约系统在当今数字化的时代，越来越多的业务和服务都需要提供在线预约功能。而实现一个高效、实时的在线预约系统是至关重要的。本文将介绍如何使用WebSocket和JavaScript来实现一个在线预约系统，并提供具体的代码示例。一、什么是WebSocketWebSocket是一种在单个TCP连接上进行全双工

JavaScript和WebSocket：打造高效的实时天气预报系统 Dec 17, 2023 pm 05:13 PM

JavaScript和WebSocket：打造高效的实时天气预报系统引言：如今，天气预报的准确性对于日常生活以及决策制定具有重要意义。随着技术的发展，我们可以通过实时获取天气数据来提供更准确可靠的天气预报。在本文中，我们将学习如何使用JavaScript和WebSocket技术，来构建一个高效的实时天气预报系统。本文将通过具体的代码示例来展示实现的过程。We

简易JavaScript教程：获取HTTP状态码的方法 Jan 05, 2024 pm 06:08 PM

JavaScript教程：如何获取HTTP状态码，需要具体代码示例前言：在Web开发中，经常会涉及到与服务器进行数据交互的场景。在与服务器进行通信时，我们经常需要获取返回的HTTP状态码来判断操作是否成功，根据不同的状态码来进行相应的处理。本篇文章将教你如何使用JavaScript获取HTTP状态码，并提供一些实用的代码示例。使用XMLHttpRequest

See all articles

javascript如何制作验证码

热AI工具

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

AI Hentai Generator

热门文章

热工具

记事本++7.3.1

SublimeText3汉化版

禅工作室 13.0.1

Dreamweaver CS6

SublimeText3 Mac版

热门话题