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 相关文章推荐
15条JavaScript最佳实践小结
Aug 09 Javascript
搞定immutable.js详细说明
May 02 Javascript
原生js实现放大镜效果
Jan 11 Javascript
JavaScript数据结构之二叉树的删除算法示例
Apr 13 Javascript
浅谈 Vue v-model指令的实现原理
Jun 08 Javascript
vue如何使用 Slot 分发内容实例详解
Sep 05 Javascript
AngularJS动态添加数据并删除的实例
Feb 27 Javascript
vue通过style或者class改变样式的实例代码
Oct 30 Javascript
Angular6新特性之Angular Material
Dec 28 Javascript
Javascript原生ajax请求代码实例
Feb 20 Javascript
JS监听组合按键思路及实现过程
Apr 17 Javascript
JS实现拖拽元素时与另一元素碰撞检测
Aug 27 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多种形式发送邮件(mail qmail邮件系统 phpmailer类)
2014/01/22 PHP
PHP7新功能总结
2019/04/14 PHP
对JavaScript的eval()中使用函数的进一步讨论
2008/07/26 Javascript
理解JavaScript中的对象 推荐
2011/01/09 Javascript
兼容ie、firefox的图片自动缩放的css跟js代码分享
2012/01/21 Javascript
Js控制弹窗实现在任意分辨率下居中显示
2013/08/01 Javascript
得到form下的所有的input的js代码
2013/11/07 Javascript
javascript计算用户打开网页的停留时间
2014/01/09 Javascript
jquery遍历checkbox的注意事项说明
2014/02/21 Javascript
JQuery判断radio(单选框)是否选中和获取选中值方法总结
2015/04/15 Javascript
jQuery对JSON数据进行排序输出的方法
2015/06/24 Javascript
ashx文件获取$.ajax()方法发送的数据
2016/05/26 Javascript
利用js+css+html实现固定table的列头不动
2016/12/08 Javascript
浅谈原生JS实现jQuery的animate()动画示例
2017/03/08 Javascript
基于bootstrap按钮式下拉菜单组件的搜索建议插件
2017/03/25 Javascript
js + css实现标签内容切换功能(实例讲解)
2017/10/09 Javascript
使用FileReader API创建Vue文件阅读器组件
2018/04/03 Javascript
elementUI select组件使用及注意事项详解
2019/05/29 Javascript
viewer.js实现图片预览功能
2020/06/24 Javascript
nuxt 页面路由配置,主页轮播组件开发操作
2020/11/05 Javascript
python+matplotlib实现礼盒柱状图实例代码
2018/01/16 Python
Python中property属性实例解析
2018/02/10 Python
Python将DataFrame的某一列作为index的方法
2018/04/08 Python
基于Python共轭梯度法与最速下降法之间的对比
2020/04/02 Python
Mankind美国/加拿大:英国领先的男士美容护发用品公司
2018/12/05 全球购物
英国儿童鞋和靴子:Start-Rite
2019/05/06 全球购物
澳大利亚最受欢迎的美发用品目的地:AMR
2019/08/28 全球购物
explicit和implicit的含义
2012/11/15 面试题
英语翻译系毕业生求职信
2013/09/29 职场文书
城市精细化管理实施方案
2014/03/04 职场文书
计算机专业求职信
2014/06/02 职场文书
小学生田径运动会广播稿
2014/09/11 职场文书
公司员工违纪检讨书
2015/05/05 职场文书
社区党务工作总结2015
2015/05/19 职场文书
2015年社区重阳节活动总结
2015/07/30 职场文书
MySQL分区表实现按月份归类
2021/11/01 MySQL