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调用asp.net 页面后台的实现代码
Apr 27 Javascript
Javascript base64编码实现代码
Dec 02 Javascript
jquery简单实现滚动条下拉DIV固定在头部不动
Nov 25 Javascript
javascript控制在光标位置插入文字适合表情的插入
Jun 09 Javascript
深入理解逻辑表达式的用法 与或非的用法
Jun 06 Javascript
node.js与C语言 实现遍历文件夹下最大的文件,并输出路径,大小
Jan 20 Javascript
requirejs按需加载angularjs文件实例
Jun 08 Javascript
vue移动端裁剪图片结合插件Cropper的使用实例代码
Jul 10 Javascript
vue的toast弹窗组件实例详解
May 14 Javascript
vuex实现的简单购物车功能示例
Feb 13 Javascript
Vue获取页面元素的相对位置的方法示例
Feb 05 Javascript
vue中对象数组去重的实现
Feb 06 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图片的裁剪与缩放生成符合需求的缩略图
2013/01/11 PHP
解析argc argv在php中的应用
2013/06/24 PHP
PHP之APC缓存详细介绍 apc模块安装
2014/01/13 PHP
php获取指定(访客)IP所有信息(地址、邮政编码、国家、经纬度等)的方法
2015/07/06 PHP
PHP实现链表的定义与反转功能示例
2018/06/09 PHP
PHP addcslashes()函数讲解
2019/02/03 PHP
jquery JSON的解析方式
2009/07/25 Javascript
js实现带搜索功能的下拉框实时搜索实时匹配
2013/11/05 Javascript
JavaScript获取某年某月的最后一天附截图
2014/06/23 Javascript
借助JavaScript脚本判断浏览器Flash Player信息的方法
2014/07/09 Javascript
js模仿php中strtotime()与date()函数实现方法
2015/08/11 Javascript
nodejs实现bigpipe异步加载页面方案
2016/01/26 NodeJs
Jquery中attr与prop的区别详解
2017/05/27 jQuery
Vue EventBus自定义组件事件传递
2018/06/25 Javascript
微信小程序遍历Echarts图表实现多个饼图
2019/04/25 Javascript
[01:07]2015国际邀请赛 中国区预选赛精彩回顾
2015/06/15 DOTA
Python选择排序、冒泡排序、合并排序代码实例
2015/04/10 Python
进一步探究Python的装饰器的运用
2015/05/05 Python
利用python求解物理学中的双弹簧质能系统详解
2017/09/29 Python
python实现二叉树的遍历
2017/12/11 Python
Python面向对象程序设计示例小结
2019/01/30 Python
远程部署工具Fabric详解(支持Python3)
2019/07/04 Python
Python调用百度根据经纬度查询地址的示例代码
2019/07/07 Python
Python字符串和正则表达式中的反斜杠('\')问题详解
2019/09/03 Python
Python-jenkins 获取job构建信息方式
2020/05/12 Python
TensorFlow固化模型的实现操作
2020/05/26 Python
html5适合移动应用开发的12大特性
2014/03/19 HTML / CSS
SISLEY希思黎官方旗舰店:享誉全球的奢华植物美容品牌
2018/04/25 全球购物
设置器与访问器的定义以及各自特点
2016/01/08 面试题
消防安全检查制度
2014/02/04 职场文书
民事起诉状范文
2015/05/19 职场文书
预备党员转正意见
2015/06/01 职场文书
美容院员工规章制度
2015/08/05 职场文书
2016年党建工作简报
2015/11/26 职场文书
2016年幼儿园万圣节活动总结
2016/04/05 职场文书
Vue实现下拉加载更多
2021/05/09 Vue.js