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 Tips 为AJAX回调函数传递额外参数的方法
Dec 28 Javascript
js控制frameSet示例
Sep 10 Javascript
js 上下左右键控制焦点(示例代码)
Dec 14 Javascript
js实现动画特效的文字链接鼠标悬停提示的方法
Mar 02 Javascript
jQuery实现文件上传进度条特效
Aug 12 Javascript
js clearInterval()方法的定义和用法
Nov 11 Javascript
封装属于自己的JS组件
Jan 27 Javascript
jquery制做精致的倒计时特效
Jun 13 Javascript
bootstrap轮播模板使用方法详解
Nov 17 Javascript
vue基于mint-ui实现城市选择三级联动
Jun 30 Javascript
vue 项目地址去掉 #的方法
Oct 20 Javascript
Vue修改项目启动端口号方法
Nov 07 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 5.3 下载时 VC9、VC6、Thread Safe、Non Thread Safe的区别分析
2011/03/28 PHP
php初始化对象和析构函数的简单实例
2014/03/11 PHP
php通过数组实现多条件查询实现方法(字符串分割)
2014/05/06 PHP
如何在centos8自定义目录安装php7.3
2019/11/28 PHP
用js实现预览待上传的本地图片
2007/03/15 Javascript
javascript showModalDialog,open取得父窗口的方法
2010/03/10 Javascript
node.js中的console.trace方法使用说明
2014/12/09 Javascript
Javascript动画效果(4)
2016/10/11 Javascript
基于jQuery实现一个marquee无缝滚动的插件
2017/03/09 Javascript
原生Aajax 和jQuery Ajax 写法个人总结
2017/03/24 jQuery
利用JavaScript将Excel转换为JSON示例代码
2019/06/14 Javascript
Vue 嵌套路由使用总结(推荐)
2020/01/13 Javascript
Vue实现导航栏菜单
2020/08/19 Javascript
Python聚类算法之凝聚层次聚类实例分析
2015/11/20 Python
python函数中return后的语句一定不会执行吗?
2017/07/06 Python
Python寻找两个有序数组的中位数实例详解
2018/12/05 Python
实例详解Python装饰器与闭包
2019/07/29 Python
Pytorch中index_select() 函数的实现理解
2019/11/19 Python
Python 防止死锁的方法
2020/07/29 Python
Python使用Selenium模拟浏览器自动操作功能
2020/09/08 Python
Python通过yagmail实现发送邮件代码解析
2020/10/27 Python
以实惠的价格轻松租车,免费取消:Easyrentcars
2019/07/16 全球购物
电气工程师岗位职责
2014/01/01 职场文书
护士自我评价
2014/02/01 职场文书
2014年高考决心书
2014/03/11 职场文书
剪彩仪式主持词
2014/03/19 职场文书
《第一朵杏花》教学反思
2014/04/16 职场文书
市场营销专业求职信
2014/06/17 职场文书
2014年财务工作总结范文
2014/11/11 职场文书
单位租车协议书
2015/01/29 职场文书
小石潭记导游词
2015/02/03 职场文书
2015年政务公开工作总结
2015/05/19 职场文书
个人工作决心书
2015/09/22 职场文书
《梅花魂》教学反思
2016/02/18 职场文书
SQL SERVER中常用日期函数的具体使用
2021/04/08 SQL Server