js实现简单的验证码


Posted in Javascript onDecember 25, 2015

验证码大家应该不陌生,主要是为了网站的安全性,防止恶意注册和登陆。验证码实现的方式各有不同,下面是一段用javascript实现的验证码效果,供大家参考之用,希望能够给大家带来帮助。

运行效果图:

js实现简单的验证码

js实现简单的验证码

代码如下:

<html>
<head>
<title>js验证码</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 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 相关文章推荐
SwfUpload在IE10上不出现上传按钮的解决方法
Jun 25 Javascript
jquery删除提示框弹出是否删除对话框
Jan 07 Javascript
jQuery延迟加载图片插件Lazy Load使用指南
Mar 25 Javascript
jQuery实现的网页右下角tab样式在线客服效果代码
Oct 23 Javascript
jQuery使用contains过滤器实现精确匹配方法详解
Feb 25 Javascript
JavaScript动态检验密码强度的实现方法
Nov 09 Javascript
xmlplus组件设计系列之下拉刷新(PullRefresh)(6)
May 03 Javascript
JS判断时间段的实现代码
Jun 14 Javascript
一个简易时钟效果js实现代码
Mar 25 Javascript
vue项目中使用百度地图的方法
Jun 08 Javascript
原生JS无缝滑动轮播图
Oct 22 Javascript
vue+elementUI中表格高亮或字体颜色改变操作
Nov 02 Javascript
借助FileReader实现将文件编码为Base64后通过AJAX上传
Dec 24 #Javascript
javascript与jquery中的this关键字用法实例分析
Dec 24 #Javascript
JS实现部分HTML固定页面顶部随屏滚动效果
Dec 24 #Javascript
jQuery中hover与mouseover和mouseout的区别分析
Dec 24 #Javascript
基于JS2Image实现圣诞树代码
Dec 24 #Javascript
jquery读写cookie操作实例分析
Dec 24 #Javascript
jquery.cookie实现的客户端购物车操作实例
Dec 24 #Javascript
You might like
收音机怀古---春雷3P7图片欣赏
2021/03/02 无线电
PHP用strstr()函数阻止垃圾评论(通过判断a标记)
2013/09/28 PHP
PHP使用ob_start生成html页面的方法
2014/11/07 PHP
PHP中round()函数对浮点数进行四舍五入的方法
2014/11/19 PHP
php析构函数的简单使用说明
2015/08/24 PHP
PHP利用正则表达式将相对路径转成绝对路径的方法示例
2017/02/28 PHP
PHP实现基于回溯法求解迷宫问题的方法详解
2017/08/17 PHP
php中curl和soap方式请求服务超时问题的解决
2018/06/11 PHP
利用PHP内置SERVER开启web服务(本地开发使用)
2021/03/09 PHP
如何用javascript控制上传文件的大小
2006/10/26 Javascript
JS 退出系统并跳转到登录界面的实现代码
2013/06/29 Javascript
Javascript简单实现可拖动的div
2013/10/22 Javascript
Javascript学习笔记之 对象篇(三) : hasOwnProperty
2014/06/24 Javascript
做web开发 先学JavaScript
2014/12/12 Javascript
JavaScript的原型继承详解
2015/02/15 Javascript
JavaScript文本框脚本编写的注意事项
2016/01/25 Javascript
基于JS实现发送短信验证码后的倒计时功能(无视页面刷新,页面关闭不进行倒计时功能)
2016/09/02 Javascript
Javascript 引擎工作机制详解
2016/11/30 Javascript
利用js获取下拉框中所选的值
2016/12/01 Javascript
JS实现获取图片大小和预览的方法完整实例【兼容IE和其它浏览器】
2017/04/24 Javascript
nodejs实现范围请求的实现代码
2018/10/12 NodeJs
vue slot与传参实例代码讲解
2019/04/28 Javascript
Vue 实现从文件中获取文本信息的方法详解
2019/10/16 Javascript
vue项目中使用vue-layer弹框插件的方法
2020/03/11 Javascript
js中位数不足自动补位扩展padLeft、padRight实现代码
2020/04/06 Javascript
vue.js实现照片放大功能
2020/06/23 Javascript
Python字符串处理之count()方法的使用
2015/05/18 Python
python入门:这篇文章带你直接学会python
2018/09/14 Python
Python爬虫实战之12306抢票开源
2019/01/24 Python
对Python 多线程统计所有csv文件的行数方法详解
2019/02/12 Python
python创建子类的方法分析
2019/11/28 Python
快速创建python 虚拟环境
2020/11/28 Python
环境建设实施方案
2014/03/14 职场文书
大学生社会实践评语
2014/04/25 职场文书
Python激活Anaconda环境变量的详细步骤
2021/06/08 Python
Go语言编译原理之源码调试
2022/08/05 Golang