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 相关文章推荐
jquery form表单序列化为对象的示例代码
Mar 05 Javascript
JS、DOM和JQuery之间的关系示例分析
Apr 09 Javascript
jQuery实现拖拽页面元素并将其保存到cookie的方法
Jun 12 Javascript
解析JavaScript中的字符串类型与字符编码支持
Jun 24 Javascript
浅谈js图片前端预览之filereader和window.URL.createObjectURL
Jun 30 Javascript
纯JS实现可拖拽表单的简单实例
Sep 02 Javascript
JavaScript实现拖拽元素对齐到网格(每次移动固定距离)
Nov 30 Javascript
JS简单判断函数是否存在的方法
Feb 13 Javascript
JS对象的深度克隆方法示例
Mar 16 Javascript
JavaScript错误处理和堆栈追踪详解
Apr 18 Javascript
JS 组件系列之Bootstrap Table 冻结列功能IE浏览器兼容性问题解决方案
Jun 30 Javascript
JS中自定义事件的使用与触发操作实例分析
Nov 01 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
iis下php mail函数的sendmail配置方法(官方推荐)
2012/04/25 PHP
php excel reader读取excel内容存入数据库实现代码
2012/12/06 PHP
PHP中error_log()函数的使用方法
2015/01/20 PHP
ThinkPHP中数据操作案例分析
2015/09/27 PHP
Zend Framework框架路由机制代码分析
2016/03/22 PHP
“不能执行已释放的Script代码”错误的原因及解决办法
2007/09/09 Javascript
DWZ刷新dialog解决方法
2013/03/03 Javascript
关于JavaScript与HTML的交互事件
2013/04/12 Javascript
JS Replace 全部替换字符的用法小结
2013/12/24 Javascript
javascript每日必学之运算符
2016/02/16 Javascript
JS加载器如何动态加载外部js文件
2016/05/26 Javascript
EasyUI的doCellTip实现鼠标放到单元格上提示单元格内容
2016/08/24 Javascript
原生JS查找元素的方法(推荐)
2016/11/22 Javascript
详解vue 中使用 AJAX获取数据的方法
2017/01/18 Javascript
JavaScript验证知识整理
2017/03/24 Javascript
Node.js实现文件上传的示例
2017/06/28 Javascript
vuejs实现标签选项卡动态更改css样式的方法
2018/05/31 Javascript
Vue中在新窗口打开页面及Vue-router的使用
2018/06/13 Javascript
Node.js 的 GC 机制详解
2019/06/03 Javascript
JavaScript实现滑动门效果
2020/01/18 Javascript
Node.js操作MongoDB数据库实例分析
2020/01/19 Javascript
python实现telnet客户端的方法
2015/04/15 Python
用Python shell简化开发
2018/08/08 Python
使用Python提取文本中含有特定字符串的方法示例
2020/12/09 Python
Python如何实现感知器的逻辑电路
2020/12/25 Python
高中毕业自我鉴定
2013/12/13 职场文书
端午节粽子促销活动方案
2014/02/02 职场文书
新品发布会主持词
2014/04/02 职场文书
《冬阳童年骆驼队》教学反思
2014/04/15 职场文书
义务教育学校标准化建设汇报材料
2014/08/16 职场文书
公司员工活动策划方案
2014/08/20 职场文书
预备党员群众路线教育实践活动思想汇报2014
2014/10/25 职场文书
2014年居委会工作总结
2014/12/09 职场文书
安全保证书
2015/01/16 职场文书
天鹅湖观后感
2015/06/09 职场文书
python四个坐标点对图片区域最小外接矩形进行裁剪
2021/06/04 Python