基于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 相关文章推荐
服务端 VBScript 与 JScript 几个相同特性的写法 By shawl.qiu
Mar 06 Javascript
解决JS浮点数运算出现Bug的方法
Mar 12 Javascript
轻松实现JavaScript图片切换
Jan 12 Javascript
AngularJS中如何使用$parse或$eval在运行时对Scope变量赋值
Jan 25 Javascript
AngularJS动态生成div的ID源码解析
Aug 29 Javascript
jQuey将序列化对象在前台显示地实现代码(方法总结)
Dec 13 Javascript
Angularjs处理页面闪烁的解决方法
Mar 09 Javascript
vue-router路由与页面间导航实例解析
Nov 07 Javascript
JS实现显示当前日期的实例代码
Jul 03 Javascript
vue如何安装使用Quill富文本编辑器
Sep 21 Javascript
jQuery操作元素的内容和样式完整实例分析
Jan 10 jQuery
javascript实现简单页面倒计时
Mar 02 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
从零开始的异世界生活:第二季延期后,B站上架了第二部剧场版
2020/05/06 日漫
php中使用Curl、socket、file_get_contents三种方法POST提交数据
2011/08/12 PHP
Yii把CGridView文本框换成下拉框的方法
2014/12/03 PHP
thinkphp中session和cookie无效的解决方法
2014/12/19 PHP
Laravel中Facade的加载过程与原理详解
2017/09/22 PHP
两个select之间option的互相添加操作(jquery实现)
2009/11/12 Javascript
js 跳出页面的frameset框架示例介绍
2013/12/23 Javascript
jQuery背景插件backstretch使用指南
2015/04/21 Javascript
js实现横向伸展开的二级导航菜单代码
2015/08/28 Javascript
Laydate时间组件在火狐浏览器下有多时间输入框时只能给第一个输入框赋值的解决方法
2016/08/18 Javascript
微信小程序 开发经验整理
2017/02/15 Javascript
详解webpack 多入口配置
2017/06/16 Javascript
浅谈JS中的常用选择器及属性、方法的调用
2017/07/28 Javascript
不使用JavaScript实现菜单的打开和关闭效果demo
2018/05/01 Javascript
Vue CLI3 开启gzip压缩文件的方式
2018/09/30 Javascript
Vue组件Draggable实现拖拽功能
2018/12/01 Javascript
Vue渲染过程浅析
2019/03/14 Javascript
在微信小程序中使用图表的方法示例
2019/04/25 Javascript
用 js 写一个 js 解释器过程详解
2019/08/02 Javascript
extjs图形绘制之饼图实现方法分析
2020/03/06 Javascript
手把手教您实现react异步加载高阶组件
2020/04/07 Javascript
[01:03]PWL开团时刻DAY6——别打我
2020/11/05 DOTA
[54:43]DOTA2-DPC中国联赛 正赛 CDEC vs Dynasty BO3 第一场 2月22日
2021/03/11 DOTA
Python编程中字符串和列表的基本知识讲解
2015/10/14 Python
Python编程之微信推送模板消息功能示例
2017/08/21 Python
python jieba分词并统计词频后输出结果到Excel和txt文档方法
2018/02/11 Python
使用Python通过win32 COM打开Excel并添加Sheet的方法
2018/05/02 Python
树莓派动作捕捉抓拍存储图像脚本
2019/06/22 Python
pymysql模块的使用(增删改查)详解
2019/09/09 Python
Python通过类的组合模拟街道红绿灯
2020/09/16 Python
python中实现栈的三种方法
2020/12/19 Python
Hawes & Curtis澳大利亚官网:英国经典服饰品牌
2018/10/29 全球购物
几道PHP面试题
2013/04/14 面试题
国旗下的演讲稿
2014/05/08 职场文书
学生犯错保证书
2015/05/09 职场文书
创业计划书之零食店(进口)
2019/09/24 职场文书