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 相关文章推荐
11款新鲜的jQuery插件[附所有demo下载]
Jan 24 Javascript
再论Javascript下字符串连接的性能
Mar 05 Javascript
浅析jquery的作用与优势
Dec 02 Javascript
JQuery文本改变触发事件如聚焦事件、失焦事件
Jan 15 Javascript
DOM基础教程之事件类型
Jan 20 Javascript
深入分析jQuery的ready函数是如何工作的(工作原理)
Dec 17 Javascript
详解JavaScript正则表达式之分组匹配及反向引用
Mar 09 Javascript
jQuery如何跳转到另一个网页 就这么简单
Dec 28 Javascript
js 两数组去除重复数值的实例
Dec 06 Javascript
小程序云函数调用API接口的方法
May 17 Javascript
layer弹出层显示在top顶层的方法
Sep 11 Javascript
vue使用nprogress加载路由进度条的方法
Jun 04 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
phpmyadmin安装时提示:Warning: require_once(./libraries/common.inc.php)错误解决办法
2011/08/18 PHP
如何让thinkphp在模型中自动完成session赋值小教程
2014/09/05 PHP
php检测url是否存在的方法
2015/04/14 PHP
php使用pthreads v3多线程实现抓取新浪新闻信息操作示例
2020/02/21 PHP
再谈querySelector和querySelectorAll的区别与联系
2012/04/20 Javascript
js浮动图片的动态效果
2013/07/10 Javascript
appendChild() 或 insertBefore()使用与区别介绍
2013/10/11 Javascript
javascript中全局对象的isNaN()方法使用介绍
2013/12/19 Javascript
ExpressJS入门实例
2015/01/14 Javascript
JavaScript中数组的合并以及排序实现示例
2015/10/24 Javascript
AngularJS仿苹果滑屏删除控件
2016/01/18 Javascript
javascript每日必学之封装
2016/02/23 Javascript
js模态对话框使用方法详解
2017/02/16 Javascript
vue父组件向子组件(props)传递数据的方法
2018/01/02 Javascript
webpack热模块替换(HMR)/热更新的方法
2018/04/05 Javascript
jQuery实现表单动态添加与删除数据操作示例
2018/07/03 jQuery
浅谈Vue初学之props的驼峰命名
2018/07/19 Javascript
基于openlayers实现角度测量功能
2020/09/28 Javascript
9个JavaScript日常开发小技巧
2020/10/06 Javascript
[01:09:24]Ti4开幕式
2014/07/19 DOTA
[00:27]DOTA2次级职业联赛 - Lilith战队宣传片
2014/12/01 DOTA
python设置检查点简单实现代码
2014/07/01 Python
Python自动调用IE打开某个网站的方法
2015/06/03 Python
python中set常用操作汇总
2016/06/30 Python
python创建文件时去掉非法字符的方法
2018/10/31 Python
用Python将结果保存为xlsx的方法
2019/01/28 Python
Python定义函数实现累计求和操作
2020/05/03 Python
CSS3实现多背景模拟动态边框的效果
2016/11/08 HTML / CSS
亚洲航空公司官方网站:AirAsia
2019/11/25 全球购物
某公司面试题
2012/03/05 面试题
教师岗位职责范本
2013/12/29 职场文书
课改先进个人汇报材料
2014/01/26 职场文书
校园广播稿范文
2015/08/19 职场文书
幼儿园大班教师评语
2019/06/21 职场文书
redis sentinel监控高可用集群实现的配置步骤
2022/04/01 Redis
利用Python实时获取steam特惠游戏数据
2022/06/25 Python