基于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 相关文章推荐
JQueryiframe页面操作父页面中的元素与方法(实例讲解)
Nov 19 Javascript
js实现特定位取反原理及示例
Jun 30 Javascript
终于实现了!精彩的jquery弹幕效果
Jul 18 Javascript
jQuery实现CheckBox全选、全不选功能
Jan 11 Javascript
前端html中jQuery实现对文本的搜索功能并把搜索相关内容显示出来
Nov 14 jQuery
vue init webpack myproject构建项目 ip不能访问的解决方法
Mar 20 Javascript
让Vue也可以使用Redux的方法
May 23 Javascript
浅谈React Event实现原理
Sep 20 Javascript
浅谈针对Vue相同路由不同参数的刷新问题
Sep 29 Javascript
详解从0开始搭建微信小程序(前后端)的全过程
Apr 15 Javascript
node.JS路径解析之PATH模块使用方法详解
Feb 06 Javascript
JavaScript实现酷炫的鼠标拖尾特效
Feb 18 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
PHPShop存在多个安全漏洞
2006/10/09 PHP
PHP防CC攻击实现代码
2011/12/29 PHP
php5.4传引用时报错问题分析
2016/01/22 PHP
php中对象引用和复制实例分析
2019/08/14 PHP
laravel5环境隐藏index.php后缀(apache)的方法
2019/10/12 PHP
写出更好的JavaScript之undefined篇(上)
2009/11/22 Javascript
Jquery事件的连接使用示例
2013/06/18 Javascript
将input file的选择的文件清空的两种解决方案
2013/10/21 Javascript
给文字加上着重号的JS代码
2013/11/12 Javascript
js实现刷新页面后回到记录时滚动条的位置【两种方案可选】
2016/12/12 Javascript
Vue 单文件中的数据传递示例
2017/03/21 Javascript
electron-vue利用webpack打包实现多页面的入口文件问题
2019/05/12 Javascript
使用xampp将angular项目运行在web服务器的教程
2019/09/16 Javascript
小程序实现横向滑动日历效果
2019/10/21 Javascript
[36:52]DOTA2真视界:基辅特锦赛总决赛
2017/05/21 DOTA
[38:38]完美世界DOTA2联赛PWL S3 access vs Rebirth 第二场 12.17
2020/12/18 DOTA
Python实现把json格式转换成文本或sql文件
2015/07/10 Python
python cx_Oracle的基础使用方法(连接和增删改查)
2017/11/19 Python
Python面向对象程序设计之私有属性及私有方法示例
2019/04/08 Python
Python字符串大小写转换拼接删除空白
2019/09/19 Python
基于Python脚本实现邮件报警功能
2020/05/20 Python
Python批量获取并保存手机号归属地和运营商的示例
2020/10/09 Python
英国泰坦旅游网站:全球陪同游览,邮轮和铁路旅行
2016/11/29 全球购物
美国领先的医疗警报服务:Philips Lifeline
2018/03/12 全球购物
美国手工艺品市场的领导者:Annie’s
2019/04/04 全球购物
Ruby如何创建一个线程
2013/03/10 面试题
体育教育专业自荐信范文
2013/12/20 职场文书
工商管理毕业生推荐信
2013/12/24 职场文书
公务员培训心得体会
2013/12/28 职场文书
大二学生职业生涯规划书
2014/02/05 职场文书
2014年大班元旦活动方案
2014/02/26 职场文书
2014党支部对照检查材料思想汇报
2014/10/05 职场文书
给领导的感谢信范文
2015/01/23 职场文书
安全教育主题班会教案
2015/08/12 职场文书
《蓝鲸的眼睛》读后感5篇
2020/01/15 职场文书
服务器SVN搭建图文安装过程
2022/06/21 Servers