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 相关文章推荐
js实现收缩菜单效果实例代码
Oct 30 Javascript
connect中间件session、cookie的使用方法分享
Jun 17 Javascript
jQuery实现列表的全选功能
Mar 18 Javascript
Node.js实用代码段之获取Buffer对象字节长度
Mar 17 Javascript
JS组件Bootstrap按钮组与下拉按钮详解
May 10 Javascript
适用于手机端的jQuery图片滑块动画
Dec 09 Javascript
基于daterangepicker日历插件使用参数注意的问题
Aug 10 Javascript
微信小程序实现的贪吃蛇游戏【附源码下载】
Jan 03 Javascript
vue2.0 兄弟组件(平级)通讯的实现代码
Jan 15 Javascript
vue 中swiper的使用教程
May 22 Javascript
jquery实现进度条状态展示
Mar 26 jQuery
你不知道的 TypeScript 高级类型(小结)
Aug 28 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
PHP中调用JAVA
2006/10/09 PHP
一个严格的PHP Session会话超时时间设置方法
2014/06/10 PHP
深入浅析php json 格式控制
2015/12/24 PHP
php实现scws中文分词搜索的方法
2015/12/25 PHP
PHP MVC框架skymvc支持多文件上传
2016/05/26 PHP
php设计模式之策略模式实例分析【星际争霸游戏案例】
2020/03/26 PHP
childNodes.length与children.length的区别
2009/05/14 Javascript
js里取容器大小、定位、距离等属性搜集整理
2013/08/19 Javascript
JavaScript电子时钟倒计时
2016/01/09 Javascript
javascript瀑布流式图片懒加载实例
2020/06/28 Javascript
Javascript日期格式化format函数的使用方法
2016/08/30 Javascript
利用javascript实现的三种图片放大镜效果实例(附源码)
2017/01/23 Javascript
BootStrap实现带关闭按钮功能
2017/02/15 Javascript
Bootstrap3多级下拉菜单
2017/02/24 Javascript
详解angularjs的数组传参方式的简单实现
2017/07/28 Javascript
解决Jstree 选中父节点时被禁用的子节点也会选中的问题
2017/12/27 Javascript
JavaScript实现写入文件到本地的方法【基于FileSaver.js插件】
2018/03/15 Javascript
jQuery实现点击自身以外区域关闭弹出层功能完整示例【改进版】
2018/07/31 jQuery
如何让微信小程序页面之间的通信不再变困难
2019/06/03 Javascript
微信小程序实现带放大效果的轮播图
2020/05/26 Javascript
Python中函数的参数传递与可变长参数介绍
2015/06/30 Python
Python实现针对中文排序的方法
2017/05/09 Python
基于windows下pip安装python模块时报错总结
2018/06/12 Python
Python读取txt文件数据的方法(用于接口自动化参数化数据)
2018/06/27 Python
使用WingPro 7 设置Python路径的方法
2019/07/24 Python
python字典排序的方法
2019/10/12 Python
python读取ini配置的类封装代码实例
2020/01/08 Python
Django 解决阿里云部署同步数据库报错的问题
2020/05/14 Python
详解canvas绘图时遇到的跨域问题
2018/03/22 HTML / CSS
法国娇韵诗官方旗舰店:Clarins是来自法国的天然护肤品牌
2018/06/30 全球购物
庆元旦广播稿
2014/02/10 职场文书
园林专业毕业生自荐信
2014/07/04 职场文书
校外活动方案
2014/08/28 职场文书
2015年学校图书室工作总结
2015/05/19 职场文书
关于公司年会的开幕词
2016/03/04 职场文书
使用python绘制分组对比柱状图
2022/04/21 Python