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 动态修改样式和层叠样式表代码
Apr 27 Javascript
jquery photoFrame 图片边框美化显示插件
Jun 28 Javascript
JavaScript从数组中删除指定值元素的方法
Mar 18 Javascript
JavaScript实现表格点击排序的方法
May 11 Javascript
jQuery实现响应鼠标滚动的动感菜单效果
Sep 21 Javascript
基于jquery实现页面滚动到底自动加载数据的功能
Dec 19 Javascript
又一枚精彩的弹幕效果jQuery实现
Jul 25 Javascript
BootStrapValidator校验方式
Dec 19 Javascript
利用Plupload.js解决大文件上传问题, 带进度条和背景遮罩层
Mar 15 Javascript
angular.js4使用 RxJS 处理多个 Http 请求
Sep 23 Javascript
vue-router命名视图的使用讲解
Jan 19 Javascript
通过实例学习React中事件节流防抖
Jun 17 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中计算中文字符串长度、截取中文字符串的函数代码
2011/08/09 PHP
Codeigniter购物车类不能添加中文的解决方法
2014/11/29 PHP
WordPress特定文章对搜索引擎隐藏或只允许搜索引擎查看
2015/12/31 PHP
Symfony2安装的方法(2种方法)
2016/02/04 PHP
php mysql获取表字段名称和字段信息的三种方法
2016/11/13 PHP
支持汉转拼和拼音分词的PHP中文工具类ChineseUtil
2018/02/23 PHP
javascript的对话框详解与参数
2007/03/08 Javascript
验证用户是否修改过页面的数据的实现方法
2008/09/26 Javascript
基于jQuery的Tab选项框效果代码(插件)
2011/03/01 Javascript
读jQuery之六 缓存数据功能介绍
2011/06/21 Javascript
非常有用的40款jQuery 插件推荐(系列二)
2011/12/25 Javascript
jQuery中click事件的定义和用法
2014/12/20 Javascript
jQuery validate+artdialog+jquery form实现弹出表单思路详解
2016/04/18 Javascript
jQuery弹出遮罩层效果完整示例
2016/09/13 Javascript
阿里大于短信验证码node koa2的实现代码(最新)
2017/09/07 Javascript
打造通用的匀速运动框架(实例讲解)
2017/10/17 Javascript
vue.js实现的幻灯片功能示例
2019/01/18 Javascript
js实现网页随机验证码
2020/10/19 Javascript
使用python实现ANN
2017/12/20 Python
使用NumPy和pandas对CSV文件进行写操作的实例
2018/06/14 Python
Django配置celery(非djcelery)执行异步任务和定时任务
2018/07/16 Python
使用PyQtGraph绘制精美的股票行情K线图的示例代码
2019/03/14 Python
在Python中过滤Windows文件名中的非法字符方法
2019/06/10 Python
利用pyuic5将ui文件转换为py文件的方法
2019/06/19 Python
TensorFlow实现自定义Op方式
2020/02/04 Python
2014法院干警廉洁警示教育思想汇报
2014/09/13 职场文书
政府班子四风问题整改措施思想汇报
2014/10/08 职场文书
模范班主任事迹材料
2014/12/17 职场文书
护士求职自荐信
2015/03/25 职场文书
中学感恩教育活动总结
2015/05/05 职场文书
安全温馨提示语大全
2015/07/14 职场文书
化工生产实习心得体会
2016/01/22 职场文书
课文《燕子》教学反思
2016/02/17 职场文书
幽默导游词应该怎么写?
2019/08/26 职场文书
解决 Redis 秒杀超卖场景的高并发
2022/04/12 Redis
MyBatis XPathParser解析器使用范例详解
2022/07/15 Java/Android