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 相关文章推荐
十分钟打造AutoComplete自动完成效果代码
Dec 26 Javascript
js实现点击注册按钮开始读秒倒计时的小例子
May 11 Javascript
jquery表单验证框架提供的身份证验证方法(示例代码)
Dec 27 Javascript
DOM基础教程之使用DOM设置文本框
Jan 20 Javascript
javascript判断移动端访问设备并解析对应CSS的方法
Feb 05 Javascript
基于jquery实现select选择框内容左右移动添加删除代码分享
Aug 25 Javascript
通过原生JS实现为元素添加事件的方法
Nov 23 Javascript
Vuex和前端缓存的整合策略详解
May 09 Javascript
微信小程序滚动Tab实现左右可滑动切换
Aug 17 Javascript
jquery 给动态生成的标签绑定事件的几种方法总结
Feb 24 jQuery
vue中使用heatmapjs的示例代码(结合百度地图)
Sep 05 Javascript
vue backtop组件的实现完整代码
Apr 07 Vue.js
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页面编码的两种方法示例介绍
2014/03/03 PHP
PHP命名空间(Namespace)简明教程
2014/06/11 PHP
php实现简单爬虫的开发
2016/03/28 PHP
php使用pear_smtp发送邮件
2016/04/15 PHP
php  PATH_SEPARATOR判断当前服务器系统类型实例
2016/10/28 PHP
jQuery '行 4954 错误: 不支持该属性或方法' 的问题解决方法
2011/01/19 Javascript
基于mootools插件实现遮罩层新手引导
2012/05/24 Javascript
基于MVC3方式实现下拉列表联动(JQuery)
2013/09/02 Javascript
再谈JavaScript线程
2015/07/10 Javascript
Web前端开发工具——bower依赖包管理工具
2016/03/29 Javascript
Bootstrap的class样式小结
2016/12/01 Javascript
你不知道的 javascript【推荐】
2017/01/08 Javascript
Angular2入门--架构总览
2017/03/29 Javascript
判断jQuery是否加载完成,没完成继续判断的解决方法
2017/12/06 jQuery
详解Javascript中new()到底做了些什么?
2018/03/29 Javascript
vue路由前进后退动画效果的实现代码
2018/12/10 Javascript
详解Vue 项目中的几个实用组件(ts)
2019/10/29 Javascript
nodejs中使用archive压缩文件的实现代码
2019/11/26 NodeJs
微信小程序实现弹框效果
2020/05/26 Javascript
JS数组及对象遍历方法代码汇总
2020/06/16 Javascript
three.js 制作动态二维码的示例代码
2020/07/31 Javascript
[01:20]2018DOTA2亚洲邀请赛总决赛战队LGD晋级之路
2018/04/07 DOTA
python使用新浪微博api上传图片到微博示例
2014/01/10 Python
python删除特定文件的方法
2015/07/30 Python
Python设计模式之门面模式简单示例
2018/01/09 Python
基于随机梯度下降的矩阵分解推荐算法(python)
2018/08/31 Python
使用python进行波形及频谱绘制的方法
2019/06/17 Python
python 一篇文章搞懂装饰器所有用法(建议收藏)
2019/08/23 Python
Clarins娇韵诗美国官网:法国天然护肤品牌
2016/09/26 全球购物
计算机系毕业生推荐信
2013/11/06 职场文书
护士实习鉴定范文
2013/12/22 职场文书
签约仪式策划方案
2014/06/02 职场文书
演讲比赛策划方案
2014/06/11 职场文书
2014年学习委员工作总结
2014/11/14 职场文书
Laravel中获取IP的真实地理位置
2021/04/01 PHP
笔记本自带的win11如何跳过联网激活?
2022/04/20 数码科技