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,'a','b','c','d','e','f','g','h','i','j','k','l','m','n','o','p','q','r','s','t','u','v','wW','x','y','z');//所有候选组成验证码的字符,当然也可以用中文的   
       for(var i=0;i<codeLength;i++)   
       {   
           
       var charIndex = Math.floor(Math.random()*36);   
       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 相关文章推荐
JScript中使用ADODB.Stream判断文件编码的代码
Jun 09 Javascript
利用javascript移动div层-javascript 拖动层
Mar 22 Javascript
javascript 函数使用说明
Apr 07 Javascript
jquery dialog键盘事件代码
Aug 01 Javascript
JavaScript中的单引号和双引号报错的解决方法
Sep 01 Javascript
利用jquery实现瀑布流3种案例
Sep 18 Javascript
自己封装的一个简单的倒计时功能实例
Nov 23 Javascript
前端js弹出框组件使用方法
Aug 24 Javascript
jquery 实现复选框的全选操作实例代码
Jan 24 Javascript
解决element-ui中下拉菜单子选项click事件不触发的问题
Aug 22 Javascript
学前端,css与javascript重难点浅析
Jun 11 Javascript
使用vant的地域控件追加全部选项
Nov 03 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
javascript中的self和this用法小结
Feb 08 #Javascript
You might like
利用js调用后台php进行数据处理原码
2006/10/09 PHP
PHP中GET变量的使用
2006/10/09 PHP
浅谈php中mysql与mysqli的区别分析
2013/06/10 PHP
PHP模板引擎Smarty之配置文件在模板变量中的使用方法示例
2016/04/11 PHP
PHP定义字符串的四种方式详解
2018/02/06 PHP
php链式操作的实现方式分析
2019/08/12 PHP
javascript 触发HTML元素绑定的函数
2010/09/11 Javascript
jQuery EasyUI API 中文文档 - Documentation 文档
2011/09/29 Javascript
javascript框架设计之类工厂
2015/06/23 Javascript
基于jquery实现鼠标左右拖动滑块滑动附源码下载
2015/12/23 Javascript
前端路由&amp;webpack基础配置详解
2019/06/10 Javascript
微信小程序 函数防抖 解决重复点击消耗性能问题实现代码
2019/09/12 Javascript
js对象简介与基本用法示例
2020/03/13 Javascript
Javascript生成器(Generator)的介绍与使用
2021/01/31 Javascript
[00:56]2014DOTA2国际邀请赛 DK、iG 赛前探访
2014/07/10 DOTA
理解Python垃圾回收机制
2016/02/12 Python
python3.5绘制随机漫步图
2018/08/27 Python
将tensorflow.Variable中的某些元素取出组成一个新的矩阵示例
2020/01/04 Python
python numpy实现多次循环读取文件 等间隔过滤数据示例
2020/03/14 Python
Python列表去重复项的N种方法(实例代码)
2020/05/12 Python
Python pytesseract验证码识别库用法解析
2020/06/29 Python
HTML5新特性之用SVG绘制微信logo
2016/02/03 HTML / CSS
Anthropologie英国:美国家喻户晓的休闲服装和家居产品品牌
2018/12/05 全球购物
高级Java程序员面试题
2016/06/23 面试题
金融事务专业求职信
2014/04/25 职场文书
装饰工程师岗位职责
2014/06/08 职场文书
简易版租房协议书范本
2014/10/13 职场文书
财政局个人总结
2015/03/04 职场文书
2015年八一建军节演讲稿
2015/03/19 职场文书
2015年测量员工作总结
2015/05/23 职场文书
怒海潜将观后感
2015/06/11 职场文书
农村结婚典礼主持词
2015/06/29 职场文书
婚庆主持词大全
2015/06/30 职场文书
小学班主任工作经验交流材料
2015/11/02 职场文书
如何用JS实现网页瀑布流布局
2021/04/24 Javascript
了解Redis常见应用场景
2021/06/23 Redis