JavaScript生成验证码并实现验证功能

废话不多说了，直接给大家贴代码了，具体代码如下所示：

<html>
<head>
<title>验证码</title>
<style type="text/css">
#code
{
font-family:Arial;
font-style:italic;
font-weight:bold;
border:0;
letter-spacing:2px;
color:blue;
}
</style>
<script type = "text/javascript" src = "checkCode.js">
</script>
</head>
<body>
<div>
<input type = "text" id = "input"/>
<input type = "button" id="code" onclick="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("请输入验证码！"); //则弹出请输入验证码
}
else if(inputCode != code ) { //若输入的验证码与产生的验证码不一致时
alert("验证码输入错误！@_@"); //则弹出验证码输入错误
createCode();//刷新验证码
document.getElementById("input").value = "";//清空文本框
}
else { //输入正确时
alert("^-^"); //弹出^-^
}
}

以上所述是小编给大家介绍的JavaScript生成验证码并实现验证功能，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

赞 (0)

相关推荐

  • JS 实现随机验证码功能

    1.验证码 验证是网页常出现的一个验证点,所谓验证码类型有很多,下面代码只是实现一个简单的验证功能. <div> <input type = "text" id = "input" value="" /> <input type = "button" id="code" onclick="createCode()"/> <input type =

  • JSP实现登录功能之添加验证码

    jsp登陆验证,网页登陆验证带验证码校验,登录功能之添加验证码 part_1:专门用于生成一个验证码图片的类:VerificationCode.Java package cn.mike.javase.test; import java.awt.Color; import java.awt.Font; import java.awt.Graphics2D; import java.awt.image.BufferedImage; import java.io.File; import java.i

  • JavaScript登录验证码的实现

    废话不多说,实现js登录验证码的功能需要下面两步,具体实现过程如下所示: 1.js var code="" ; //在全局 定义验证码 function createCode(){ code = ""; var codeLength = 6;//验证码的长度 var checkCode = document.getElementById("checkCode"); checkCode.value = ""; var selec

  • JavaScript 随机验证码的生成实例代码

    随机验证码的生成 1: 主体部分 <script> var code ; //在全局 定义验证码 function createCode() { code = ""; var codeLength = 6;//验证码的长度 var checkCode = document.getElementById("checkCode"); var selectChar = new Array(0,1,2,3,4,5,6,7,8,9,'A','B','C','D',

  • JS实现表单验证功能(验证手机号是否存在，验证码倒计时)

    废话不多说直接上代码 html代码: <form method="post" id="form_hroizon" enctype="multipart/form-data" action="/"> <input type="hidden" name="phoneTemplet" id="phoneTemplet"> <input type

  • JS实现用户注册时获取短信验证码和倒计时功能

    JS实现用户注册时获取短信验证码和倒计时功能

    在用户注册时,通常需要短信验证码,而且为了交互效果,也需要增加倒计时. 效果如下: <div class="user-form"> <form action="{{ path('zm_member_register') }}" method="post"> <div class="form-list"> <label class="register-label"&g

  • JavaScript生成验证码并实现验证功能

    废话不多说了,直接给大家贴代码了,具体代码如下所示: <html> <head> <title>验证码</title> <style type="text/css"> #code { font-family:Arial; font-style:italic; font-weight:bold; border:0; letter-spacing:2px; color:blue; } </style> <scri

  • JavaScript实现拼图式滑块验证功能

    JavaScript实现拼图式滑块验证功能

    目录 演示 前戏 源码介绍 主页样式设计 滑块验证部分 img_ver内部 演示 前戏 滑块验证码是在网站.APP等应用中常见的一种验证方式,通过按照一定规则滑动滑块到指定位置完成验证,才可以进行下一步操作.滑块验证码有两种设计,一种是在滑动框内“一滑到底”即完成验证的,还有一种是滑动滑块拼合拼图完成验证的.由于拼图式的滑块验证码安全性更高,趣味性更强,所以多数网站或APP都选择了拼图式的滑块验证码. 拼图式的滑块验证码在业务应用中有三种展现形式,触发式.嵌入式和弹出式.触发式即鼠标光标移入验证

  • JavaScript实现拖动滑块拼图验证功能（html5、canvas）

    JavaScript实现拖动滑块拼图验证功能（html5、canvas）

    引言: 滑块拖动验证现在很多地方都用到,周末就琢磨着写了一个,放上来,看看有没有人用得上! 效果: 实现思路: 用一张画布绘制源图,再绘制一个填充的方形,这样就可以达到缺失的效果(方形的坐标是随机的): 再用一个画布绘制拖动块,同时用drawImage截取和上一步中方形区域一样坐标.大小的原图,就作为验证图了,把验证图放在最左边: 在拖动块处,按下鼠标然后拖动,拖动块和验证图会跟随鼠标移动,达到一定范围后放开鼠标,会进行验证: 验证通过则提示验证成功,验证不通过则拖动块和验证图会返回到最左边.

  • springboot验证码生成以及验证功能举例详解

    目录 1.easy-captcha工具包 2添加依赖 3.验证码字符类型 4.字体设置 5验证码图片输出 6.生成并显示验证码 6.1后端 6.2前端 7 验证码的输入验证 7.1后端 7.2前端 总结 1.easy-captcha工具包 生成验证码的方式有许多种,这里选择的是easy-captcha工具包. github开原地址为:easy-captcha工具包 其支持Java图形验证码,支持gif.中文.算术等类型,可用于Java Web.JavaSE等项目. 2添加依赖 首先需要将easy

  • Zend Framework生成验证码并实现验证码验证功能(附demo源码下载)

    本文实例讲述了Zend Framework生成验证码并实现验证码验证功能的方法.分享给大家供大家参考,具体如下: 今天讲述如何在留言本中实现验证码的功能..这样有利于我们网站减少一些垃圾留言或是广告留言..在这是我没有运用Zend Framework自带的Zend_Captcha组件..我只是找到ThinkPHP这个框架里的验证码类..就把它运用到了..我们留言本验证码的实现上...我在这里..是把它写成一个插件的形式...当然Zend Framework有很多方式运用其它代码..我现在只会运用

  • Java实现验证码验证功能

    Java实现验证码验证功能

    Java如何实现验证码验证功能呢?日常生活中,验证码随处可见,他可以在一定程度上保护账号安全,那么他是怎么实现的呢? Java实现验证码验证功能其实非常简单:用到了一个Graphics类在画板上绘制字母,随机选取一定数量的字母随机生成,然后在画板上随机生成几条干扰线. 首先,写一个验证码生成帮助类,用来绘制随机字母: <span style="font-size:14px;">import java.awt.Color; import java.awt.Font; impo

  • Ajax+Struts2实现验证码验证功能实例代码

    Ajax+Struts2实现验证码验证功能实例代码

    众所周知,验证码在我们的生活中都是非常常见的,很多公司都在各种折腾各种各样的验证码,这里简要的用一个小案例来实现验证码的功能(ps:其实我挺讨厌验证码这个东西的). 今天分享的是通过ajax来动态的验证验证码输入是否正确.我们这里采用的是ajax+struts2来做的这个验证. 我们新建一个web工程.然后需要导入struts的相应包.之后我们需要写一个类来生成验证码. 这里命名为01_image.jsp,这类的主要功能就是生成验证码,里面是各种画线条,随机数字等,我这里设置的是5个数字的验证,

  • Java如何实现验证码验证功能

    Java如何实现验证码验证功能

    Java如何实现验证码验证功能呢?日常生活中,验证码随处可见,他可以在一定程度上保护账号安全,那么他是怎么实现的呢? Java实现验证码验证功能其实非常简单:用到了一个Graphics类在画板上绘制字母,随机选取一定数量的字母随机生成,然后在画板上随机生成几条干扰线. 首先,写一个验证码生成帮助类,用来绘制随机字母: import java.awt.Color; import java.awt.Font; import java.awt.Graphics; import java.awt.ima

  • Java后端产生验证码后台验证功能的实现代码

    直接跳severlet在java后台生成验证码: @RequestMapping(value="yzm.action") public void Yzm(HttpSession session,HttpServletResponse resp){ // 验证码图片的宽度. int width = 60; // 验证码图片的高度. int height = 20; // 验证码字符个数 int codeCount = 4; int x = 0; // 字体高度 int fontHeigh

  • PHP登录验证功能示例【用户名、密码、验证码、数据库、已登陆验证、自动登录和注销登录等】

    PHP登录验证功能示例【用户名、密码、验证码、数据库、已登陆验证、自动登录和注销登录等】

    本文实例讲述了PHP登录验证功能.分享给大家供大家参考,具体如下: 登录界面 具体实现方法如下: login.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <form method="post&q

随机推荐