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 相关文章推荐
ajax不执行success回调而是执行了error回调
Dec 10 Javascript
兼容FF和IE的动态table示例自写
Oct 21 Javascript
浅谈JavaScript Array对象
Dec 29 Javascript
JQuery实现鼠标移动图片显示描述层的方法
Jun 25 Javascript
不依赖Flash和任何JS库实现文本复制与剪切附源码下载
Oct 09 Javascript
关于axios返回空对象的问题解决
Apr 04 Javascript
js中获取URL参数的共用方法getRequest()方法实例详解
Oct 24 Javascript
Electron 如何调用本地模块的方法
Feb 01 Javascript
vue2.0基于vue-cli+element-ui制作树形treeTable
Apr 30 Javascript
基于Vue SEO的四种方案(小结)
Jul 01 Javascript
解决Nuxt使用axios跨域问题
Jul 06 Javascript
javascript实现京东登录显示隐藏密码
Aug 02 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调用数据库的存贮过程!
2006/10/09 PHP
解析PHP实现下载文件的两种方法
2013/07/05 PHP
php运行提示:Fatal error Allowed memory size内存不足的解决方法
2014/12/17 PHP
PHP文件缓存类示例分享
2015/01/30 PHP
学习YUI.Ext 第四天--对话框Dialog的使用
2007/03/10 Javascript
一款Jquery 分页插件的改造方法(服务器端分页)
2011/07/11 Javascript
javascript日期对象格式化为字符串的实现方法
2014/01/14 Javascript
js加入收藏以及使用Jquery更改透明度
2014/01/26 Javascript
jQuery插件简单实现方法
2015/07/18 Javascript
jQuery实现滚动切换的tab选项卡效果代码
2015/08/26 Javascript
jquery对象访问是什么及使用方法介绍
2016/05/03 Javascript
Bootstrap布局方式详解
2016/05/27 Javascript
Laravel中常见的错误与解决方法小结
2016/08/30 Javascript
利用JS提交表单的几种方法和验证(必看篇)
2016/09/17 Javascript
AngularJS自定义控件实例详解
2016/12/13 Javascript
Vue SSR 组件加载问题
2018/05/02 Javascript
通过封装scroll.js 获取滚动条的值
2018/07/13 Javascript
全面解析vue router 基本使用(动态路由,嵌套路由)
2018/09/02 Javascript
Vue中用props给data赋初始值遇到的问题解决
2018/11/27 Javascript
利用JS如何获取form表单数据
2019/12/19 Javascript
如何解决vue在ios微信&quot;复制链接&quot;功能问题
2020/03/26 Javascript
[01:02:04]EG vs Liquid 2019国际邀请赛淘汰赛 败者组 BO3 第一场 8.23
2019/09/05 DOTA
python实现代码行数统计示例分享
2014/02/10 Python
浅谈python中的正则表达式(re模块)
2017/10/17 Python
python 实现将字典dict、列表list中的中文正常显示方法
2018/07/06 Python
对Python 中矩阵或者数组相减的法则详解
2019/08/26 Python
结合OpenCV与TensorFlow进行人脸识别的实现
2019/10/10 Python
夜大毕业生自我鉴定
2013/10/31 职场文书
化工专业个人的求职信范文
2013/11/28 职场文书
保险公司早会主持词
2014/03/22 职场文书
趣味运动会开幕词
2015/01/28 职场文书
杭州黄龙洞导游词
2015/02/10 职场文书
三八红旗手主要事迹材料
2015/11/04 职场文书
党员心得体会范文2016
2016/01/23 职场文书
2019年行政人事个人工作总结范本!
2019/07/19 职场文书
新手初学Java List 接口
2021/07/07 Java/Android