JavaScript生成验证码并实现验证功能


Posted in Javascript onSeptember 24, 2016

废话不多说了,直接给大家贴代码了,具体代码如下所示:

<html> 
<head> 
<title>验证码</title> 
<style type="text/css"> 
#code 
{ 
font-family:Arial; 
font-style:italic; 
font-weight:bold; 
border:0; 
letter-spacing:2px; 
color:blue; 
} 
</style> 
<script type = "text/javascript" 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("请输入验证码!"); //则弹出请输入验证码 
} 
else if(inputCode != code ) { //若输入的验证码与产生的验证码不一致时 
alert("验证码输入错误!@_@"); //则弹出验证码输入错误 
createCode();//刷新验证码 
document.getElementById("input").value = "";//清空文本框 
} 
else { //输入正确时 
alert("^-^"); //弹出^-^ 
} 
}

以上所述是小编给大家介绍的JavaScript生成验证码并实现验证功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
Using the TextRange Object
Oct 14 Javascript
用户注册常用javascript代码
Aug 29 Javascript
javascript 伪数组实现方法
Oct 11 Javascript
判定是否原生方法的JS代码
Nov 12 Javascript
Jquery $when done then的用法详解
May 20 Javascript
jQuery+ajax简单实现文件上传的方法
Jun 03 Javascript
Angular中ng-repeat与ul li的多层嵌套重复问题
Jul 24 Javascript
微信小程序实现验证码获取倒计时效果
Feb 08 Javascript
Vue项目查看当前使用的elementUI版本的方法
Sep 27 Javascript
jQuery提示框插件SweetAlert用法分析
Aug 05 jQuery
JavaScript Reflect Metadata实现详解
Dec 12 Javascript
详解Vue3.0 + TypeScript + Vite初体验
Feb 22 Vue.js
JavaScript实现横线提示输入验证码随输入验证码输入消失的方法
Sep 24 #Javascript
javascript 分号总结及详细介绍
Sep 24 #Javascript
Bootstrap对话框使用实例讲解
Sep 24 #Javascript
基于chosen插件实现人员选择树搜索自动筛选功能
Sep 24 #Javascript
angular.js之路由的选择方法
Sep 24 #Javascript
用js写的一个路由(简单实例)
Sep 24 #Javascript
简单的js表格操作
Sep 24 #Javascript
You might like
15种PHP Encoder的比较
2007/03/06 PHP
PHP计算日期相差天数实例分析
2016/02/23 PHP
[原创]PHP global全局变量经典应用与注意事项分析【附$GLOBALS用法对比】
2019/07/12 PHP
phpstorm最新激活码分享亲测phpstorm2020.2.3版可用
2020/11/22 PHP
Ext第一周 史上最强学习笔记---GridPanel(基础篇)
2008/12/29 Javascript
jquery 弹出层注册页面等(asp.net后台)
2010/06/17 Javascript
菜鸟javascript基础整理1
2010/12/06 Javascript
一款jquery特效编写的大度宽屏焦点图切换特效的实例代码
2013/08/05 Javascript
初始Nodejs
2014/11/08 NodeJs
jQuery中prop()方法用法实例
2015/01/05 Javascript
jQuery的animate函数实现图文切换动画效果
2015/05/03 Javascript
Javascript 事件冒泡机制详细介绍
2016/10/10 Javascript
layer弹出层框架alert与msg详解
2017/03/14 Javascript
完美解决手机网页中输入框被输入法遮挡的问题
2017/12/19 Javascript
使用Bootstrap做一个朝代历史表
2019/12/10 Javascript
[41:54]2018DOTA2亚洲邀请赛 4.1 小组赛A组加赛 TNC vs Liquid
2018/04/03 DOTA
Django中的“惰性翻译”方法的相关使用
2015/07/27 Python
Python2.7基于淘宝接口获取IP地址所在地理位置的方法【测试可用】
2017/06/07 Python
对pandas中apply函数的用法详解
2018/04/10 Python
python实现函数极小值
2019/07/10 Python
如何使用selenium和requests组合实现登录页面
2020/02/03 Python
浅谈pandas.cut与pandas.qcut的使用方法及区别
2020/03/03 Python
Python xlrd模块导入过程及常用操作
2020/06/10 Python
Python使用struct处理二进制(pack和unpack用法)
2020/11/12 Python
Appium+Python实现简单的自动化登录测试的实现
2021/01/26 Python
推荐一些比较有用的css3新属性
2014/11/11 HTML / CSS
美国最大的香水连锁店官网:Perfumania
2016/08/15 全球购物
猫咪家具:CatsPlay
2018/11/03 全球购物
SQL里面IN比较快还是EXISTS比较快
2012/07/19 面试题
一道Delphi面试题
2016/10/28 面试题
国际贸易专业自荐信
2014/06/10 职场文书
信用卡结清证明怎么写
2014/09/13 职场文书
事业单位工作人员年度考核个人总结
2015/02/12 职场文书
小学教师读书笔记
2015/07/01 职场文书
大学生奖学金获奖感言(范文)
2019/08/15 职场文书
MySQL单表千万级数据处理的思路分享
2021/06/05 MySQL