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 相关文章推荐
js表格分页实现代码
Sep 18 Javascript
JS面向对象编程浅析
Aug 28 Javascript
jQuery侧边栏随窗口滚动实现方法
Mar 04 Javascript
浅谈javascript原型链与继承
Jul 13 Javascript
jquery siblings获取同辈元素用法实例分析
Jul 25 Javascript
将鼠标焦点定位到文本框最后(代码分享)
Jan 11 Javascript
前端开发必知的15个jQuery小技巧
Jan 22 Javascript
如何解决vue与传统jquery插件冲突
Mar 20 Javascript
js实现本地图片文件拖拽效果
Jul 18 Javascript
Vue.js 中的 v-cloak 指令及使用详解
Nov 19 Javascript
JS箭头函数和常规函数之间的区别实例分析【 5 个区别】
May 27 Javascript
微信小程序实现上拉加载功能示例【加载更多数据/触底加载/点击加载更多数据】
May 29 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错误抑制符(@)导致引用传参失败Bug的分析
2011/05/02 PHP
PHP使用NuSOAP调用Web服务的方法
2015/07/18 PHP
Symfony2学习笔记之系统路由详解
2016/03/17 PHP
php下载文件,添加响应头的简单实例
2016/09/22 PHP
Prototype Class对象学习
2009/07/19 Javascript
JavaScript 设计模式 安全沙箱模式
2010/09/24 Javascript
js判断输入是否为正整数、浮点数等数字的函数代码
2010/11/17 Javascript
Fastest way to build an HTML string(拼装html字符串的最快方法)
2011/08/20 Javascript
js验证整数加保留小数点的简单实例
2013/12/02 Javascript
jQuery中odd选择器的定义和用法
2014/12/23 Javascript
JavaScript中字符串拼接的基本方法
2015/07/07 Javascript
javascript经典特效分享 手风琴、轮播图、图片滑动
2016/09/14 Javascript
Angular2学习笔记——详解NgModule模块
2016/12/02 Javascript
bootstrap警告框使用方法解析
2017/01/13 Javascript
js实现文本上下来回滚动
2017/02/03 Javascript
利用Vue.js实现求职在线之职位查询功能
2017/07/03 Javascript
JS简单实现滑动加载数据的方法示例
2017/10/18 Javascript
微信小程序select下拉框实现效果
2019/05/15 Javascript
微信小程序 wx:for遍历循环使用实例解析
2019/09/09 Javascript
webpack是如何实现模块化加载的方法
2019/11/06 Javascript
vue-router懒加载的3种方式汇总
2021/02/28 Vue.js
python中的多重继承实例讲解
2014/09/28 Python
python爬取网易云音乐评论
2018/11/16 Python
Python将视频或者动态图gif逐帧保存为图片的方法
2019/09/10 Python
Tensorflow: 从checkpoint文件中读取tensor方式
2020/02/10 Python
使用wxpy实现自动发送微信消息功能
2020/02/28 Python
Pytorch通过保存为ONNX模型转TensorRT5的实现
2020/05/25 Python
澳大利亚购买最佳炊具品牌网站:Cookware Brands
2019/02/16 全球购物
益达广告词
2014/03/14 职场文书
学生安全承诺书
2014/05/22 职场文书
论群众路线学习笔记
2014/11/06 职场文书
党员个人总结范文
2015/02/14 职场文书
采购部2015年度工作总结
2015/07/24 职场文书
2016高校自主招生自荐信范文
2016/01/28 职场文书
解决python存数据库速度太慢的问题
2021/04/23 Python
Python下载商品数据并连接数据库且保存数据
2022/03/31 Python