基于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 相关文章推荐
js打印纸函数代码(递归)
Jun 18 Javascript
JavaScript 基础篇(一)
Mar 30 Javascript
基于jquery扩展漂亮的CheckBox(自己编写)
Nov 19 Javascript
Ext4.2的Ext.grid.plugin.RowExpander无法触发事件解决办法
Aug 15 Javascript
PHP结合jQuery实现红蓝投票功能特效
Jul 22 Javascript
Hammer.js+轮播原理实现简洁的滑屏功能
Feb 02 Javascript
原生Javascript插件开发实践
Jan 09 Javascript
浅谈JavaScript的innerWidth与innerHeight
Oct 12 Javascript
JavaScript实现小球沿正弦曲线运动
Sep 07 Javascript
jsonp实现百度下拉框功能的方法分析
May 10 Javascript
js实现移动端吸顶效果
Jan 08 Javascript
antd 表格列宽自适应方法以及错误处理操作
Oct 27 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
浅谈thinkphp5 instance 的简单实现
2017/07/30 PHP
Swoole4.4协程抢占式调度器详解
2019/05/23 PHP
jQuery实现类似滑动门切换效果的层切换
2013/09/23 Javascript
javascript包装对象实例分析
2015/03/27 Javascript
JavaScript中闭包的写法和作用详解
2016/06/29 Javascript
Javascript iframe交互并兼容各种浏览器的解决方法
2016/07/12 Javascript
详解jQuery事件
2017/01/13 Javascript
Webpack打包慢问题的完美解决方法
2017/03/16 Javascript
vue弹窗组件使用方法
2018/04/28 Javascript
详解Eslint 配置及规则说明
2018/09/10 Javascript
JavaScript实现的九种排序算法
2019/03/04 Javascript
使用React手写一个对话框或模态框的方法示例
2019/04/25 Javascript
微信小程序实现文件、图片上传功能
2020/08/18 Javascript
[01:12]DOTA2次级职业联赛 - Newbee.Y 战队宣传片
2014/12/01 DOTA
简介二分查找算法与相关的Python实现示例
2015/08/26 Python
深入解析Python编程中super关键字的用法
2016/06/24 Python
使用python判断你是青少年还是老年人
2018/11/29 Python
Python Flask 搭建微信小程序后台详解
2019/05/06 Python
python将时分秒转换成秒的实例
2019/12/07 Python
Python如何访问字符串中的值
2020/02/09 Python
Django Session和Cookie分别实现记住用户登录状态操作
2020/07/02 Python
python中如何设置代码自动提示
2020/07/15 Python
美国最受欢迎的童装品牌之一:The Children’s Place
2016/07/23 全球购物
你的自行车健身专家:FaFit24
2016/11/16 全球购物
简单说下OSPF的操作过程
2014/08/13 面试题
心理健康教育制度
2014/01/27 职场文书
市三好学生主要事迹
2014/01/28 职场文书
社团招新策划书
2014/02/04 职场文书
家长会主持词
2014/03/26 职场文书
新闻传媒系求职信范文
2014/04/19 职场文书
爱祖国爱家乡演讲稿
2014/09/02 职场文书
大学生学习面向未来的赶考思想汇报
2014/09/12 职场文书
2014县政府领导班子三严三实对照检查材料思想汇报
2014/09/26 职场文书
酒店圣诞节活动总结
2015/05/06 职场文书
高中语文教材(文学文化常识大全一)
2019/08/13 职场文书
安装Ruby和 Rails的详细步骤
2022/04/19 Ruby