基于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 表单验证插件formValidation实现个性化错误提示
Jun 23 Javascript
Javascript 模式实例 观察者模式
Oct 24 Javascript
Jquery实现无刷新DropDownList联动实现代码
Mar 08 Javascript
给ListBox添加双击事件示例代码
Dec 02 Javascript
浅谈jQuery中replace()方法
May 13 Javascript
第四篇Bootstrap网格系统偏移列和嵌套列
Jun 21 Javascript
深入理解JavaScript中的块级作用域、私有变量与模块模式
Oct 31 Javascript
原生JavaScript实现精美的淘宝轮播图效果示例【附demo源码下载】
May 27 Javascript
JS打印彩色菱形的实例代码
Aug 15 Javascript
webstorm+vue初始化项目的方法
Oct 18 Javascript
C#程序员入门学习微信小程序的笔记
Mar 05 Javascript
使用 JavaScript 制作页面效果
Apr 21 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/02/06 PHP
PHP使用mysql_fetch_row查询获得数据行列表的方法
2015/03/18 PHP
浅谈本地WAMP环境的搭建
2015/05/13 PHP
用AJAX返回HTML片段中的JavaScript脚本
2010/01/04 Javascript
jQuery在vs2008及js文件中的无智能提示的解决方法
2010/12/30 Javascript
html超链接打开窗口大小的方法
2013/03/05 Javascript
用javascript判断IE版本号简单实用且向后兼容
2013/09/11 Javascript
jQuery ajax dataType值为text json探索分享
2013/09/23 Javascript
Javascript中3种实现继承的方法和代码实例
2014/08/12 Javascript
Javascript 中创建自定义对象的方法汇总
2014/12/04 Javascript
JavaScript原生对象之Number对象的属性和方法详解
2015/03/13 Javascript
JS中利用localStorage防止页面动态添加数据刷新后数据丢失
2017/03/10 Javascript
Node.js  REPL (交互式解释器)实例详解
2017/08/06 Javascript
vue.js评论发布信息可插入QQ表情功能
2017/08/08 Javascript
vue 国际化 vue-i18n 双语言 语言包
2018/06/07 Javascript
微信小程序表单验证插件WxValidate的二次封装功能(终极版)
2019/09/03 Javascript
[00:47]TI7不朽珍藏III——沙王不朽展示
2017/07/15 DOTA
[01:32]完美世界DOTA2联赛10月29日精彩集锦
2020/10/30 DOTA
python使用百度翻译进行中翻英示例
2014/04/14 Python
python中使用百度音乐搜索的api下载指定歌曲的lrc歌词
2014/07/18 Python
Django基于ORM操作数据库的方法详解
2018/03/27 Python
Python线程同步的实现代码
2018/10/03 Python
python批量从es取数据的方法(文档数超过10000)
2018/12/27 Python
django之对FileField字段的upload_to的设定方法
2019/07/28 Python
AmazeUI 输入框组的示例代码
2020/08/14 HTML / CSS
美国专注于健康商品的网站:eVitamins
2017/01/23 全球购物
英国Lookfantastic中文网站:护肤品美妆美发购物(英国直邮)
2020/04/27 全球购物
武汉世纪畅想数字传播有限公司 .NET笔试题
2015/06/13 面试题
如何写一份好的自荐信
2014/01/02 职场文书
一夜的工作教学反思
2014/02/08 职场文书
教导主任竞聘演讲稿
2014/05/16 职场文书
优秀应届毕业生自荐书
2014/06/29 职场文书
2014年小学生教师节演讲稿范文
2014/09/10 职场文书
2015年见习期工作总结
2014/12/12 职场文书
起诉书范文
2015/05/20 职场文书
工资证明范本
2015/06/12 职场文书