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的强大选择器小结
Dec 27 Javascript
javascript获取当前鼠标坐标的方法
Jan 10 Javascript
jquery常用的12个小功能
Jul 22 Javascript
如何判断出一个js对象是否一个dom对象
Nov 24 Javascript
使用JavaScript解决网页图片拉伸问题(推荐)
Nov 25 Javascript
js以及jquery实现手风琴效果
Apr 17 Javascript
React 无状态组件(Stateless Component) 与高阶组件
Aug 14 Javascript
使用vue 国际化i18n 实现多实现语言切换功能
Oct 11 Javascript
Vue.js 中的 v-cloak 指令及使用详解
Nov 19 Javascript
elementUI Tree 树形控件的官方使用文档
Apr 25 Javascript
微信小程序把百度地图坐标转换成腾讯地图坐标过程详解
Jul 10 Javascript
uni-app使用微信小程序云函数的步骤示例
May 22 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 setcookie设置Cookie用法(及设置无效的问题)
2011/07/13 PHP
php实现微信企业转账功能
2018/10/02 PHP
Date对象格式化函数代码
2010/07/17 Javascript
Javascript 类、命名空间、代码组织代码
2011/07/31 Javascript
JS鼠标事件大全 推荐收藏
2011/11/01 Javascript
JavaScript中访问节点对象的方法有哪些如何使用
2013/09/24 Javascript
js时间比较示例分享(日期比较)
2014/03/05 Javascript
jQuery中slideUp 和 slideDown 的点击事件
2015/02/26 Javascript
JavaScript制作简易的微信打飞机
2015/03/31 Javascript
在Javascript中处理字符串之big()方法的使用
2015/06/08 Javascript
原生JavaScript实现动态省市县三级联动下拉框菜单实例代码
2016/02/03 Javascript
ros::spin() 和 ros::spinOnce()函数的区别及详解
2016/10/01 Javascript
网页瀑布流布局jQuery实现代码
2016/10/21 Javascript
Vue数据驱动模拟实现1
2017/01/11 Javascript
layui表格内容溢出的解决方法
2019/09/06 Javascript
[54:10]完美世界DOTA2联赛PWL S2 Magma vs FTD 第二场 11.29
2020/12/03 DOTA
对Python 窗体(tkinter)树状数据(Treeview)详解
2018/10/11 Python
使用memory_profiler监测python代码运行时内存消耗方法
2018/12/03 Python
python之Flask实现简单登录功能的示例代码
2018/12/24 Python
python将控制台输出保存至文件的方法
2019/01/07 Python
浅析python redis的连接及相关操作
2019/11/07 Python
ansible动态Inventory主机清单配置遇到的坑
2020/01/19 Python
M1芯片安装python3.9.1的实现
2021/02/02 Python
HTML5之tabindex属性全面解析
2016/07/07 HTML / CSS
Spartoo芬兰:欧洲最大的网上鞋店
2016/08/28 全球购物
美国领先的商务贺卡出版商:The Gallery Collection
2018/02/13 全球购物
俄罗斯隐形眼镜和眼镜在线商店:Cronos
2020/06/02 全球购物
华为智利官方商店:Huawei Chile
2020/05/09 全球购物
工程项目建议书范文
2014/03/12 职场文书
见义勇为事迹材料
2014/12/24 职场文书
入党自荐书范文
2015/03/05 职场文书
小学教学工作总结2015
2015/05/13 职场文书
教育教学读书笔记
2015/07/02 职场文书
仓库管理制度范本
2015/08/04 职场文书
SQL注入的实现以及防范示例详解
2021/06/02 MySQL
Java数组详细介绍及相关工具类
2022/04/14 Java/Android