基于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 相关文章推荐
javascript中类的定义及其方式(《javascript高级程序设计》学习笔记)
Jul 04 Javascript
jquery用ajax方式从后台获取json数据后如何将内容填充到下拉列表
Aug 26 Javascript
跟我学习javascript的prototype原型和原型链
Nov 18 Javascript
js实现对ajax请求面向对象的封装
Jan 08 Javascript
基于javascript实现简单的抽奖系统
Apr 15 Javascript
js创建数组的简单方法
Jul 27 Javascript
推荐VSCode 上特别好用的 Vue 插件之vetur
Sep 14 Javascript
js实现鼠标移动到图片产生遮罩效果
Oct 21 Javascript
Vue实现自定义下拉菜单功能
Jul 16 Javascript
html+jQuery实现拖动滑块图片拼图验证码插件【移动端适用】
Sep 10 jQuery
基于javascript实现贪吃蛇经典小游戏
Apr 10 Javascript
JS实现简单控制视频播放倍速的实例代码
Apr 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
mysql 搜索之简单应用
2007/04/27 PHP
PHP+MySQL 制作简单的留言本
2009/11/02 PHP
PHP中使用xmlreader读取xml数据示例
2014/12/29 PHP
php银联网页支付实现方法
2015/03/04 PHP
PHP+ajax分页实例简析
2015/12/07 PHP
PHP浮点比较大小的方法
2016/02/14 PHP
JS和Jquery获取和修改label的值的示例代码
2014/01/15 Javascript
javascript:window.open弹出窗口的位置问题
2014/03/18 Javascript
jQuery的load()方法及其回调函数用法实例
2015/03/25 Javascript
JavaScript中实现map功能代码分享
2015/06/11 Javascript
理解JavaScript中worker事件api
2015/12/25 Javascript
深入理解vue.js双向绑定的实现原理
2016/12/05 Javascript
JS正则匹配URL网址的方法(可匹配www,http开头的一切网址)
2017/01/06 Javascript
详解微信开发中snsapi_base和snsapi_userinfo及静默授权的实现
2017/03/11 Javascript
详解ElementUI之表单验证、数据绑定、路由跳转
2017/06/21 Javascript
Vue数据双向绑定原理及简单实现方法
2018/05/18 Javascript
浅谈vue引用静态资源需要注意的事项
2018/09/28 Javascript
微信js-sdk 录音功能的示例代码
2019/11/01 Javascript
在react-antd中弹出层form内容传递给父组件的操作
2020/10/24 Javascript
express异步函数异常捕获示例详解
2020/11/30 Javascript
Python字符遍历的艺术
2008/09/06 Python
Python遍历文件夹和读写文件的实现方法
2017/05/10 Python
Python cookbook(数据结构与算法)将序列分解为单独变量的方法
2018/02/13 Python
python构建深度神经网络(DNN)
2018/03/10 Python
python多进程使用及线程池的使用方法代码详解
2018/10/24 Python
浅谈JupyterNotebook导出pdf解决中文的问题
2020/04/22 Python
玩转CSS3色彩
2010/01/16 HTML / CSS
CSS3 边框效果
2019/11/04 HTML / CSS
CSS3实现苹果手机解锁的字体闪亮效果示例
2021/01/05 HTML / CSS
意大利单身交友网站:Meetic
2020/07/12 全球购物
在使用非全零作为空指针内部表达的机器上, NULL是如何定义
2014/11/09 面试题
王金山在党的群众路线教育实践活动总结大会上的讲话稿
2014/10/25 职场文书
学生保证书格式
2015/02/27 职场文书
太空授课观后感
2015/06/17 职场文书
小学生红领巾广播稿
2015/08/19 职场文书
Python可变集合和不可变集合的构造方法大全
2021/12/06 Python