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 相关文章推荐
jQuery 使用手册(六)
Sep 23 Javascript
微信小程序 本地存储及登录页面处理实例详解
Jan 11 Javascript
在 Angular2 中实现自定义校验指令(确认密码)的方法
Jan 23 Javascript
原生js实现放大镜
Feb 20 Javascript
微信小程序使用checkbox显示多项选择框功能【附源码下载】
Dec 11 Javascript
JS设计模式之命令模式概念与用法分析
Feb 06 Javascript
React Native悬浮按钮组件的示例代码
Apr 05 Javascript
利用JS动态生成隔行换色HTML表格的两种方法
Oct 09 Javascript
Angular6 Filter实现页面搜索的示例代码
Dec 02 Javascript
Element-UI中Upload上传文件前端缓存处理示例
Feb 21 Javascript
基于JavaScript实现十五拼图代码实例
Apr 26 Javascript
React Native项目框架搭建的一些心得体会
May 28 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
浅谈php中mysql与mysqli的区别分析
2013/06/10 PHP
php实现的简单美国商品税计算函数
2015/07/13 PHP
从性能方面考虑PHP下载远程文件的3种方法
2015/12/29 PHP
php远程下载类分享
2016/04/13 PHP
php原生导出excel文件的两种方法(推荐)
2016/11/19 PHP
PHP常用的类封装小结【4个工具类】
2019/06/28 PHP
PHP 范围解析操作符(::)用法分析【访问静态成员和类常量】
2020/04/14 PHP
js类中获取外部函数名的方法与代码
2007/09/12 Javascript
自制轻量级仿jQuery.boxy对话框插件代码
2010/10/26 Javascript
需要做特殊处理的DOM元素属性的访问
2010/11/05 Javascript
javascript 函数声明与函数表达式的区别介绍
2013/10/05 Javascript
Jquery getJSON方法详细分析
2013/12/26 Javascript
JavaScript插件化开发教程(五)
2015/02/01 Javascript
jQuery源码解读之removeAttr()方法分析
2015/02/20 Javascript
JS验证 只能输入小数点,数字,负数的实现方法
2016/10/07 Javascript
JS 插件dropload下拉刷新、上拉加载使用小结
2017/04/13 Javascript
浅谈vuex之mutation和action的基本使用
2017/08/29 Javascript
jquery点击回车键实现登录效果并默认焦点的方法
2018/03/09 jQuery
vuecli3.x中轻松4步带你使用tinymce的步骤
2020/06/25 Javascript
vue+elementui实现点击table中的单元格触发事件--弹框
2020/07/18 Javascript
原生js实现拖拽移动与缩放效果
2020/08/24 Javascript
原生js实现自定义难度的扫雷游戏
2021/01/22 Javascript
Python多线程编程(四):使用Lock互斥锁
2015/04/05 Python
python 获取utc时间转化为本地时间的方法
2018/12/31 Python
python requests.post带head和body的实例
2019/01/02 Python
基于python解线性矩阵方程(numpy中的matrix类)
2019/10/21 Python
pytorch-神经网络拟合曲线实例
2020/01/15 Python
python能自学吗
2020/06/18 Python
如何查看python关键字
2021/01/17 Python
企业申诉管理制度
2014/01/30 职场文书
大学毕业自我鉴定范文
2014/02/03 职场文书
出纳员岗位责任制
2014/02/11 职场文书
群教个人对照检查材料
2014/08/20 职场文书
小学家长学校培训材料
2014/08/24 职场文书
水电维修专业推荐信
2014/09/06 职场文书
解析redis hash应用场景和常用命令
2021/08/04 Redis