基于JavaScript实现验证码功能

2024-07-29 10:31:03

本文实例为大家分享了JavaScript实现验证码的具体代码，供大家参考，具体内容如下

1、一个简单的例子
新建 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" 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("Empty Code!"); //则弹出请输入验证码
  }
  else if(inputCode != code ) { //若输入的验证码与产生的验证码不一致时
    alert("Error Code"); //则弹出验证码输入错误
    createCode();//刷新验证码
    document.getElementById("input").value = "";//清空文本框
  }
  else { //输入正确时
    alert("OK"); //弹出^-^
  }
}

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

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
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
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>
Js实现手机发送验证码时按钮延迟操作

实例代码记录: <script type="text/javascript"> function start_sms_button(obj){ var count = 1 ; var sum = 30; var i = setInterval(function(){ if(count > 10){ obj.attr('disabled',false); obj.val('发送验证码'); clearInterval(i); }else{ obj.val('剩余'+pa
node.js WEB开发中图片验证码的实现方法

用node做web开发很多都可能碰到需要验证码的地方,之前在github上搜索,有一些比如node-captcha等的类库,都需要依赖第三方的图形处理库或者软件,像我之前安装cario这个图形库时,真是费了好大一番劲,但是其实我们只用到了这些图形库的一点点小功能,比如图片的尺寸修改裁剪,或者生产验证码. 先介绍一下CImg这个c++的图形库吧,CImg是一个跨平台的C++的图像处理库,提供了加载.处理.显示.保存等一系列功能,最吸引人的地方是整个图形库就一个CImg.h这个文件,所以非常的便携绿
js实现点击获取验证码倒计时效果

网站中为了防止恶意获取验证短信.验证邮箱,都会在点击获取验证码的按钮上做个倒计时的效果.实现这个功能,一个setInterval和一个clearInterval就能搞定了,不需要太多的代码.实例效果和代码如下: <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <input type="button" style="height:
javascript 验证码生成代码推荐学习

javascript 验证码实现代码_我们测试 .code {}{ background-image:url(code.jpg); font-family:Arial; font-style:italic; color:Red; border:0; padding:2px 3px; letter-spacing:3px; font-weight:bolder; } .unchanged {}{ border:0; } var code ; //在全局定义验证码 function createC
js实现简单的验证码

验证码大家应该不陌生,主要是为了网站的安全性,防止恶意注册和登陆.验证码实现的方式各有不同,下面是一段用javascript实现的验证码效果,供大家参考之用,希望能够给大家带来帮助. 运行效果图: 代码如下: <html> <head> <title>js验证码</title> <style type="text/css"> .code { background:url(code_bg.jpg); font-family:Ar
js实现发送验证码后的倒计时功能

之前分享过只用js实现倒计时的功能,后来测试时发现,刷新或关闭网页后,倒计时就不能用了.网上也没找到合适的解决方案,所以自己就写了个,这次的算是优化版吧,能满足刷新或重新打开网页后,倒计时依然能用特别说明: cookie最初创建的有效时间是60秒.也就是说,你如果在倒计时为20的时候,关闭网页.20秒之后再打开,是不会有倒计时显示的;但是,如果倒计时为20时,关闭页面,如果在20秒内重新打开页面,是有倒计时显示的. html代码 <input id="second" type=
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

基于JavaScript实现验证码功能

相关推荐

随机推荐