基于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 相关文章推荐
代码生成器 document.write()
Apr 15 Javascript
JS事件Event元素(兼容IE,Firefox,Chorme)
Nov 01 Javascript
jQuery lazyLoad图片延迟加载插件的优化改造方法分享
Aug 13 Javascript
jquery固定底网站底部菜单效果
Aug 13 Javascript
Jquery on方法绑定事件后执行多次的解决方法
Jun 02 Javascript
微信小程序 MD5加密登录密码详解及实例代码
Jan 12 Javascript
Vue单页式应用(Hash模式下)实现微信分享的实例
Jul 21 Javascript
AngularJS的$location使用方法详解
Oct 19 Javascript
详细讲解如何创建, 发布自己的 Vue UI 组件库
May 29 Javascript
微信小程序实现商城倒计时
Nov 01 Javascript
Openlayers实现距离面积测量
Sep 28 Javascript
jquery插件懒加载的示例
Oct 24 jQuery
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
phpmyadmin操作流程
2006/10/09 PHP
PHP学习之输出字符串(echo,print,printf,print_r和var_dump)
2011/04/17 PHP
说说PHP的autoLoad自动加载机制
2012/09/27 PHP
php网站地图生成类示例
2014/01/13 PHP
PHP把JPEG图片转换成Progressive JPEG的方法
2014/06/30 PHP
PHP callback函数使用方法和注意事项
2015/01/23 PHP
扩展String功能方法
2006/09/22 Javascript
纯Javascript实现Windows 8 Metro风格实现
2013/10/15 Javascript
JS冒泡事件的快速解决方法
2013/12/16 Javascript
jQuery定义插件的方法
2015/12/18 Javascript
JS取模、取商及取整运算方法示例
2016/10/13 Javascript
详解React 16 中的异常处理
2017/07/28 Javascript
Node.js 的模块知识汇总
2017/08/16 Javascript
jquery中done和then的区别(详解)
2017/12/19 jQuery
简单理解Vue中的nextTick方法
2018/01/30 Javascript
vue用elementui写form表单时,在label里添加空格操作
2020/08/13 Javascript
vue中defineProperty和Proxy的区别详解
2020/11/30 Vue.js
[02:27]2018DOTA2亚洲邀请赛趣味视频之钓鱼大赛 谁是垂钓冠军?
2018/04/05 DOTA
Python获取央视节目单的实现代码
2015/07/25 Python
深入理解python try异常处理机制
2016/06/01 Python
Python Socket传输文件示例
2017/01/16 Python
python jieba分词并统计词频后输出结果到Excel和txt文档方法
2018/02/11 Python
Python中fnmatch模块的使用详情
2018/11/30 Python
Python3.8中使用f-strings调试
2019/05/22 Python
浅谈matplotlib.pyplot与axes的关系
2020/03/06 Python
python使用for...else跳出双层嵌套循环的方法实例
2020/05/17 Python
WoolOvers爱尔兰:羊绒、羊毛和棉针织品
2017/01/04 全球购物
以思科路由器为例你写下单臂路由的配置命令
2013/08/03 面试题
长青弘远的面试题
2012/06/09 面试题
社团招新策划书
2014/02/04 职场文书
委托书的格式
2014/08/01 职场文书
带刀到教室的检讨书
2014/10/04 职场文书
2014年质检工作总结
2014/11/26 职场文书
荆州古城导游词
2015/02/06 职场文书
2019入党申请书格式
2019/06/25 职场文书
springboot读取nacos配置文件
2022/05/20 Java/Android