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 相关文章推荐
JavaScript利用append添加元素报错的解决方法
Jul 01 Javascript
jquery中each遍历对象和数组示例
Aug 05 Javascript
使用JavaScript+canvas实现图片裁剪
Jan 30 Javascript
javascript封装 Cookie 应用接口
Aug 07 Javascript
JS实现横向与竖向两个选项卡Tab联动的方法
Sep 27 Javascript
限制只能输入数字的实现代码
May 16 Javascript
浅谈Vue.js
Mar 02 Javascript
WdatePicker.js时间日期插件的使用方法
Jul 26 Javascript
小程序分享模块超级详解(推荐)
Apr 10 Javascript
Layui多选只有最后一个值的解决方法
Sep 02 Javascript
vuex 实现getter值赋值给vue组件里的data示例
Nov 05 Javascript
JavaScript 几种循环方式以及模块化的总结
Sep 03 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
Windows下部署Apache+PHP+MySQL运行环境实战
2012/08/31 PHP
PHP实现AES256加密算法实例
2014/09/22 PHP
php轻量级的性能分析工具xhprof的安装使用
2015/08/12 PHP
php resizeimage 部分jpg文件 生成缩略图失败的原因分析及解决办法
2016/03/23 PHP
用javascript实现给图片加链接
2007/08/15 Javascript
JavaScript 事件冒泡简介及应用
2010/01/11 Javascript
基于jQuery的合并表格中相同文本的相邻单元格的代码
2011/04/06 Javascript
JS跨域总结
2012/08/30 Javascript
Javascript玩转继承(一)
2014/05/08 Javascript
js在指定位置增加节点函数insertBefore()用法实例
2015/01/12 Javascript
jQuery Ajax中的事件详细介绍
2015/04/16 Javascript
jQuery的Ajax用户认证和注册技术实例教程(附demo源码)
2015/12/08 Javascript
纯JS代码实现隔行变色鼠标移入高亮
2016/11/23 Javascript
基于Vue生产环境部署详解
2017/09/15 Javascript
js中如何完美的解析数据
2018/03/18 Javascript
详解微信小程序的 request 封装示例
2018/08/21 Javascript
浅谈Vue.js 中的 v-on 事件指令的使用
2018/11/25 Javascript
Vue自定义全局Toast和Loading的实例详解
2019/04/18 Javascript
js基础之事件捕获与冒泡原理
2019/10/09 Javascript
[02:48]DOTA2超级联赛专访海涛:你们的选择没有错
2013/06/07 DOTA
python 实现归并排序算法
2012/06/05 Python
详解Python中heapq模块的用法
2016/06/28 Python
Python中pandas dataframe删除一行或一列:drop函数详解
2018/07/03 Python
Python json模块dumps、loads操作示例
2018/09/06 Python
pycharm 对代码做静态检查操作
2020/06/09 Python
学会迭代器设计模式,帮你大幅提升python性能
2021/01/03 Python
HTML5学习笔记之History API
2015/02/26 HTML / CSS
html5拖拽应用记录及注意点
2020/05/27 HTML / CSS
美国杂志订阅折扣与优惠网站:Magazines.com
2016/08/31 全球购物
Lime Crime官网:美国一家主打梦幻精灵系的彩妆品牌
2019/03/22 全球购物
德国净水壶和滤芯品牌:波尔德PearlCo(家用净水器)
2020/04/29 全球购物
有个性的自我评价范文
2013/11/15 职场文书
力学专业毕业生自荐信
2013/11/17 职场文书
党员公开承诺书范文
2014/03/25 职场文书
乡文化站暑期培训方案
2014/08/28 职场文书
js面向对象编程OOP及函数式编程FP区别
2022/07/07 Javascript