广告
返回顶部
首页 > 资讯 > 前端开发 > VUE >javascript怎么制作验证码
  • 810
分享到

javascript怎么制作验证码

2024-04-02 19:04:59 810人浏览 薄情痞子
摘要

本篇内容介绍了“javascript怎么制作验证码”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!

本篇内容介绍了“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,'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上  
	}  
	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怎么制作验证码”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识可以关注编程网网站,小编将为大家输出更多高质量的实用文章!

--结束END--

本文标题: javascript怎么制作验证码

本文链接: https://www.lsjlt.com/news/84530.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • javascript怎么制作验证码
    本篇内容介绍了“javascript怎么制作验证码”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成! ...
    99+
    2022-10-19
  • Python中怎么制作一个图片验证码
    这篇文章给大家介绍Python中怎么制作一个图片验证码,内容非常详细,感兴趣的小伙伴们可以参考借鉴,希望对大家能有所帮助。Pillow库Pillow是一个非常强大的图片处理模块,其中Image是Pillow中最为重要的类,实现了Pillow...
    99+
    2023-06-16
  • 怎么使用Matlab制作图形验证码生成器
    这篇文章主要介绍了怎么使用Matlab制作图形验证码生成器,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。突然发现cla函数也可以应用到app designer控件上,因而对部...
    99+
    2023-06-29
  • java制作简单验证码功能
    本文实例为大家分享了java制作简单验证码的具体代码,供大家参考,具体内容如下在这里我们需要用到java的画笔工具,所以我们需要导入以下包import="java.util.*,java.awt.*,java.awt.image.*,jav...
    99+
    2023-05-30
    java 验证码
  • 怎么用JavaScript实现滑块验证码
    本篇内容主要讲解“怎么用JavaScript实现滑块验证码”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“怎么用JavaScript实现滑块验证码”吧!效果:鼠标在底部滑块上按下按住不松拖动可以移...
    99+
    2023-06-25
  • JavaScript中怎么生成随机验证码
    这篇文章将为大家详细讲解有关JavaScript中怎么生成随机验证码,文章内容质量较高,因此小编分享给大家做个参考,希望大家阅读完这篇文章后对相关知识有一定的了解。利用canvas制作一个随机验证码:  1...
    99+
    2022-10-19
  • JavaScript怎么验证API
    今天小编给大家分享一下JavaScript怎么验证API的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下吧。约束验证 DOM 方法...
    99+
    2023-06-26
  • JavaScript怎么验证API约束和验证DOM
    这篇文章主要介绍“JavaScript怎么验证API约束和验证DOM”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“JavaScript怎么验证API约束和验证DOM...
    99+
    2022-10-19
  • JavaScript怎么实现页面动态验证码
    小编给大家分享一下JavaScript怎么实现页面动态验证码,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!效果图: 实现思路:把数字和字母放到一个数组中...
    99+
    2023-06-14
  • Android自定义view制作绚丽的验证码
    废话不多说了,先给大家展示下自定义view效果图,如果大家觉得还不错的话,请继续往下阅读。 怎么样,这种验证码是不是很常见呢,下面我们就自己动手实现这种效果,自己动手,丰衣足...
    99+
    2022-06-06
    view 验证码 Android
  • JavaScript实现验证码案例
    本文实例为大家分享了JavaScript实现验证码效果的具体代码,供大家参考,具体内容如下 今天的案例,效果如下: 这个案例的实现其实没有很多难点,让我们一起来看看吧~ html和...
    99+
    2022-11-12
  • JavaScript实现滑块验证码
    本文实例为大家分享了JavaScript实现滑块验证码的具体代码,供大家参考,具体内容如下 效果:鼠标在底部滑块上按下按住不松拖动可以移动滑块,上面大图里面带有小图背景的滑块也会跟随...
    99+
    2022-11-12
  • java验证码代码怎么写
    以下是一个简单的Java验证码生成代码示例:```javaimport java.util.Random;public class ...
    99+
    2023-08-09
    java
  • JavaScript是怎么验证URL的
    本篇内容主要讲解“JavaScript是怎么验证URL的”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“JavaScript是怎么验证URL的”吧!URL验证URL验证的存在是为了加强安全,防止可...
    99+
    2023-07-05
  • javascript怎么实现Host验证
    近年来,随着互联网技术的不断发展和网络安全的日益重要,越来越多的网站开始使用一些验证机制来保护自己的数据安全。其中,验证 Host 通常是最基本的一种。什么是 Host?首先,我们需要了解一下 Host 是什么意思。在计算机网络中,Host...
    99+
    2023-05-14
  • JavaScript实现登陆验证码的脚本怎么写
    今天小编给大家分享一下JavaScript实现登陆验证码的脚本怎么写的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下吧。填写输入信...
    99+
    2023-06-27
  • Python使用captcha制作验证码的实现示例
    目录1 生成单张验证码图片并显示2 验证码图片的显示与保存3 批量生成验证码样本集在使用Keras搭建验证码识别模型时,需要大量的验证码图片。在这里,使用captcha模块生成验证码...
    99+
    2022-11-11
  • php怎么生成验证码
    在 PHP 中,可以使用以下方法生成验证码:1. 使用 `imagecreate()` 函数创建一个空白的图片对象。2. 使用 `i...
    99+
    2023-10-09
    php
  • JS怎么实现验证码
    这篇文章主要介绍JS怎么实现验证码,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!具体代码:<!DOCTYPE html><html lang="en">...
    99+
    2023-06-27
  • javascript如何验证手机号码
    这篇文章主要介绍了javascript如何验证手机号码,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。 javas...
    99+
    2022-10-19
软考高级职称资格查询
推荐阅读
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作