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 相关文章推荐
javascript 播放器 控制
Jan 22 Javascript
Mootools 1.2教程(2) DOM选择器
Sep 14 Javascript
一个挺有意思的Javascript小问题说明
Sep 26 Javascript
js统计页面的来访次数实现代码
May 09 Javascript
Javascript基础教程之for循环
Jan 18 Javascript
PHP+mysql+Highcharts生成饼状图
May 04 Javascript
AngularJS在IE下取数据总是缓存问题的解决方法
Aug 05 Javascript
jquery横向纵向鼠标滚轮全屏切换
Feb 27 Javascript
jquery手机触屏滑动拼音字母城市选择器的实例代码
Dec 11 jQuery
d3.js实现自定义多y轴折线图的示例代码
May 30 Javascript
JavaScript实现省市联动效果
Nov 22 Javascript
vue判断按钮是否可以点击
Apr 09 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
虫族 Zerg 魔法科技
2020/03/14 星际争霸
深入解析yii权限分级式访问控制的实现(非RBAC法)
2013/06/13 PHP
PHP处理CSV表格文件的常用操作方法总结
2016/07/01 PHP
Yii2.0中使用js异步删除示例
2017/03/10 PHP
JQueryEasyUI datagrid框架的基本使用
2013/04/08 Javascript
jquery select 设置默认选中的示例代码
2014/02/07 Javascript
简介JavaScript中的setDate()方法的使用
2015/06/11 Javascript
jQuery插件EasyUI获取当前Tab中iframe窗体对象的方法
2016/08/05 Javascript
JS实现太极旋转思路分析
2016/12/09 Javascript
如何理解Vue的作用域插槽的实现原理
2017/08/19 Javascript
基于Vue2.X的路由和钩子函数详解
2018/02/09 Javascript
JS选取DOM元素常见操作方法实例分析
2018/12/10 Javascript
JS如何实现手机端输入验证码效果
2020/05/13 Javascript
[01:03:51]2018DOTA2亚洲邀请赛 4.7 淘汰赛 VP vs LGD 第三场
2018/04/09 DOTA
python脚本实现查找webshell的方法
2014/07/31 Python
Python中捕捉详细异常信息的代码示例
2014/09/18 Python
python计算牛顿迭代多项式实例分析
2015/05/07 Python
尝试用最短的Python代码来实现服务器和代理服务器
2016/06/23 Python
Python 实现 贪吃蛇大作战 代码分享
2016/09/07 Python
Python 堆叠柱状图绘制方法
2019/07/29 Python
详解Python中import机制
2020/09/11 Python
美国汽车轮胎和轮毂销售网站:Tire Rack
2018/01/11 全球购物
精油和天然健康美容产品:Art Naturals
2018/01/27 全球购物
匡威英国官网:Converse英国
2018/12/02 全球购物
SCHIESSER荷兰官方网站:德国内衣专家
2020/10/09 全球购物
Ajax的工作原理
2015/12/04 面试题
给同学的道歉信
2014/01/16 职场文书
30岁生日感言
2014/01/25 职场文书
中学生自我评价范文
2014/02/08 职场文书
《小猫刮胡子》教学反思
2014/02/21 职场文书
股权收购意向书
2014/04/01 职场文书
2014年秋季新学期寄语
2014/08/02 职场文书
工商局所长四风自我剖析及整改措施
2014/10/26 职场文书
实习班主任自我评价
2015/03/11 职场文书
婚庆答谢词大全
2015/09/29 职场文书
导游词之江苏溱潼古镇
2019/11/27 职场文书