基于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 相关文章推荐
异步加载script的代码
Jan 12 Javascript
读jQuery之二(两种扩展)
Jun 11 Javascript
javascript 闭包
Sep 15 Javascript
你必须知道的Javascript知识点之&quot;深入理解作用域链&quot;的介绍
Apr 23 Javascript
JS控制输入框内字符串长度
May 21 Javascript
js实现分享到随页面滚动而滑动效果的方法
Apr 10 Javascript
JavaScript中使用指数方法Math.exp()的简介
Jun 15 Javascript
JavaScript html5 canvas绘制时钟效果
Mar 01 Javascript
AngularJs 指令详解及示例代码
Sep 01 Javascript
JS 验证密码 不能为空,必须含有数字、字母、特殊字符,长度在8-12位
Jun 21 Javascript
基于JavaScript中字符串的match与replace方法(详解)
Dec 04 Javascript
js时间戳与日期格式之间转换详解
Dec 11 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/06/07 PHP
php google或baidu分页代码
2009/11/26 PHP
PHP贪婪算法解决0-1背包问题实例分析
2015/03/23 PHP
Yii2框架配置文件(Application属性)与调试技巧实例分析
2019/05/27 PHP
php字符串过滤strip_tags()函数用法实例分析
2019/06/24 PHP
理解Javascript_06_理解对象的创建过程
2010/10/15 Javascript
js创建元素(节点)示例
2014/01/02 Javascript
禁止按回车键提交表单的方法
2015/06/11 Javascript
IE10中flexigrid无法显示数据的解决方法
2015/07/26 Javascript
asp.net中oracle 存储过程(图文)
2015/08/12 Javascript
从零开始学习Node.js系列教程之基于connect和express框架的多页面实现数学运算示例
2017/04/13 Javascript
vue2.0 axios前后端数据处理实例代码
2017/06/30 Javascript
使用jQuery实现简单的tab框实例
2017/08/22 jQuery
微信小程序实现动态设置页面标题的方法【附源码下载】
2017/11/29 Javascript
vue的mixins属性详解
2018/03/14 Javascript
原生JS实现简单的无缝自动轮播效果
2018/09/26 Javascript
浅谈JS的原型和继承
2019/05/08 Javascript
详解微信小程序开发聊天室—实时聊天,支持图片预览
2019/05/20 Javascript
vue中根据时间戳判断对应的时间(今天 昨天 前天)
2019/12/20 Javascript
[02:54]DOTA2英雄基础教程 撼地者
2014/01/14 DOTA
windows下wxPython开发环境安装与配置方法
2014/06/28 Python
python使用PIL模块实现给图片打水印的方法
2015/05/22 Python
在Linux系统上通过uWSGI配置Nginx+Python环境的教程
2015/12/25 Python
Python使用回溯法子集树模板获取最长公共子序列(LCS)的方法
2017/09/08 Python
Python使用Selenium模块实现模拟浏览器抓取淘宝商品美食信息功能示例
2018/07/18 Python
python和opencv实现抠图
2018/07/18 Python
python编写计算器功能
2019/10/25 Python
关于python pycharm中输出的内容不全的解决办法
2020/01/10 Python
详解用Python进行时间序列预测的7种方法
2020/03/13 Python
python如何输出反斜杠
2020/06/18 Python
口腔医学技术应届生求职信
2013/11/09 职场文书
消防先进事迹材料
2014/02/10 职场文书
社区端午节活动总结
2015/02/11 职场文书
2015年纪念“卢沟桥事变”78周年活动方案
2015/05/06 职场文书
使用pandas模块实现数据的标准化操作
2021/05/14 Python
java固定大小队列的几种实现方式详解
2021/07/15 Java/Android