JavaScript实现随机生成验证码及校验
本文实例为大家分享了JavaScript实现随机生成验证码及校验的具体代码，供大家参考，具体内容如下
输入验证码（区分大小写）点击确认，进行校验。出错就弹框提示
点击 看不清 重新随机生成验证码
当验证码输入错误时进行提示
<body>
<div class="v_code">
<div class="code_show">
<span class="code" id="checkCode"></span>
<a href="#" id="linkbt">看不清，换一张</a>
</div>
<div class="input_code">
<label for="inputCode">验证码：</label>
<input type="text" id="inputCode">
<span id="text_show"></span>
</div>
<input type="button" id="Button1" value="确认">
</div>
<script>
// 1.生成验证码
// 6位数 0-9 a-f 随机生成6位 内容必须是0-9 a-f 字符串
// 数组 下标 0、1、2…… 从数组当中 随机下标 0-15位
// 2.进行验证 点击确认时，进行对比
window.onload = function() {
const randomWord = () => {
let code = '';
for (var i = 0; i < 6; i++) {
var type = getRandom(1,3);
switch(type) {
case 1:
code += String.fromCharCode(getRandom(48,57)) // 数字
break;
case 2:
code += String.fromCharCode(getRandom(65,90)); //大写字母
break;
case 3:
code += String.fromCharCode(getRandom(97,122)); //小写字母
break;
}
}
return code;
}
function getRandom (min, max) {
return Math.round(Math.random()*(max-min)+min)
}
// 调用取数函数
const rand = randomWord();
//console.log(rand);
var checkCode = document.getElementById('checkCode');
checkCode.innerText = rand;
// 点击切换随机数
var linkbt = document.getElementById('linkbt');
linkbt.addEventListener('click', function() {
checkCode.innerText = randomWord();
})
// 提交进行对比
document.getElementById('Button1').onclick = function() {
var inputCode = document.querySelector('#inputCode');
if (inputCode.value != checkCode.innerText) {
alert('您输入的验证码不正确');
inputCode.value = '';
return false;
} else {
alert('输入正确');
}
}
}
</script>
</body>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
JavaScript实现点击切换验证码及校验
本文实例为大家分享了JavaScript实现点击切换验证码及校验的具体代码,供大家参考,具体内容如下 效果: 代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> div { width: 100px; height: 40px; background-color: red; color: #ff
-
js实现登录注册框手机号和验证码校验（前端部分）
开发的很多场景中都会用到手机号的校验和验证码的校验,具体实现如下 <div> <input type="text" name="phonenumber" placeholder="请输入您的手机号码" /> <input type="text" name="verify" placeholder="请输入验证码" /><input type=&q
-
JavaScript实现随机生成验证码及校验
本文实例为大家分享了JavaScript实现随机生成验证码及校验的具体代码,供大家参考,具体内容如下 输入验证码(区分大小写)点击确认,进行校验.出错就弹框提示 点击 看不清 重新随机生成验证码 当验证码输入错误时进行提示 <body> <div class="v_code"> <div class="code_show"> <span class="code" id="checkCode&qu
-
Android随机生成验证码
Android随机生成验证码,Android利用随机数绘制不规则的验证码,加强用户登录或者注册的安全性. 具体思路如下: 在一块固定宽高的画布上,画上固定个数的随机数字和字母,再画上固定条数的干扰线 随机数和干扰线的颜色随机生成,随机数的样式随机生成. 界面效果如下: 1.生成随机数代码,Code.java: public class Code { //随机数数组 private static final char[] CHARS = { '2', '3', '4', '5', '6', '7'
-
基于JS实现一个随机生成验证码功能
效果展示 实现原理 1. html:一般就是一个div: <div id="code"></div> ,样式根据需求设计. 2. JS:1)将所有的验证码所用的字符放在一个字符串中 2)在这个字符串的字符个数以内,随机生成索引号 3)根据索引号查找对应字符,拼接成验证码的字符串 代码实现 HTML: <div id="code"></div> CSS: * { margin: 0; padding: 0; } div
-
JavaScript实现随机五位数验证码
本文实例为大家分享了js实现随机五位数验证码的具体代码,供大家参考,具体内容如下 功能展示: 点击按钮,随机生成数字+大小写字母验证码 所有代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>随机生成验证码</title> </head> <style> /*验证码*/ .upload-awrp { overflow
-
JS实现随机生成验证码
本文实例为大家分享了JS实现随机生成验证码的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style> </style> </head> <body> <div> <h1>111111</h1><
-
Java 随机生成验证码(支持大小写字母、数字、随机字体)的实例
代码如下所示: 复制代码 代码如下: package com.hoo.util; import java.awt.Color; import java.awt.Font; import java.awt.Graphics; import java.awt.image.BufferedImage; import java.util.Random; import javax.imageio.ImageIO; import javax.servlet.http.HttpServletRequ
-
利用javascript如何随机生成一定位数的密码
前言 本文主要给大家介绍了关于利用javascript随机生成一定位数密码的相关内容,分享出来供大家参考学习,下面话不多少,来一起看看详细的介绍吧. 需求 随机生成一定位数的密码,有最小个数和最大个数,必须包含数字.大小写字母,和特殊字符比如(- _ #): 代码 function createPassword(min,max) { //可以生成随机密码的相关数组 var num = ["0","1","2","3",&quo
-
Android实现随机生成验证码
本文实例为大家分享了Android验证码的随机生成代码,供大家参考,具体内容如下 Code.java package com.example.myapp; import android.graphics.Bitmap; import android.graphics.Canvas; import android.graphics.Color; import android.graphics.Paint; import java.util.Random; public class Code { /
-
PHP 动态随机生成验证码类代码
下面是效果图,这个效果图是没有开启干扰码的效果图 下面是类代码 复制代码 代码如下: <?php /************************************************ //FILE:ImageCode //DONE:生成动态验证码类 //DATE"2010-3-31 //Author:www.5dkx.com 5D开心博客 *********************************************************************
-
java实现随机生成验证码图片
验证码 验证码(CAPTCHA)是"Completely Automated Public Turing test to tell Computers and Humans Apart"(全自动区分计算机和人类的图灵测试)的缩写.由于计算机无法解答CAPTCHA的问题,所以回答出问题的用户就可以被认为是人类. 作用 防止恶意破解密码.刷票.论坛灌水.刷页. 有效防止某个黑客对某一个特定注册用户用特定程序暴力破解方式进行不断的登录尝试,实际上使用验证码是现在很多网站通行的方式(比如招商银