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 css样式操作代码(批量操作)
Oct 09 Javascript
innerHTML,outerHTML,innerText,outerText的用法及区别解析
Dec 16 Javascript
js 左右悬浮对联广告代码示例
Dec 12 Javascript
JS+CSS实现鼠标滑过时动态翻滚的导航条效果
Sep 24 Javascript
jQuery ajax时间差导致的变量赋值问题分析
Jan 22 Javascript
详解jQuery中的empty、remove和detach
Apr 11 Javascript
使用vue.js2.0 + ElementUI开发后台管理系统详细教程(二)
Jan 21 Javascript
Bootstrap 3 进度条的实现
Feb 22 Javascript
详解vue 模版组件的三种用法
Jul 21 Javascript
Node.js进阶之核心模块https入门
May 23 Javascript
使用JQuery自动完成插件Auto Complete详解
Jun 18 jQuery
vue 实现弹窗关闭后刷新效果
Apr 08 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
ob_start(),ob_start('ob_gzhandler')使用
2006/12/25 PHP
Jquery 实现Tab效果 思路是js思路
2010/03/02 Javascript
jquery 全局AJAX事件使用代码
2010/11/05 Javascript
最短的IE判断代码
2011/03/13 Javascript
Javascript绝句欣赏 一些经典的js代码
2012/02/22 Javascript
点击页面其它地方隐藏该div的两种思路
2013/11/18 Javascript
JS阻止用户多次提交示例代码
2014/03/26 Javascript
JavaScript中实现单体模式分享
2015/01/29 Javascript
JavaScript对象参数的引用传递
2016/01/14 Javascript
简单实现js选项卡切换效果
2016/02/03 Javascript
基于BootStarp的Dailog
2016/04/28 Javascript
最棒的Angular2表格控件
2016/08/10 Javascript
JavaScript 栈的详解及实例代码
2017/01/22 Javascript
原生JS实现《别踩白块》游戏(兼容IE)
2017/02/20 Javascript
详解JS中遍历语法的比较
2017/04/07 Javascript
JavaScript限制在客户区可见范围的拖拽(解决scrollLeft和scrollTop的问题)(2)
2017/05/17 Javascript
在vue中获取dom元素内容的方法
2017/07/10 Javascript
利用vue+elementUI实现部分引入组件的方法详解
2017/11/22 Javascript
vue.js中npm安装教程图解
2018/04/10 Javascript
浅谈JavaScript_DOM学习篇_图片切换小案例
2019/03/19 Javascript
vue数据更新UI不刷新显示的解决办法
2020/08/06 Javascript
通过实例解析jQ Ajax操作相关原理
2020/09/23 Javascript
python通过get,post方式发送http请求和接收http响应的方法
2015/05/26 Python
通过shell+python实现企业微信预警
2019/03/07 Python
使用tensorboard可视化loss和acc的实例
2020/01/21 Python
css3 给页面加个半圆形导航条主要利用旋转和倾斜样式
2014/02/10 HTML / CSS
iphoneX 适配客户端H5页面的方法教程
2017/12/08 HTML / CSS
英国可持续奢侈品包包品牌:Elvis & Kresse
2018/08/05 全球购物
Nike比利时官网:Nike.com (BE)
2019/02/07 全球购物
营销专业应届生求职信
2013/11/26 职场文书
毕业设计计划书
2014/01/09 职场文书
学年自我鉴定
2014/01/16 职场文书
学生会竞选演讲稿纪检部
2014/08/25 职场文书
申报材料格式
2014/12/30 职场文书
庆元旦主持词
2015/07/06 职场文书
涨工资申请书应该怎么写?
2019/07/08 职场文书