JS自动生成动态HTML验证码页面
本文为大家分享了JS自动生成动态HTML验证码页面，输入错误自动清空输入框功能，供大家参考，具体内容如下
<!DOCTYPE html>
<html>
<head>
<title>验证码</title>
<meta charset="utf-8" />
<style type="text/css">
#code {
font-family: Arial;
font-style: italic;
font-weight: bold;
border: 0;
letter-spacing: 2px;
color: blue;
}
</style>
<script>
//产生验证码
window.onload = function() {
createCode()
}
var code; //在全局定义验证码
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("ctl00_txtcode").value.toUpperCase(); //获取输入框内验证码并转化为大写
if(inputCode.length <= 0) { //若输入的验证码长度为0
alert("请输入验证码！"); //则弹出请输入验证码
}
else if(inputCode != code) { //若输入的验证码与产生的验证码不一致时
alert("验证码输入错误!"); //则弹出验证码输入错误
createCode(); //刷新验证码
document.getElementById("ctl00_txtcode").value = "";//清空文本框
} else { //输入正确时
alert("正在登陆"); //弹出
}
}
</script>
</head>
<body>
<div>
<!--时间：2017-01-11 描述：输入框ct100_textcode -->
<input type="text" id="ctl00_txtcode" />
<!--时间：2017-01-11 描述：把验证码定义为按钮，点击刷新-->
<input type="button" id="code" onclick="createCode()" />
<!--时间：2017-01-11 描述：验证按钮 -->
<input type="button" value="验证" onclick="validate()" />
</div>
</body
</html>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
js生成验证码并直接在前端判断
js生成验证码并直接在前端判断 <script type="text/javascript" src="img/jquery-1.5.1.min.js"></script> <script language="javascript" type="text/javascript"> var code; //在全局 定义验证码 var code2; //在全局 定义验证码 function cr
-
js实现点击获取验证码倒计时效果
网站中为了防止恶意获取验证短信.验证邮箱,都会在点击获取验证码的按钮上做个倒计时的效果.实现这个功能,一个setInterval和一个clearInterval就能搞定了,不需要太多的代码.实例效果和代码如下: <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <input type="button" style="height:
-
JavaScript 验证码的实例代码(附效果图)
效果如下: 复制代码 代码如下: <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title></title> <style type="text/css"> .code { background:url(code_bg.jpg); f
-
js实现随机数字字母验证码
本文实例为大家分享了数字字母验证码的具体实现代码,供大家参考,具体内容如下 验证码: <html> <head> <title>纯字验证码</title> <meta http-equiv='content-type' content='text/html;charset=utf-8'/> <script type='text/javascript' src='jquery-1.7.2.js'></script> <
-
JS/jQ实现免费获取手机验证码倒计时效果
最近做了一个项目,其中有项目需求涉及到手机号验证码,就是当用户点击获取验证码之后我们会发送一条信息到用户手机,然后就会出现一个倒计时按钮,很像支付宝手机付款效果了,下面我给大家分享两个实现代码. 如何获取手机验证码? 小月不知道大家是利用什么平台去获取验证码的,但是告诉大家我是在哪个平台获取的. LeanCloud :https://leancloud.cn/ 文档:https://leancloud.cn/docs/sms_guide-js.html 在这个平台首先去要注册一个账号,在设置里面
-
js实现简单的验证码
验证码大家应该不陌生,主要是为了网站的安全性,防止恶意注册和登陆.验证码实现的方式各有不同,下面是一段用javascript实现的验证码效果,供大家参考之用,希望能够给大家带来帮助. 运行效果图: 代码如下: <html> <head> <title>js验证码</title> <style type="text/css"> .code { background:url(code_bg.jpg); font-family:Ar
-
node.js WEB开发中图片验证码的实现方法
用node做web开发很多都可能碰到需要验证码的地方,之前在github上搜索,有一些比如node-captcha等的类库,都需要依赖第三方的图形处理库或者软件,像我之前安装cario这个图形库时,真是费了好大一番劲,但是其实我们只用到了这些图形库的一点点小功能,比如图片的尺寸修改裁剪,或者生产验证码. 先介绍一下CImg这个c++的图形库吧,CImg是一个跨平台的C++的图像处理库,提供了加载.处理.显示.保存等一系列功能,最吸引人的地方是整个图形库就一个CImg.h这个文件,所以非常的便携绿
-
js实现发送验证码后的倒计时功能
之前分享过只用js实现倒计时的功能,后来测试时发现,刷新或关闭网页后,倒计时就不能用了.网上也没找到合适的解决方案,所以自己就写了个,这次的算是优化版吧,能满足刷新或重新打开网页后,倒计时依然能用 特别说明: cookie最初创建的有效时间是60秒.也就是说,你如果在倒计时为20的时候,关闭网页.20秒之后再打开,是不会有倒计时显示的;但是,如果倒计时为20时,关闭页面,如果在20秒内重新打开页面,是有倒计时显示的. html代码 <input id="second" type=
-
js生成的验证码的实现与技术分析
分享给大家一段js生成验证码并验证的代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>
-
Jsp生成页面验证码的方法[附代码]
image.jsp------------------------------生成随机验证码图片的Jsp页面 代码如下: 复制代码 代码如下: <%@ page contentType="image/jpeg" import="java.awt.*, java.awt.image.*,java.util.*,javax.imageio.*" %> <%! Color getRandColor(int fc,int bc) { Random ran