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 相关文章推荐
用JAVASCRIPT如何给&amp;lt;textarea&amp;gt;&amp;lt;/textarea&amp;gt;赋值
Apr 20 Javascript
JavaScript实现弹出子窗口并传值给父窗口
Dec 18 Javascript
JavaScript让网页出现渐隐渐显背景颜色的方法
Apr 21 Javascript
HTML5 Shiv完美解决IE(IE6/IE7/IE8)不兼容HTML5标签的方法
Nov 25 Javascript
JS深度拷贝Object Array实例分析
Mar 31 Javascript
Javascript必知必会(四)js类型转换
Jun 08 Javascript
利用JS判断客户端类型你应该知道的四种方法
Dec 22 Javascript
Gulp实现静态网页模块化的方法详解
Jan 09 Javascript
vue 2.0 购物车小球抛物线的示例代码
Feb 01 Javascript
JavaScript函数式编程(Functional Programming)箭头函数(Arrow functions)用法分析
May 22 Javascript
layui的布局和表格的渲染以及动态生成表格的方法
Sep 18 Javascript
element-ui 文件上传修改文件名的方法示例
Nov 05 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
使用bcompiler对PHP文件进行加密的代码
2010/08/29 PHP
PHP基础知识回顾
2012/08/16 PHP
php中url函数介绍及使用示例
2014/02/13 PHP
ThinkPHP多表联合查询的常用方法
2020/03/24 PHP
使用PHP生成PDF方法详解
2015/01/23 PHP
一张表搞清楚php is_null、empty、isset的区别
2015/07/07 PHP
JavaScript 输入框内容格式验证代码
2010/02/11 Javascript
JavaScript取得鼠标绝对位置程序代码介绍
2012/09/16 Javascript
解决jquery操作checkbox火狐下第二次无法勾选问题
2014/02/10 Javascript
JS中三目运算符和if else的区别分析与示例
2014/11/21 Javascript
js实现简单鼠标跟随效果的方法
2015/04/10 Javascript
JS弹出对话框实现方法(三种方式)
2015/12/18 Javascript
jquery中的常见问题及快速解决方法小结
2016/06/14 Javascript
浅析JavaScript中break、continue和return的区别
2016/11/30 Javascript
AngularJS中$http的交互问题
2017/03/29 Javascript
jquery使用iscorll实现上拉、下拉加载刷新
2017/10/26 jQuery
微信小程序多音频播放进度条问题
2018/08/28 Javascript
[49:17]DOTA2-DPC中国联赛 正赛 Phoenix vs Dynasty BO3 第三场 1月26日
2021/03/11 DOTA
python获得linux下所有挂载点(mount points)的方法
2015/04/29 Python
python文件操作之目录遍历实例分析
2015/05/20 Python
一行代码让 Python 的运行速度提高100倍
2018/10/08 Python
小白入门篇使用Python搭建点击率预估模型
2018/10/12 Python
python url 参数修改方法
2018/12/26 Python
Python 使用list和tuple+条件判断详解
2019/07/30 Python
Django认证系统user对象实现过程解析
2020/03/02 Python
Windows+Anaconda3+PyTorch+PyCharm的安装教程图文详解
2020/04/03 Python
CSS3实现莲花绽放的动画效果
2020/11/06 HTML / CSS
HTML5 CSS3实现一个精美VCD包装盒个性幻灯片案例
2014/06/16 HTML / CSS
英国音乐设备和乐器商店:Gear4music
2017/10/16 全球购物
波兰在线儿童和婴儿用品零售商:pinkorblue
2019/06/29 全球购物
VisionPros美国站:加拿大在线隐形眼镜和眼镜零售商
2020/02/11 全球购物
什么是动态端口(Dynamic Ports)?动态端口的范围是多少?
2014/12/12 面试题
教导处工作制度
2014/01/18 职场文书
质量主管工作职责
2014/09/26 职场文书
法律讲堂观后感
2015/06/11 职场文书
公司员工违法违章行为检讨书
2019/06/24 职场文书