基于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的onchange事件与jQuery的change()方法比较
Sep 28 Javascript
AeroWindow 基于JQuery的弹出窗口插件
Jun 27 Javascript
给页面渲染时间加速 干掉Dom Level 0 Event
Dec 19 Javascript
JS注释所产生的bug 即使注释也会执行
Nov 19 Javascript
jQuery截取指定长度字符串的实现原理及代码
Jul 01 Javascript
jQuery判断元素上是否绑定了指定事件的方法
Mar 17 Javascript
js实现仿Windows风格选项卡和按钮效果实例
May 13 Javascript
vue2.0的contextmenu右键弹出菜单的实例代码
Jul 24 Javascript
js异步编程小技巧详解
Aug 14 Javascript
react实现换肤功能的示例代码
Aug 14 Javascript
vue+element模态框中新增模态框和删除功能
Jun 11 Javascript
浅谈vue 组件中的setInterval方法和window的不同
Jul 30 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实现批量查询清除一句话后门的代码
2008/01/20 PHP
PHP加密扩展库Mcrypt安装和实例
2013/11/10 PHP
PHP封装mysqli基于面向对象的mysql数据库操作类与用法示例
2019/02/25 PHP
jquery.fileEveryWhere.js 一个跨浏览器的file显示插件
2011/10/24 Javascript
jquery插件制作简单示例说明
2012/02/03 Javascript
仅IE支持clearAttributes/mergeAttributes方法使用介绍
2012/05/04 Javascript
js jquery数组介绍
2012/07/15 Javascript
jquery remove方法应用详解
2012/11/22 Javascript
JavaScript常用全局属性与方法记录积累
2013/07/03 Javascript
JavaScript利用正则表达式去除日期中的“-”
2014/07/01 Javascript
功能强大的Bootstrap效果展示(二)
2016/08/03 Javascript
JavaScript简单下拉菜单特效
2016/09/13 Javascript
使用jQuery实现鼠标点击左右按钮滑动切换
2017/08/04 jQuery
详解微信小程序审核不通过的解决方法
2018/01/17 Javascript
微信小程序实现预览图片功能
2020/10/22 Javascript
微信小程序页面间值传递的两种方法
2018/11/26 Javascript
Vue自定义全局Toast和Loading的实例详解
2019/04/18 Javascript
Vue+webpack实现懒加载过程解析
2020/02/17 Javascript
vue + el-form 实现的多层循环表单验证
2020/11/25 Vue.js
python 环境搭建 及python-3.4.4的下载和安装过程
2019/07/20 Python
python NumPy ndarray二维数组 按照行列求平均实例
2019/11/26 Python
将 Ubuntu 16 和 18 上的 python 升级到最新 python3.8 的方法教程
2020/03/11 Python
django 链接多个数据库 并使用原生sql实现
2020/03/28 Python
Xadmin+rules实现多选行权限方式(级联效果)
2020/04/07 Python
HTML5 canvas基本绘图之填充样式实现
2016/06/27 HTML / CSS
英国最大的奢侈品零售网络商城:Flannels
2016/09/16 全球购物
女装和独特珠宝:Sundance Catalog
2018/09/19 全球购物
外语专业毕业生个人的自荐信
2013/11/19 职场文书
项目专员岗位职责
2013/12/04 职场文书
材料专业毕业生求职信
2014/02/26 职场文书
文化宣传方案
2014/03/13 职场文书
大学第二课堂活动总结
2014/07/08 职场文书
乡镇安全生产目标责任书
2014/07/23 职场文书
sql注入教程之类型以及提交注入
2021/08/02 MySQL
Redis实现订单过期删除的方法步骤
2022/06/05 Redis
JS实现刷新网页后之前浏览位置保持不变示例详解
2022/08/14 Javascript