基于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中Event属性搜集整理
Sep 17 Javascript
JS获取URL中参数值(QueryString)的4种方法分享
Apr 12 Javascript
一个js过滤空格的小函数
Oct 10 Javascript
js实现点击添加一个input节点
Dec 05 Javascript
javascript操作ul中li的方法
May 14 Javascript
JS控制TreeView的结点选择
Nov 11 Javascript
Angular2 PrimeNG分页模块学习
Jan 14 Javascript
基于Vue的文字跑马灯组件(npm 组件包)
May 24 Javascript
jQuery中ajax请求后台返回json数据并渲染HTML的方法
Aug 08 jQuery
JavaScript面向对象继承原理与实现方法分析
Aug 09 Javascript
微信小程序bindinput与bindsubmit的区别实例分析
Apr 17 Javascript
vue2.x 对象劫持的原理实现
Apr 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
PHP - Html Transfer Code
2006/10/09 PHP
解析linux下安装memcacheq(mcq)全过程笔记
2013/06/27 PHP
PHP打开和关闭文件操作函数总结
2014/11/18 PHP
关于PHP中字符串与多进制转换函数的实例代码
2016/11/03 PHP
php中Redis的应用--消息传递
2017/03/28 PHP
php strftime函数的详细用法
2018/06/21 PHP
PHP5.5新特性之yield理解与用法实例分析
2019/01/11 PHP
PHP swoole和redis异步任务实现方法分析
2019/08/12 PHP
用javascript动态调整iframe高度的代码
2007/04/10 Javascript
javaScript checkbox 全选/反选及批量删除
2010/04/28 Javascript
得到jQuery detach()后节点中的某个值实现代码
2013/02/05 Javascript
js实现具有高亮显示效果的多级菜单代码
2015/09/01 Javascript
使用jQuery在移动页面上添加按钮和给按钮添加图标
2015/12/04 Javascript
js实现滚动条滚动到某个位置便自动定位某个tr
2021/01/20 Javascript
jquery中实现时间戳与日期相互转换
2016/04/12 Javascript
jQuery基于ID调用指定iframe页面内的方法
2016/07/06 Javascript
jQuery之简单的表单验证实例
2016/07/07 Javascript
jQuery视差滚动效果网页实现方法经验总结
2016/09/29 Javascript
Jquery获取radio选中的值
2017/05/05 jQuery
使用Vue.js开发微信小程序开源框架mpvue解析
2018/03/20 Javascript
js获取url页面id,也就是最后的数字文件名
2020/09/25 Javascript
Python中的Socket 与 ScoketServer 通信及遇到问题解决方法
2019/04/01 Python
win10安装tensorflow-gpu1.8.0详细完整步骤
2020/01/20 Python
浅谈pytorch torch.backends.cudnn设置作用
2020/02/20 Python
彻底解决pip下载pytorch慢的问题方法
2021/03/01 Python
CSS实现鼠标滑过鼠标点击代码写法
2016/12/26 HTML / CSS
IE兼容css3圆角的实现代码
2011/07/21 HTML / CSS
详解Canvas实用库Fabric.js使用手册
2019/01/07 HTML / CSS
大学生实习期自我评价范文
2013/10/03 职场文书
出纳岗位职责模板
2013/11/27 职场文书
初一英语教学反思
2014/01/11 职场文书
公司办公室岗位职责
2014/03/19 职场文书
基层组织建设年活动总结
2015/05/09 职场文书
HR在给员工开具离职证明时,需要注意哪些问题?
2019/07/03 职场文书
导游词之广州陈家祠
2019/10/21 职场文书
Python使用openpyxl批量处理数据
2021/06/23 Python