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 相关文章推荐
AngularJS基础知识笔记之表格
May 10 Javascript
JavaScript事件类型中焦点、鼠标和滚轮事件详解
Jan 25 Javascript
javascript的replace方法结合正则使用实例总结
Jun 16 Javascript
关于Jquery中的bind(),on()绑定事件方式总结
Oct 26 Javascript
原生js实现鼠标跟随效果
Feb 28 Javascript
全选复选框JavaScript编写小结(附代码)
Aug 16 Javascript
微信小程序滚动Tab实现左右可滑动切换
Aug 17 Javascript
web前端vue之vuex单独一文件使用方式实例详解
Jan 11 Javascript
VUE + UEditor 单图片跨域上传功能的实现方法
Feb 08 Javascript
使用pkg打包Node.js应用的方法步骤
Oct 19 Javascript
js作用域和作用域链及预解析
Apr 11 Javascript
jquery实现加载更多&quot;转圈圈&quot;效果(示例代码)
Nov 09 jQuery
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 常用函数库和一些实用小技巧
2009/01/01 PHP
PHP 使用pcntl和libevent 实现Timer功能
2013/10/27 PHP
PHP中error_reporting()用法详解
2015/08/31 PHP
浅谈PHP SHA1withRSA加密生成签名及验签
2019/03/18 PHP
javascript 有用的脚本函数
2009/05/07 Javascript
JSON 和 JavaScript eval使用说明
2010/06/13 Javascript
解析JavaScript中的不可见数据类型
2013/12/02 Javascript
js+css实现导航效果实例
2015/02/10 Javascript
jquery实现表格本地排序的方法
2015/03/11 Javascript
深入探究使JavaScript动画流畅的一些方法
2015/06/30 Javascript
bootstrap实现弹窗和拖动效果
2016/01/03 Javascript
基于css3新属性transform及原生js实现鼠标拖动3d立方体旋转
2016/06/12 Javascript
Vue.js组件tabs实现选项卡切换效果
2016/12/01 Javascript
node.js使用express框架进行文件上传详解
2019/03/03 Javascript
最简单的vue消息提示全局组件的方法
2019/06/16 Javascript
关于angular 8.1使用过程中的一些记录
2020/11/25 Javascript
Python脚本判断 Linux 是否运行在虚拟机上
2015/04/25 Python
使用Python内置的模块与函数进行不同进制的数的转换
2016/03/12 Python
python使用Plotly绘图工具绘制气泡图
2019/04/01 Python
Python中@property的理解和使用示例
2019/06/11 Python
numpy ndarray 取出满足特定条件的某些行实例
2019/12/05 Python
python中安装django模块的方法
2020/03/12 Python
python由已知数组快速生成新数组的方法
2020/04/08 Python
Python dict的常用方法示例代码
2020/06/23 Python
Tensorflow全局设置可见GPU编号操作
2020/06/30 Python
基于PyTorch中view的用法说明
2021/03/03 Python
Sixt美国租车:高端豪华车型自驾体验
2017/09/02 全球购物
Move Free官方海外旗舰店:美国骨关节健康专业品牌
2017/12/06 全球购物
Nisbets法国:英国最大的厨房和餐饮设备供应商
2019/03/18 全球购物
Fox Racing英国官网:越野摩托车和山地自行车服装
2020/02/26 全球购物
节水口号标语
2014/06/19 职场文书
销售员试用期自我评价
2014/09/15 职场文书
碧霞祠导游词
2015/02/09 职场文书
课程设计感想范文
2015/08/11 职场文书
周一给客户的问候语
2015/11/10 职场文书
总结三种用 Python 作为小程序后端的方式
2022/05/02 Python