基于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 this 和 $(this) 的区别
Aug 23 Javascript
获取服务器传来的数据 用JS去空格的正则表达式
Mar 26 Javascript
用js判断输入是否为中文的函数
Mar 10 Javascript
初识Node.js
Sep 03 Javascript
jQuery实现contains方法不区分大小写的方法
Feb 13 Javascript
Bootstrap每天必学之简单入门
Nov 19 Javascript
分享javascript实现的冒泡排序代码并优化
Jun 05 Javascript
浅析JavaScript中命名空间namespace模式
Jun 22 Javascript
jquery实现文本框的禁用和启用
Dec 07 Javascript
Vue 3.0 前瞻Vue Function API新特性体验
Aug 12 Javascript
如何用JS模拟实现数组的map方法
Jul 30 Javascript
JS+CSS实现动态时钟
Feb 19 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
无线电广播与收音机发展的历史回眸
2021/03/02 无线电
php生出随机字符串
2017/07/06 PHP
PHP迭代与递归实现无限级分类
2017/08/28 PHP
PHP中number_format()函数的用法讲解
2019/04/08 PHP
php快速导入大量数据的实例方法
2019/09/23 PHP
javascript字典探测用户名工具
2006/10/05 Javascript
idTabs基于JQuery的根据URL参数选择Tab插件
2012/04/11 Javascript
jquery Mobile入门—外部链接切换示例代码
2013/01/08 Javascript
网页广告中JS代码的信息监听示例
2014/04/02 Javascript
js电话号码验证方法
2015/09/28 Javascript
手动初始化Angular的模块与控制器
2016/12/26 Javascript
解决ajax不能访问本地文件问题(利用js跨域原理)
2017/01/24 Javascript
详解JavaScript对象的深浅复制
2017/03/30 Javascript
使用vue制作探探滑动堆叠组件的实例代码
2018/03/07 Javascript
微信小程序项目总结之记账小程序功能的实现(包括后端)
2019/08/20 Javascript
解决layui追加或者动态修改的表单元素“没效果”的问题
2019/09/18 Javascript
three.js 将图片马赛克化的示例代码
2020/07/31 Javascript
[01:05:59]Mineski vs Secret 2019国际邀请赛淘汰赛 败者组 BO3 第二场 8.22
2019/09/05 DOTA
Python调用命令行进度条的方法
2015/05/05 Python
Python的Flask框架中使用Flask-Migrate扩展迁移数据库的教程
2016/06/14 Python
python将文本中的空格替换为换行的方法
2018/03/19 Python
Python pygorithm模块用法示例【常见算法测试】
2018/08/16 Python
对Python中内置异常层次结构详解
2018/10/18 Python
Python操作rabbitMQ的示例代码
2019/03/19 Python
django将网络中的图片,保存成model中的ImageField的实例
2019/08/07 Python
Python流程控制 if else实现解析
2019/09/02 Python
用python爬取历史天气数据的方法示例
2019/12/30 Python
Pytorch转tflite方式
2020/05/25 Python
关于HTML5+ API plusready的兼容问题
2020/11/20 HTML / CSS
比较一下entity bean和session bean
2013/12/27 面试题
暑期研修感言
2014/02/17 职场文书
教师四风问题整改措施
2014/09/25 职场文书
出差报告格式模板
2014/11/06 职场文书
python 命令行传参方法总结
2021/05/25 Python
MySQL系列之十四 MySQL的高可用实现
2021/07/02 MySQL
SQL bool盲注和时间盲注详解
2022/07/23 SQL Server