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 相关文章推荐
ExtJS 工具栏 分页事件参数
Mar 05 Javascript
js弹出层(jQuery插件形式附带reLoad功能)
Apr 12 Javascript
js的onload事件及初始化按钮事件示例代码
Sep 25 Javascript
js定时器(执行一次、重复执行)
Mar 07 Javascript
jQuery插件FusionCharts实现的3D帕累托图效果示例【附demo源码】
Mar 25 jQuery
Vue2.0利用vue-resource上传文件到七牛的实例代码
Jul 28 Javascript
利用jqprint插件打印页面内容的实现方法
Jan 09 Javascript
vue中本地静态图片路径写法
Mar 06 Javascript
WebSocket的通信过程与实现方法详解
Apr 29 Javascript
Vue实现Layui的集成方法步骤
Apr 10 Javascript
深入了解Vue3模板编译原理
Nov 19 Vue.js
vue使用element-ui按需引入
May 20 Vue.js
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 visitFile()遍历指定文件夹函数
2010/08/21 PHP
PHP函数func_num_args用法实例分析
2015/12/07 PHP
PHP实现基于栈的后缀表达式求值功能
2017/11/10 PHP
PHP实现微信提现功能(微信商城)
2019/11/21 PHP
javascript 文本框水印/占位符(watermark/placeholder)实现方法
2012/01/15 Javascript
二叉树的非递归后序遍历算法实例详解
2014/02/07 Javascript
jQuery中$.get、$.post、$.getJSON和$.ajax的用法详解
2014/11/19 Javascript
浅谈javascript中自定义模版
2015/01/29 Javascript
JavaScript中的getMilliseconds()方法使用详解
2015/06/10 Javascript
jQuery移动web开发中的页面初始化与加载事件
2015/12/03 Javascript
javascript拖拽效果延伸学习
2016/04/04 Javascript
Bootstrap开发实战之响应式轮播图
2016/06/02 Javascript
NPM 安装cordova时警告:npm WARN deprecated minimatch@2.0.10: Please update to minimatch 3.0.2 or higher to
2016/12/20 Javascript
bootstrap轮播图示例代码分享
2017/05/17 Javascript
使用vue构建一个上传图片表单
2017/07/04 Javascript
详解express与koa中间件模式对比
2017/08/07 Javascript
微信小程序checkbox组件使用详解
2018/01/31 Javascript
vue 中动态绑定class 和 style的方法代码详解
2018/06/01 Javascript
在vue使用clipboard.js进行一键复制文本的实现示例
2019/01/15 Javascript
Javascript原型链及instanceof原理详解
2020/05/25 Javascript
python实现的重启关机程序实例
2014/08/21 Python
Python正则表达式教程之二:捕获篇
2017/03/02 Python
详解Python进程间通信之命名管道
2017/08/28 Python
python中的turtle库函数简单使用教程
2018/07/23 Python
Python连接Mssql基础教程之Python库pymssql
2018/09/16 Python
python命令行参数用法实例分析
2019/06/25 Python
py-charm延长试用期限实例
2019/12/22 Python
python时间日期操作方法实例小结
2020/02/06 Python
python打包生成so文件的实现
2020/10/30 Python
邮政员工辞职信
2014/01/16 职场文书
大学生饮食连锁店创业计划书
2014/01/17 职场文书
体育教学随笔感言
2014/02/24 职场文书
企业群众路线教育实践活动心得体会
2014/11/03 职场文书
2015年机关后勤工作总结
2015/05/26 职场文书
如何计划开一家便利店?
2019/07/31 职场文书
解决Nginx 配置 proxy_pass 后 返回404问题
2021/03/31 Servers