基于JavaScript实现验证码功能


Posted in Javascript onApril 01, 2017

本文实例为大家分享了JavaScript实现验证码的具体代码,供大家参考,具体内容如下

1、一个简单的例子
新建 test.html

<!DOCTYPE html> 
<html>  
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<head>  
  <title>验证码</title>   
  <script src = "checkCode.js">  </script>  
</head>  
<body>  
  <div>  
    <input type = "text" id = "input"/>  
    <input type = "button" id="code" onclick="createCode()"/>  
    <input type = "button" value = "验证" onclick = "validate()"/>  
  </div>  
</body>  
</html>

新建 checkCode.js

var code ; //在全局定义验证码   
 
window.onload = function createCode(){  
   code = "";   
   var codeLength = 4;//验证码的长度  
   var checkCode = document.getElementById("code");   
   var random = 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');//随机数  
   for(var i = 0; i < codeLength; i++) {//循环操作  
    var index = Math.floor(Math.random()*36);//取得随机数的索引(0~35)  
    code += random[index];//根据索引取得随机数加到code上  
  }  
  checkCode.value = code;//把code值赋给验证码  
}  
//校验验证码  
function validate(){  
  var inputCode = document.getElementById("input").value.toUpperCase(); //取得输入的验证码并转化为大写     
  if(inputCode.length <= 0) { //若输入的验证码长度为0  
    alert("Empty Code!"); //则弹出请输入验证码  
  }      
  else if(inputCode != code ) { //若输入的验证码与产生的验证码不一致时  
    alert("Error Code"); //则弹出验证码输入错误  
    createCode();//刷新验证码  
    document.getElementById("input").value = "";//清空文本框  
  }      
  else { //输入正确时  
    alert("OK"); //弹出^-^  
  }        
}

2、点击的时候不会移动位置的代码:

<p class="red"><a href="javascript:;" rel="external nofollow" onclick="createCode()">看不清?</a></p> 

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery内部原理和实现方式浅析
Feb 03 Javascript
深入理解JavaScript系列(33):设计模式之策略模式详解
Mar 03 Javascript
JQuery select(下拉框)操作方法汇总
Apr 15 Javascript
javascript中Array()数组函数详解
Aug 23 Javascript
使用js获取地址栏参数的方法推荐(超级简单)
Jun 14 Javascript
jQuery1.9+中删除了live以后的替代方法
Jun 17 Javascript
AngularJS 简单应用实例
Jul 28 Javascript
AngularJS中$injector、$rootScope和$scope的概念和关联关系深入分析
Jan 19 Javascript
JavaScript学习笔记之基于定时器实现图片无缝滚动功能详解
Jan 09 Javascript
Vue自定义全局Toast和Loading的实例详解
Apr 18 Javascript
在layui.use 中自定义 function 的正确方法
Sep 16 Javascript
低门槛开发iOS、Android、小程序应用的前端框架详解
Oct 16 Javascript
AngularJS1.X学习笔记2-数据绑定详解
Apr 01 #Javascript
Angularjs使用指令做表单校验的方法
Mar 31 #Javascript
JS正则获取HTML元素的方法
Mar 31 #Javascript
JS+CSS实现下拉刷新/上拉加载插件
Mar 31 #Javascript
ES6中Generator与异步操作实例分析
Mar 31 #Javascript
微信公众号菜单配置微信小程序实例详解
Mar 31 #Javascript
ES6中Iterator与for..of..遍历用法分析
Mar 31 #Javascript
You might like
Protoss建筑一览
2020/03/14 星际争霸
Mac OS下配置PHP+MySql环境
2015/02/25 PHP
IE6下出现JavaScript未结束的字符串常量错误的解决方法
2010/11/21 Javascript
jcarousellite.js 基于Jquery的图片无缝滚动插件
2010/12/30 Javascript
JS动态添加与删除select中的Option对象(示例代码)
2013/12/20 Javascript
Node.js中npm常用命令大全
2016/06/09 Javascript
移动端手指放大缩小插件与js源码
2017/05/22 Javascript
vue源码入口文件分析(推荐)
2018/01/30 Javascript
JavaScript学习笔记之DOM基础操作实例小结
2019/01/09 Javascript
使用express来代理服务的方法
2019/06/21 Javascript
jQuery+Ajax+js实现请求json格式数据并渲染到html页面操作示例
2020/06/02 jQuery
Python中模块与包有相同名字的处理方法
2017/05/05 Python
Python面向对象之继承代码详解
2018/01/29 Python
python判断数字是否是超级素数幂
2018/09/27 Python
使用Python横向合并excel文件的实例
2018/12/11 Python
python之pexpect实现自动交互的例子
2019/07/25 Python
pygame实现俄罗斯方块游戏(基础篇1)
2019/10/29 Python
Pytorch 之修改Tensor部分值方式
2019/12/27 Python
解决python3插入mysql时内容带有引号的问题
2020/03/02 Python
django中cookiecutter的使用教程
2020/12/03 Python
CSS3 filter(滤镜)实现网页灰色或者黑色模式的代码
2020/11/30 HTML / CSS
美国第一香水网站:Perfume.com
2017/01/23 全球购物
Bealls Florida百货商店:生活服饰、家居装饰和鞋子
2018/02/23 全球购物
俄罗斯便宜的在线服装商店:GroupPrice
2020/04/10 全球购物
Huda Beauty官方商店:化妆和美容产品
2020/09/05 全球购物
体育专业个人求职信范文
2013/12/27 职场文书
全神贯注教学反思
2014/02/03 职场文书
党员教师工作决心书
2014/03/13 职场文书
2014年艾滋病防治工作总结
2014/12/10 职场文书
先进人物事迹材料
2014/12/29 职场文书
学校施工安全责任书
2015/01/29 职场文书
活动总结模板大全
2015/05/11 职场文书
2015年迎新晚会策划书
2015/07/16 职场文书
红十字会救护培训简讯
2015/07/20 职场文书
《猴王出世》教学反思
2016/02/23 职场文书
MySQL数据库如何给表设置约束详解
2022/03/13 MySQL