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 相关文章推荐
Ext JS Grid在IE6 下宽度的问题解决方法
Feb 15 Javascript
用jquery ajax获取网站Alexa排名的代码
Dec 12 Javascript
jQuery拖拽排序插件制作拖拽排序效果(附源码下载)
Feb 23 Javascript
jQuery ajax中使用confirm,确认是否删除的简单实例
Jun 17 Javascript
JS组件系列之JS组件封装过程详解
Apr 28 Javascript
webpack打包js文件及部署的实现方法
Dec 18 Javascript
手写简单的jQuery雪花飘落效果实例
Apr 22 jQuery
vue移动端实现红包雨效果
Jun 23 Javascript
用POSTMAN发送JSON格式的POST请求示例
Sep 04 Javascript
在layui tab控件中载入外部html页面的方法
Sep 04 Javascript
js实现贪吃蛇游戏(简易版)
Sep 29 Javascript
分享15个Webpack实用的插件!!!
Mar 31 Javascript
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
Parse正式发布开源PHP SDK
2014/08/11 PHP
PHP解码unicode编码的中文字符代码分享
2014/08/13 PHP
PHP获取用户访问IP地址的5种方法
2016/05/16 PHP
laravel 解决paginate查询多个字段报错的问题
2019/10/22 PHP
TP3.2.3框架文件上传操作实例详解
2020/01/23 PHP
广告代码静态化js通用函数
2007/05/09 Javascript
JS IE和FF兼容性问题汇总
2009/02/09 Javascript
Jquery 基础学习笔记
2009/05/29 Javascript
jquery重复提交请求的原因浅析
2014/05/23 Javascript
JavaScript利用正则表达式去除日期中的-
2014/06/09 Javascript
jQuery中ajax的get()方法用法实例
2014/12/26 Javascript
在JavaScript中处理时间之setMinutes()方法的使用
2015/06/11 Javascript
jquery插件jquery.LightBox.js实现点击放大图片并左右点击切换效果(附demo源码下载)
2016/02/25 Javascript
Javascript中浏览器窗口的基本操作总结
2016/08/18 Javascript
详解js运算符单竖杠“|”与“||”的用法和作用介绍
2016/11/04 Javascript
获取jqGrid中选择的行的数据
2016/11/30 Javascript
浅述节点的创建及常见功能的实现
2016/12/15 Javascript
JS异步文件分片断点上传的实现思路
2016/12/25 Javascript
Vue-resource实现ajax请求和跨域请求示例
2017/02/23 Javascript
JS正则获取HTML元素的方法
2017/03/31 Javascript
vue货币过滤器的实现方法
2017/04/01 Javascript
微信小程序文字显示换行问题
2019/07/28 Javascript
node命令行工具之实现项目工程自动初始化的标准流程
2019/08/12 Javascript
es6中new.target的作用和使用场景简单示例分析
2020/03/14 Javascript
[05:31]DOTA2英雄梦之声_第04期_光之守卫
2014/06/23 DOTA
Python序列之list和tuple常用方法以及注意事项
2015/01/09 Python
Python3实现腾讯云OCR识别
2018/11/27 Python
CSS3制作苹果风格键盘特效
2015/02/26 HTML / CSS
Html5游戏开发之乒乓Ping Pong游戏示例(二)
2013/01/21 HTML / CSS
德国滑雪和户外用品网上商店:XSPO
2019/10/30 全球购物
财务主管自我鉴定
2014/01/17 职场文书
明确岗位职责
2015/02/14 职场文书
上学路上观后感
2015/06/16 职场文书
领导离职感言
2015/08/03 职场文书
给领导敬酒词
2015/08/12 职场文书
golang的文件创建及读写操作
2022/04/14 Golang