`

JavaScript 验证码

阅读更多
    看不清换一张
验证码: 请输入验证码
   

 

<!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 runat="server">
    <title></title>
    <style type="text/css">
    .code
    {
            background:url(code_bg.jpg);
            font-family:Arial;
            font-style:italic;
             color:blue;
             font-size:30px;
             border:0;
             padding:2px 3px;
             letter-spacing:3px;
             font-weight:bolder;             
             float:left;            
             cursor:pointer;
             width:150px;
             height:60px;
             line-height:60px;
             text-align:center;
             vertical-align:middle;
 
    }
    a
    {
      text-decoration:none;
      font-size:12px;
      color:#288bc4;
      }
    a:hover
    {
       text-decoration:underline;
      }
    </style>
    <script language="javascript" type="text/javascript">
 
        var code;
        function createCode() {
            code = "";
            var codeLength = 6; //验证码的长度
            var checkCode = document.getElementById("checkCode");
            var codeChars = 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',
            '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 charNum = Math.floor(Math.random() * 52);
                code += codeChars[charNum];
            }
            if (checkCode) 
            {
                checkCode.className = "code";
                checkCode.innerHTML = code;
            }
        }
        function validateCode() 
        {
            var inputCode = document.getElementById("inputCode").value;
            if (inputCode.length <= 0) 
            {
                alert("请输入验证码!");
            }
            else if (inputCode.toUpperCase() != code.toUpperCase()) 
            {
                alert("验证码输入有误!");
                createCode();
            }
            else 
            {
                alert("验证码正确!");
            }        
        }    
     </script>
 
</head>
<body onload="createCode()">
    <form id="form1" runat="server" onsubmit="validateCode()">
    <div>
    <table border="0" cellspacing="5" cellpadding="5" >
      <tr>
        <td></td><td> <div class="code" id="checkCode" onclick="createCode()" ></div></td>
        <td><a  href="#" onclick="createCode()">看不清换一张</a></td>
      </tr>
      <tr>
        <td>验证码:</td><td><input  style="float:left;" type="text"   id="inputCode" /></td><td>请输入验证码</td>
      </tr>
      <tr><td></td><td><input id="Button1"  onclick="validateCode();" type="button" value="确定" /></td><td></td>
      </tr>
    </table>
    </div>
    </form>
</body>
</html>

 

分享到:
评论

相关推荐

    javascript验证码

    纯javascript验证码 ,自动生成验证码

    javascript验证码破解

    ### JavaScript验证码破解详解 #### 一、背景介绍 随着网络安全意识的提高,许多网站开始采用验证码(CAPTCHA)作为防止自动化攻击的一种手段。验证码的主要作用是区分人类用户与自动化程序,确保系统的安全性。...

    JavaScript 验证码页面

    简单验证码页面模板页面 JavaScript 实现简单的验证码

    JavaScript实现页面动态验证码

    以下是一个简单的JavaScript验证码实现示例: ```javascript document.addEventListener('DOMContentLoaded', function() { var canvas = document.getElementById('captcha'); var ctx = canvas.getContext('2d'...

    javascript验证码的安全实现

    文件主要有html构成,安全的实现了验证码的验证。

    JavaScript生成验证码(一)

    JavaScript生成验证码(一)! 值得下载看看!资源免费,大家分享!!

    javascript做验证码

    JavaScript验证码可以通过生成动态图像并添加一些混淆元素来实现这一目的。 创建JavaScript验证码的步骤如下: 1. **生成随机字符串**:首先,我们需要生成一个包含字母和数字的随机字符串,作为验证码的内容。...

    JavaScript图形验证码的实现

    JavaScript验证码的简单实现,有简单的随机数字,也有较复杂的图形验证码, 这种图形验证码很高效简洁,使用爬虫是有较大难度的爬取网站信息的。 而且这种图形验证码的应用场景非常广,可用在登录注册等等需要上传...

    js验证码验证码插件,简单易用、图片验证码,附demo

    在Web开发中,JavaScript验证码插件是实现这一功能的便捷工具,尤其对于前端开发者来说,它们提供了简单易用的解决方案。本篇文章将详细探讨基于JavaScript的验证码插件,特别是针对“js验证码插件,简单易用,图片...

    JavaScript 验证码的实例代码(附效果图)

    JavaScript验证码是一种用于验证用户身份的安全机制,常用于防止自动化脚本或机器人进行恶意操作,如注册、登录等。本文将详细解析所提供的JavaScript验证码实例代码,包括其主要功能、实现方式和关键代码段。 首先...

    JAVASCRIPT身份证验证码

    ### JavaScript身份证验证码实现原理与代码解析 在当前数字化时代,身份验证成为了线上交易、数据安全等领域不可或缺的一环。其中,身份证验证是确保用户身份真实性的重要手段之一。本文将基于提供的JavaScript脚本...

    js 验证码.rarjs 验证码.rarjs 验证码.rarjs 验证码.rarjs 验证码.rarjs 验证码.rarjs 验证码.rarjs 验证码.rarjs 验证码.rar

    本篇文章将深入探讨JavaScript验证码的相关知识点。 首先,验证码的核心目的是增加用户交互中的复杂性,使得自动化程序难以模拟人类行为。JavaScript验证码通常包含以下几个关键组成部分: 1. **生成验证码**:在...

    jsp四位验证码图片生成

    我们将探讨JSP验证码的原理、实现方式以及与JavaScript验证码的对比。 验证码的核心在于它的随机性和一次性。随机性确保每次请求时生成的验证码都是不同的,而一次性则意味着一旦验证码被使用或验证,它将失效。在...

    源代码-javascript生成PNG格式验证码下载.zip

    综上所述,这份资源提供的JavaScript验证码生成代码是一个很好的学习实例,它涵盖了JavaScript图形绘制、随机数生成以及安全验证的基本概念。对于想要提升Web安全性和用户体验的开发者来说,理解并掌握这些技术至关...

    js 验证码-简单好用

    JavaScript验证码是通过在客户端实现的一种验证机制,能够减轻服务器的压力,提高网站安全性。本篇文章将深入探讨如何使用JavaScript实现一个简单易懂的验证码功能。 首先,我们需要理解验证码的基本原理。验证码...

    表单验证码生成_js

    对于JavaScript验证码,通常会配合Ajax技术,当用户提交表单时,服务器会验证输入的验证码是否与服务器端保存的一致,如果不一致,则返回错误提示。 在"CheckCode"这个文件中,很可能是包含了一个完整的JavaScript...

    用JavaScript 刷新验证码

    用JavaScript 刷新验证码

    js验证码生成

    一个基本的JavaScript验证码生成示例可能包括以下步骤: - 创建一个HTML元素(如`&lt;div&gt;`或`&lt;canvas&gt;`)用于显示验证码。 - 使用JavaScript生成随机字符串。 - 如果使用Canvas,使用`canvas.getContext('2d')`...

    89、纯js验证码插件代码

    纯JavaScript验证码通常包括以下几个关键组件: 1. **随机生成验证码**:为了确保每次生成的验证码都是唯一的,我们需要编写一个函数来生成随机字符串。这个字符串可能包含数字、大小写字母或其他字符,长度可以...

Global site tag (gtag.js) - Google Analytics