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);//所有候选组成验证码的字符,当然也可以用中文的   
       for(var i=0;i<codeLength;i++)   
       {   
           
       var charIndex = Math.floor(Math.random()*10);   
       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的with语句使用方法
Sep 21 Javascript
jQuery + Flex 通过拖拽方式动态改变图片的代码
Aug 03 Javascript
js给dropdownlist添加选项的小例子
Mar 04 Javascript
Jquery实现的tab效果可以指定默认显示第几页
Oct 16 Javascript
推荐25个超炫的jQuery网格插件
Nov 28 Javascript
XMLHttpRequest Level 2 使用指南
Aug 26 Javascript
Node.js读写文件之批量替换图片的实现方法
Sep 07 Javascript
input框中自动展示当前日期yyyy/mm/dd的实现方法
Jul 06 Javascript
vue-router 源码实现前端路由的两种方式
Jul 02 Javascript
JS调用安卓手机摄像头扫描二维码
Oct 16 Javascript
详解JavaScript实现动态的轮播图效果
Apr 29 Javascript
微信小程序 select 下拉框组件功能
Sep 09 Javascript
javascript实现数字+字母验证码的简单实例
Feb 10 #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
You might like
收音机指标测试方法及仪器
2021/03/01 无线电
测试您的 PHP 水平的题目
2007/05/30 PHP
《PHP编程最快明白》第五讲:php目录、文件操作
2010/11/01 PHP
检查php文件中是否含有bom的函数
2012/05/31 PHP
javascript 程序库的比较(一)之DOM功能
2010/04/07 Javascript
解决jQuery插件tipswindown与hintbox冲突
2010/11/05 Javascript
为jQuery增加join方法的实现代码
2010/11/28 Javascript
JQuery模板插件 jquery.tmpl 动态ajax扩展
2011/11/10 Javascript
js中判断对象是否为空的三种实现方法
2013/12/23 Javascript
Nodejs实战心得之eventproxy模块控制并发
2015/10/27 NodeJs
详解Vue.js iview实现树形权限表(可扩展表)
2018/09/30 Javascript
详解webpack+ES6+Sass搭建多页面应用
2018/11/05 Javascript
vue在index.html中引入静态文件不生效问题及解决方法
2019/04/29 Javascript
深入了解JavaScript 的 WebAssembly
2019/06/15 Javascript
微信小程序登录对接Django后端实现JWT方式验证登录详解
2019/07/29 Javascript
微信小程序 高德地图路线规划实现过程详解
2019/08/05 Javascript
Vue中避免滥用this去读取data中数据
2021/03/02 Vue.js
Python实现模拟分割大文件及多线程处理的方法
2017/10/10 Python
VSCode下配置python调试运行环境的方法
2018/04/06 Python
python使用信号量动态更新配置文件的操作
2020/04/01 Python
基于 HTML5 WebGL 实现的医疗物流系统
2019/10/08 HTML / CSS
加拿大约会网站:EliteSingles.ca
2018/01/12 全球购物
欧洲当代手工玻璃和瓷器的领先品牌:LSA International
2018/06/03 全球购物
中国旅游网站:途牛旅游网
2019/09/29 全球购物
No7 Beauty美国官网:英国国民护肤品牌
2019/10/31 全球购物
《雪地里的小画家》教学反思
2014/02/22 职场文书
明信片寄语大全
2014/04/08 职场文书
财务工作犯错检讨书
2014/10/07 职场文书
质监局领导班子践行群众路线整改方案
2014/10/26 职场文书
2014司机年终工作总结
2014/12/05 职场文书
岳麓书院导游词
2015/02/03 职场文书
小学教师师德师风自我评价
2015/03/04 职场文书
学校远程教育工作总结
2015/08/11 职场文书
pytest配置文件pytest.ini的详细使用
2021/04/17 Python
pdf论文中python画的图Type 3 fonts字体不兼容的解决方案
2021/04/24 Python
PostgreSQL并行计算算法及参数强制并行度设置方法
2022/04/07 PostgreSQL