基于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 04 Javascript
JavaScript中的继承方式详解
Feb 11 Javascript
JavaScript学习笔记之创建对象
Mar 25 Javascript
深入理解JS addLoadEvent函数
May 20 Javascript
JS中Json数据的处理和解析JSON数据的方法详解
Jun 29 Javascript
微信小程序-小说阅读小程序实例(demo)
Jan 12 Javascript
JS实现验证码倒计时的注册页面
Jan 02 Javascript
vue-cli3.0配置及使用注意事项详解
Sep 05 Javascript
Vue唯一可以更改vuex实例中state数据状态的属性对象Mutation的讲解
Jan 18 Javascript
javascript实现blob加密视频源地址的方法
Aug 08 Javascript
微信小程序使用echarts获取数据并生成折线图
Oct 16 Javascript
JS数组方法some、every和find的使用详情
Oct 05 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
php面向对象全攻略 (二) 实例化对象 使用对象成员
2009/09/30 PHP
php 修改zen-cart下单和付款流程以防止漏单
2010/03/08 PHP
关于PHP的相似度计算函数:levenshtein的使用介绍
2013/04/15 PHP
基于php split()函数的用法详解
2013/06/05 PHP
PHP防止刷新重复提交页面的示例代码
2015/11/11 PHP
分享10段PHP常用代码
2015/11/11 PHP
PHP实现验证码校验功能
2017/11/16 PHP
TP5框架安全机制实例分析
2020/04/05 PHP
js创建子窗口并且回传值示例代码
2013/07/02 Javascript
Javascript小技巧之生成html元素
2014/05/15 Javascript
常用的jQuery前端技巧收集
2014/12/24 Javascript
JavaScript中的small()方法使用详解
2015/06/08 Javascript
Grunt入门教程(自动任务运行器)
2015/08/06 Javascript
JS简单实现String转Date的方法
2016/03/02 Javascript
浅谈js中同名函数和同名变量的执行问题
2017/02/12 Javascript
JavaScript之浏览器对象_动力节点Java学院整理
2017/07/03 Javascript
关于vue.js组件数据流的问题
2017/07/26 Javascript
详解EasyUi控件中的Datagrid
2017/08/23 Javascript
node.js通过Sequelize 连接MySQL的方法
2020/12/28 Javascript
简单使用Python自动生成文章
2014/12/25 Python
在Mac OS上部署Nginx和FastCGI以及Flask框架的教程
2015/05/02 Python
Python实现替换文件中指定内容的方法
2018/03/19 Python
如何使用Python抓取网页tag操作
2020/02/14 Python
python实现FTP循环上传文件
2020/03/20 Python
Python通过Schema实现数据验证方式
2020/11/12 Python
Python实现Kerberos用户的增删改查操作
2020/12/14 Python
CSS3 rgb and rgba(透明色)的使用详解
2020/09/25 HTML / CSS
GoDaddy英国:全球排名第一的域名注册商
2018/06/08 全球购物
安德玛比利时官网:Under Armour比利时
2019/08/28 全球购物
预订旅游活动、景点和旅游:GetYourGuide
2019/09/29 全球购物
土耳其新趋势女装购物网站:Addax
2020/01/07 全球购物
工业自动化专业毕业生推荐信
2013/11/18 职场文书
打架检讨书300字
2014/02/02 职场文书
四风问题对照检查材料思想汇报
2014/10/07 职场文书
拾金不昧表扬稿
2015/01/16 职场文书
Win11任务栏无法正常显示 资源管理器不停重启的解决方法
2022/07/07 数码科技