JavaScript 验证码的实例代码(附效果图)


Posted in Javascript onMarch 22, 2013

效果如下:

JavaScript 验证码的实例代码(附效果图) 

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <style type="text/css">
    .code
    {
            background:url(code_bg.jpg);
            font-family:Arial;
            font-style:italic;
             color:blue;
             font-size:30px;
             border:0;
             padding:2px 3px;
             letter-spacing:3px;
             font-weight:bolder;             
             float:left;            
             cursor:pointer;
             width:150px;
             height:60px;
             line-height:60px;
             text-align:center;
             vertical-align:middle;
    }
    a
    {
        text-decoration:none;
        font-size:12px;
        color:#288bc4;
        }
    a:hover
    {
       text-decoration:underline;
        }
    </style>
    <script language="javascript" type="text/javascript">
        var code;
        function createCode() {
            code = "";
            var codeLength = 6; //验证码的长度
            var checkCode = document.getElementById("checkCode");
            var codeChars = 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','w','x','y','z',
            'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'); //所有候选组成验证码的字符,当然也可以用中文的
            for (var i = 0; i < codeLength; i++) 
            {
                var charNum = Math.floor(Math.random() * 52);
                code += codeChars[charNum];
            }
            if (checkCode) 
            {
                checkCode.className = "code";
                checkCode.innerHTML = code;
            }
        }
        function validateCode() 
        {
            var inputCode = document.getElementById("inputCode").value;
            if (inputCode.length <= 0) 
            {
                alert("请输入验证码!");
            }
            else if (inputCode.toUpperCase() != code.toUpperCase()) 
            {
                alert("验证码输入有误!");
                createCode();
            }
            else 
            {
                alert("验证码正确!");
            }        
        }    
     </script>
</head>
<body onload="createCode()">
    <form id="form1" runat="server" onsubmit="validateCode()">
    <div>
    <table border="0" cellspacing="5" cellpadding="5" >
        <tr>
            <td></td><td> <div class="code" id="checkCode" onclick="createCode()" ></div></td>
            <td><a  href="#" onclick="createCode()">看不清换一张</a></td>
        </tr>
        <tr>
            <td>验证码:</td><td><input  style="float:left;" type="text"   id="inputCode" /></td><td>请输入验证码</td>
        </tr>
        <tr><td></td><td><input id="Button1"  onclick="validateCode();" type="button" value="确定" /></td><td></td>
        </tr>
    </table>
    </div>
    </form>
</body>
</html>
Javascript 相关文章推荐
javascript 操作select下拉列表框的一点小经验
Mar 20 Javascript
JS关键字变色实现思路及代码
Feb 21 Javascript
JQuery 实现在同一页面锚点链接之间的平滑滚动
Oct 29 Javascript
浅谈javascript构造函数与实例化对象
Jun 22 Javascript
JS组件Bootstrap Select2使用方法解析
May 30 Javascript
Bootstrap选项卡与Masonry插件的完美结合
Jul 06 Javascript
使用 bootstrap modal遇到的问题小结
Nov 09 Javascript
详解javascript中对数据格式化的思考
Jan 23 Javascript
JS正则表达式验证中文字符
May 08 Javascript
JS简单添加元素新节点的方法示例
Feb 10 Javascript
如何用JavaScript实现功能齐全的单链表详解
Feb 11 Javascript
vue使用混入定义全局变量、函数、筛选器的实例代码
Jul 29 Javascript
jquery实现图片等比例缩放以及max-width在ie中不兼容解决
Mar 21 #Javascript
jQuery+css+html实现页面遮罩弹出框
Mar 21 #Javascript
jquery实现固定顶部导航效果(仿蘑菇街)
Mar 21 #Javascript
jquery实现网站超链接和图片提示效果
Mar 21 #Javascript
jquery 表格的增行删行实现思路
Mar 21 #Javascript
杨氏矩阵查找的JS代码
Mar 21 #Javascript
JavaScript 判断浏览器是否支持SVG的代码
Mar 21 #Javascript
You might like
PHP实现通过URL提取根域名
2016/03/31 PHP
PHP使Laravel为JSON REST API返回自定义错误的问题
2018/10/16 PHP
浅谈laravel-admin的sortable和orderby使用问题
2019/10/03 PHP
Laravel创建数据库表结构的例子
2019/10/09 PHP
js 提交和设置表单的值
2008/12/19 Javascript
jQuery 位置插件
2008/12/25 Javascript
jQuery对Select的操作大集合(收藏)
2013/12/28 Javascript
Javascript简写条件语句(推荐)
2016/06/12 Javascript
JavaScript事件用法浅析
2016/10/31 Javascript
jquery,js简单实现类似Angular.js双向绑定
2017/01/13 Javascript
浅谈regExp的test方法取得的值变化的原因及处理方法
2017/03/01 Javascript
JS闭包可被利用的常见场景小结
2017/04/09 Javascript
JavaScript设计模式之模板方法模式原理与用法示例
2018/08/07 Javascript
JavaScript中引用vs复制示例详析
2018/12/06 Javascript
vue日历/日程提醒/html5本地缓存功能
2019/09/02 Javascript
layer.open 获取不到表单信息的解决方法
2019/09/26 Javascript
jQuery实现消息弹出框效果
2019/12/10 jQuery
Python实现各种排序算法的代码示例总结
2015/12/11 Python
利用python画一颗心的方法示例
2017/01/31 Python
python实现的正则表达式功能入门教程【经典】
2017/06/05 Python
linecache模块加载和缓存文件内容详解
2018/01/11 Python
对python 矩阵转置transpose的实例讲解
2018/04/17 Python
django的ORM模型的实现原理
2019/03/04 Python
python如何读取bin文件并下发串口
2019/07/05 Python
Python3 元组tuple入门基础
2020/02/09 Python
彻底搞懂 python 中文乱码问题(深入分析)
2020/02/28 Python
KARATOV珠宝在线商店:俄罗斯珠宝品牌
2019/03/13 全球购物
anello泰国官方网站:日本流行包包品牌
2019/08/08 全球购物
安全教育实施方案
2014/03/02 职场文书
销售会计岗位职责
2014/03/15 职场文书
文明礼貌演讲稿
2014/05/12 职场文书
学校安全教育月活动总结
2014/07/07 职场文书
业绩倒数第一的检讨书
2014/09/24 职场文书
学生犯错保证书
2015/05/09 职场文书
车间安全生产管理制度
2015/08/06 职场文书
2016年大学生暑期社会实践活动总结
2016/04/06 职场文书