基于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 相关文章推荐
用javascript实现给出的盒子的序列是否可连为一矩型
Aug 30 Javascript
js 获取中文拼音,Select自动匹配字母获取值的代码
Sep 23 Javascript
JQuery 选择器、过滤器介绍
Feb 14 Javascript
jQuery中JSONP的两种实现方式详解
Sep 26 Javascript
Easyui笔记2:实现datagrid多行删除的示例代码
Jan 14 Javascript
Angular1.x自定义指令实例详解
Mar 01 Javascript
JS 组件系列之Bootstrap Table的冻结列功能彻底解决高度问题
Jun 30 Javascript
react-router v4如何使用history控制路由跳转详解
Jan 09 Javascript
开发一个Parcel-vue脚手架工具(详细步骤)
Sep 22 Javascript
Vuepress 搭建带评论功能的静态博客的实现
Feb 17 Javascript
Node.js Windows Binary二进制文件安装方法
May 16 Javascript
JS代码编译器Monaco使用方法
Jun 11 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 MYSQL 数据备份类
2009/06/19 PHP
PHP+AJAX实现投票功能的方法
2015/09/28 PHP
关于Laravel-admin的基础用法总结和自定义model详解
2019/10/08 PHP
Javascript常考语句107条收集
2010/03/09 Javascript
jquery图片上下tab切换效果
2011/03/18 Javascript
《JavaScript高级程序设计》阅读笔记(二) ECMAScript中的原始类型
2012/02/27 Javascript
输入密码检测大写是否锁定js实现代码
2012/12/03 Javascript
JQuery页面图片切换和新闻列表滚动效果的具体实现
2013/09/26 Javascript
JavaScript操作Cookie方法实例分析
2015/05/27 Javascript
JavaScript判断图片是否已经加载完毕的方法汇总
2016/02/05 Javascript
jQuery Mobile页面返回不需要重新get
2016/04/26 Javascript
Wireshark基本介绍和学习TCP三次握手
2016/08/15 Javascript
微信小程序画布圆形进度条显示效果
2020/11/17 Javascript
vue.js input框之间赋值方法
2018/08/24 Javascript
原生js canvas实现鼠标跟随效果
2020/08/02 Javascript
[02:24]DOTA2痛苦女王 英雄基础教程
2013/11/26 DOTA
Python中将字典转换为列表的方法
2016/09/21 Python
轻松实现TensorFlow微信跳一跳的AI
2018/01/05 Python
Python 错误和异常代码详解
2018/01/29 Python
python实现求两个字符串的最长公共子串方法
2018/07/20 Python
python变量的存储原理详解
2019/07/10 Python
Django model select的多种用法详解
2019/07/16 Python
python识别文字(基于tesseract)代码实例
2019/08/24 Python
使用 Python 处理3万多条数据只要几秒钟
2020/01/19 Python
python3实现raspberry pi(树莓派)4驱小车控制程序
2020/02/12 Python
Python实现检测文件的MD5值来查找重复文件案例
2020/03/12 Python
Python新手学习装饰器
2020/06/04 Python
Python如何使用27行代码绘制星星图
2020/07/20 Python
如何利用Python动态模拟太阳系运转
2020/09/04 Python
Django数据库迁移常见使用方法
2020/11/12 Python
CSS3哪些新特性值得称赞
2016/03/02 HTML / CSS
煤矿隐患排查制度
2015/08/05 职场文书
2015年学校消防安全工作总结
2015/10/14 职场文书
MySQL 数据丢失排查案例
2021/05/08 MySQL
python 解决微分方程的操作(数值解法)
2021/05/26 Python
python实现局部图像放大
2021/11/17 Python