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 相关文章推荐
JAVASCRIPT函数作用域和提前声明 分享
Aug 22 Javascript
jquery实现点击消失的代码
Mar 03 Javascript
Js实现手机发送验证码时按钮延迟操作
Jun 20 Javascript
JavaScript学习笔记之JS函数
Jan 22 Javascript
js判断鼠标左、中、右键哪个被点击的方法
Jan 27 Javascript
AngularJS学习笔记之TodoMVC的分析
Feb 22 Javascript
JavaScript实现倒计时代码段Item1(非常实用)
Nov 03 Javascript
基于jQuery实现拖拽图标到回收站并删除功能
Nov 25 Javascript
jQuery实现图片文字淡入淡出效果
Dec 21 Javascript
iscroll碰到Select无法选择下拉刷新的解决办法
May 21 Javascript
jQuery实现移动端Tab选项卡效果
Mar 15 Javascript
Vue项目中使用better-scroll实现菜单映射功能方法
Sep 11 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
php中{}大括号是什么意思
2013/12/01 PHP
PHP如何使用Memcached
2016/04/05 PHP
PHP中include/require/include_once/require_once使用心得
2016/08/28 PHP
PHP获取二叉树镜像的方法
2018/01/17 PHP
PHP7引入的&quot;??&quot;和&quot;?:&quot;的区别讲解
2019/04/08 PHP
js获取单选按钮的数据
2006/11/27 Javascript
读jQuery之九 一些瑕疵说明
2011/06/21 Javascript
很全面的JavaScript常用功能汇总集合
2016/01/22 Javascript
Winform客户端向web地址传参接收参数的方法
2016/05/17 Javascript
javascript中闭包概念与用法深入理解
2016/12/15 Javascript
谈谈第三方App接入微信登录 解读
2016/12/27 Javascript
微信小程序表单验证错误提示效果
2017/05/19 Javascript
JavaScript数组_动力节点Java学院整理
2017/06/26 Javascript
ES6学习之变量的两种命名方法示例
2017/07/18 Javascript
vue中如何创建多个ueditor实例教程
2017/11/14 Javascript
jquery ztree实现右键收藏功能
2017/11/20 jQuery
JS实现商品橱窗特效
2020/01/09 Javascript
只有 20 行的 JavaScript 模板引擎实例详解
2020/05/11 Javascript
Python工程师面试必备25条知识点
2018/01/17 Python
Python wxPython库Core组件BoxSizer用法示例
2018/09/03 Python
详解Selenium+PhantomJS+python简单实现爬虫的功能
2019/07/14 Python
基于Django OneToOneField和ForeignKey的区别详解
2020/03/30 Python
windows10环境下用anaconda和VScode配置的图文教程
2020/03/30 Python
关于Keras Dense层整理
2020/05/21 Python
利用python对excel中一列的时间数据更改格式操作
2020/07/14 Python
python实现移动木板小游戏
2020/10/09 Python
Koral官方网站:女性时尚运动服
2019/04/10 全球购物
Watch Station官方网站:世界一流的手表和智能手表
2020/01/05 全球购物
旅游管理专业个人求职信范文
2013/12/24 职场文书
甜品店的创业计划书范文
2014/01/02 职场文书
舞蹈专业求职信
2014/06/13 职场文书
企业员工辞职信范文
2015/05/12 职场文书
2015年度校学生会工作总结报告
2015/05/23 职场文书
《生物入侵者》教学反思
2016/02/16 职场文书
Nginx域名转发https访问的实现
2021/03/31 Servers
nginx 配置指令之location使用详解
2022/05/25 Servers