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操作cookie的函数代码
Oct 03 Javascript
javascript 数字格式化输出的实现代码
Dec 10 Javascript
原生javascript实现匀速运动动画效果
Feb 26 Javascript
jquery二级目录选中当前页的css样式
Dec 08 Javascript
jQuery完成表单验证的实例代码(纯代码)
Sep 30 jQuery
详解使用React进行组件库开发
Feb 06 Javascript
关于Angularjs中自定义指令一些有价值的细节和技巧小结
Apr 22 Javascript
layui table设置前台过滤转义等方法
Aug 17 Javascript
JS实现数组去重,显示重复元素及个数的方法示例
Jan 21 Javascript
JavaScript 函数用法详解【函数定义、参数、绑定、作用域、闭包等】
May 12 Javascript
vue实现div单选多选功能
Jul 16 Javascript
JavaScript基于SVG的图片切换效果实例代码
Dec 15 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
php的header和asp中的redirect比较
2006/10/09 PHP
PHP MemCached高级缓存配置图文教程
2010/08/05 PHP
获取URL文件名后缀
2013/10/24 PHP
PHP模块memcached使用指南
2014/12/08 PHP
PHP后端银联支付及退款实例代码
2017/06/23 PHP
在Z-Blog中运行代码[html][/html](纯JS版)
2007/03/25 Javascript
HTA版JSMin(省略修饰语若干)基于javascript语言编写
2009/12/24 Javascript
jQuery使用之处理页面元素用法实例
2015/01/19 Javascript
javascript断点调试心得分享
2016/04/23 Javascript
Node.js 日志处理模块log4js
2016/08/28 Javascript
JS遍历对象属性的方法示例
2017/01/10 Javascript
详解create-react-app 自定义 eslint 配置
2018/06/07 Javascript
实例详解Vue项目使用eslint + prettier规范代码风格
2018/08/20 Javascript
VUE+Element UI实现简单的表格行内编辑效果的示例的代码
2018/10/31 Javascript
vue实现权限控制路由(vue-router 动态添加路由)
2019/11/04 Javascript
关于小程序优化的一些建议(小结)
2020/12/10 Javascript
用Python的pandas框架操作Excel文件中的数据教程
2015/03/31 Python
Python3中常用的处理时间和实现定时任务的方法的介绍
2015/04/07 Python
使用Python下的XSLT API进行web开发的简单教程
2015/04/15 Python
Python中多线程的创建及基本调用方法
2016/07/08 Python
Python3匿名函数lambda介绍与使用示例
2019/05/18 Python
Pandas之read_csv()读取文件跳过报错行的解决
2020/04/21 Python
解析python 类方法、对象方法、静态方法
2020/08/15 Python
五分钟带你搞懂python 迭代器与生成器
2020/08/30 Python
小程序canvas中文字设置居中锚点
2019/04/16 HTML / CSS
客服服务心得体会
2013/12/30 职场文书
儿子婚宴答谢词
2014/01/09 职场文书
80后职场人的职业生涯规划
2014/03/08 职场文书
八荣八耻的活动方案
2014/08/16 职场文书
班子成员四风问题自我剖析材料
2014/09/29 职场文书
一年级班主任工作总结2014
2014/11/08 职场文书
一年级数学上册复习计划
2015/01/17 职场文书
二年级语文上册复习计划
2015/01/19 职场文书
2015年党风建设工作总结
2015/04/29 职场文书
写给女朋友的检讨书
2015/05/06 职场文书
小学家庭教育心得体会
2016/01/14 职场文书