javascript实现数字+字母验证码的简单实例


Posted in Javascript onFebruary 10, 2014

实例如下:

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>js验证码</title>  
    <style type="text/css">  
        .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;   
        }   
    </style>  
    <script language="javascript" type="text/javascript">       var code ; //在全局 定义验证码   
     function createCode()   
     {    
       code = "";   
       var codeLength = 4;//验证码的长度   
       var checkCode = document.getElementById("checkCode");   
       var selectChar = 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','wW','x','y','z');//所有候选组成验证码的字符,当然也可以用中文的   
       for(var i=0;i<codeLength;i++)   
       {   
           
       var charIndex = Math.floor(Math.random()*36);   
       code +=selectChar[charIndex];   
          
       }   
//       alert(code);   
       if(checkCode)   
       {   
         checkCode.className="code";   
         checkCode.value = code;   
       }   
     }   
      function validate ()   
     {   
       var inputCode = document.getElementById("input1").value;   
       if(inputCode.length <=0)   
       {   
           alert("请输入验证码!");   
       }   
       else if(inputCode != code )   
       {   
          alert("验证码输入错误!");   
          createCode();//刷新验证码   
       }   
       else   
       {   
         alert("OK");   
       }   
       }   
    </script>  
</head>  
<body onload="createCode()">  
<form  action="#">  
     <input  type="text"   id="input1" />  
    <input type="text" onclick="createCode()" readonly="readonly" id="checkCode" class="unchanged" style="width: 80px"  /><br />  
    <input id="Button1"  onclick="validate();" type="button" value="确定" />    
</form>  
</body>  
</html>
Javascript 相关文章推荐
网站繁简切换的JS遇到页面卡死的解决方法
Mar 12 Javascript
使用jQuery实现的掷色子游戏动画效果
Mar 14 Javascript
JavaScript验证图片类型(扩展名)的函数分享
May 05 Javascript
使用delegate方法为一个tr标签加一个链接
Jun 27 Javascript
jQuery基础知识小结
Dec 22 Javascript
js精美的幻灯片画集特效代码分享
Aug 29 Javascript
js仿iphone秒表功能 计算平均数
Jan 11 Javascript
原生JS改变透明度实现轮播效果
Mar 24 Javascript
Vue单页面应用保证F5强刷不清空数据的解决方案
Jan 31 Javascript
微信小程序时间标签和时间范围的联动效果
Feb 15 Javascript
详解 微信小程序开发框架(MINA)
May 17 Javascript
three.js 将图片马赛克化的示例代码
Jul 31 Javascript
Jquery获取元素的父容器对象示例代码
Feb 10 #Javascript
javascript类型转换使用方法
Feb 08 #Javascript
jquery和雅虎的yql服务实现天气预报服务示例
Feb 08 #Javascript
遍历DOM对象内的元素属性示例代码
Feb 08 #Javascript
JS的参数传递示例介绍
Feb 08 #Javascript
js控制分页打印、打印分页示例
Feb 08 #Javascript
javascript中的self和this用法小结
Feb 08 #Javascript
You might like
PHP 远程文件管理,可以给表格排序,遍历目录,时间排序
2009/08/07 PHP
php中Session的生成机制、回收机制和存储机制探究
2014/08/19 PHP
memcache一致性hash的php实现方法
2015/03/05 PHP
php基于PDO连接MSSQL示例DEMO
2016/07/13 PHP
php中的explode()函数实例介绍
2019/01/18 PHP
Laravel Eloquent分表方法并使用模型关联的实现
2019/11/25 PHP
用JS写的一个TableView控件代码
2010/01/23 Javascript
基于jquery插件制作左右按钮与标题文字图片切换效果
2013/11/07 Javascript
JavaScript设计模式之观察者模式(发布者-订阅者模式)
2014/09/24 Javascript
node.js中的fs.futimes方法使用说明
2014/12/17 Javascript
jQuery中contents()方法用法实例
2015/01/08 Javascript
jQuery中的pushStack实现原理和应用实例
2015/02/03 Javascript
jQuery实现元素拖拽并cookie保存顺序的方法
2016/02/20 Javascript
深入浅析JavaScript中的3DES
2016/08/24 Javascript
Vue.js教程之计算属性
2016/11/11 Javascript
Nodejs进阶:核心模块net入门学习与实例讲解
2016/11/21 NodeJs
vue 中自定义指令改变data中的值
2017/06/02 Javascript
微信页面弹出键盘后iframe内容变空白的解决方案
2017/09/20 Javascript
webpack + vue 打包生成公共配置文件(域名) 方便动态修改
2019/08/29 Javascript
小程序实现录音上传功能
2019/11/22 Javascript
详解JS预解析原理
2020/06/16 Javascript
python实现将文本转换成语音的方法
2015/05/28 Python
Python使用gensim计算文档相似性
2016/04/10 Python
利用python模拟实现POST请求提交图片的方法
2017/07/25 Python
Python 记录日志的灵活性和可配置性介绍
2018/02/27 Python
Python中一行和多行import模块问题
2018/04/01 Python
Python爬虫抓取技术的一些经验
2019/07/12 Python
pycharm 复制代码出现空格的解决方式
2021/01/15 Python
J2EE的优越性主要表现在哪些方面
2016/03/28 面试题
食品行业求职人的自我评价
2014/01/19 职场文书
机关党员进社区活动总结
2014/07/05 职场文书
会计人员演讲稿
2014/09/11 职场文书
领导班子党的群众路线教育实践活动对照检查材料
2014/09/25 职场文书
商家认证委托书格式
2014/10/16 职场文书
导游词之江苏同里古镇
2019/11/18 职场文书
利用 Python 的 Pandas和 NumPy 库来清理数据
2022/04/13 Python