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 相关文章推荐
jQuery学习4 浏览器的事件模型
Feb 07 Javascript
Jquery Ajax 学习实例2 向页面发出请求 返回JSon格式数据
Mar 15 Javascript
JavaScript arguments 多参传值函数
Oct 24 Javascript
JS中的Replace方法使用经验分享
May 20 Javascript
js简单实现标签云效果实例
Aug 06 Javascript
理解AngularJs指令
Dec 10 Javascript
利用JS实现文字的聚合动画效果
Jan 22 Javascript
微信小程序实现带刻度尺滑块功能
Mar 29 Javascript
vue中使用refs定位dom出现undefined的解决方法
Dec 21 Javascript
webpack里使用jquery.mCustomScrollbar插件的方法
May 30 jQuery
Vue 递归多级菜单的实例代码
May 05 Javascript
Vue实现简单的拖拽效果
Aug 25 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/06/26 PHP
深入分析PHP引用(&amp;)
2014/09/04 PHP
php生成固定长度纯数字编码的方法
2015/07/09 PHP
php微信公众号开发之二级菜单
2018/10/20 PHP
mac pecl 安装php7.1扩展教程
2019/10/17 PHP
javascript随机将第一个dom中的图片添加到第二个div中示例
2013/10/08 Javascript
js导入导出excel(实例代码)
2013/11/25 Javascript
checkbox全选所涉及到的知识点介绍
2013/12/31 Javascript
jquery ztree实现模糊搜索功能
2016/02/25 Javascript
JavaScript过滤字符串中的中文与空格方法汇总
2016/03/07 Javascript
jQuery Ajax和getJSON获取后台普通json数据和层级json数据用法分析
2016/06/08 Javascript
Vue.js每天必学之内部响应式原理探究
2016/09/07 Javascript
详解js中Json的语法与格式
2016/11/22 Javascript
微信小程序 图片绝对定位(背景图片)
2017/04/05 Javascript
解决Vue不能检测数组或对象变动的问题
2018/02/24 Javascript
解决layui使用layui-icon出现默认图标的问题
2019/09/11 Javascript
详解如何在Vue项目中发送jsonp请求
2019/10/25 Javascript
vue中注册自定义的全局js方法
2019/11/15 Javascript
nodejs中的异步编程知识点详解
2021/01/17 NodeJs
基于Python如何使用AIML搭建聊天机器人
2016/01/27 Python
django1.8使用表单上传文件的实现方法
2016/11/04 Python
使用Python进行QQ批量登录的实例代码
2018/06/11 Python
Python 一行代码能实现丧心病狂的功能
2020/01/18 Python
keras训练曲线,混淆矩阵,CNN层输出可视化实例
2020/06/15 Python
Python如何对XML 解析
2020/06/28 Python
如何使用python-opencv批量生成带噪点噪线的数字验证码
2020/12/21 Python
使用CSS3制作一个简单的进度条(demo)
2017/05/23 HTML / CSS
CSS3实现渐变背景兼容问题
2020/05/06 HTML / CSS
html5 svg 中元素点击事件添加方法
2013/01/16 HTML / CSS
英国最大的在线运动补充剂商店:Discount Supplements
2017/06/03 全球购物
日本小田急百货官网:Odakyu
2018/07/19 全球购物
提高EJB性能都有哪些技巧
2012/03/25 面试题
高中生活自我鉴定
2014/01/18 职场文书
给老婆的保证书
2015/01/16 职场文书
婚育证明格式
2015/06/17 职场文书
暂住证证明
2015/06/19 职场文书