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 相关文章推荐
MSN消息提示类
Sep 05 Javascript
ASP中用Join和Array,可以加快字符连接速度的代码
Aug 22 Javascript
对象无length属性时IE6/IE7中无法将其转换成伪数组(ArrayLike)
Jul 31 Javascript
JavaScript中的对象序列化介绍
Dec 30 Javascript
Juery解决tablesorter中文排序和字符范围的方法
May 06 Javascript
jQuery模仿京东/天猫商品左侧分类导航菜单效果
Jun 29 Javascript
AngularJS 依赖注入详解和简单实例
Jul 28 Javascript
Angular学习教程之RouterLink花式跳转
May 03 Javascript
Vue 列表上下过渡效果的实例代码
Jun 25 Javascript
详解小程序BackgroundAudioManager踩坑之旅
Dec 08 Javascript
Vue移动端实现图片上传及超过1M压缩上传
Dec 23 Javascript
通过实例了解Render Props回调地狱解决方案
Nov 04 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
模拟SQLSERVER的两个函数:dateadd(),datediff()
2006/10/09 PHP
javascript面向对象之访问对象属性的两种方式分析
2015/01/13 Javascript
JavaScript实现通过select标签跳转网页的方法
2016/09/29 Javascript
利用CSS、JavaScript及Ajax实现图片预加载的三大方法
2017/01/22 Javascript
如何在Angular2中使用jQuery及其插件的方法
2017/02/09 Javascript
vue 请求后台数据的实例代码
2017/06/22 Javascript
打字效果动画的4种实现方法(超简单)
2017/10/18 Javascript
js数组方法reduce经典用法代码分享
2018/01/07 Javascript
JS Math对象与Math方法实例小结
2019/07/05 Javascript
使用Layer组件弹出多个对话框(非嵌套)与关闭及刷新的例子
2019/09/25 Javascript
mpvue微信小程序的接口请求fly全局拦截代码实例
2019/11/13 Javascript
JavaScript中的类型检查
2020/02/03 Javascript
微信小程序学习总结(三)条件、模板、文件引用实例分析
2020/06/04 Javascript
vue+axios全局添加请求头和参数操作
2020/07/24 Javascript
浅析微信小程序自定义日历组件及flex布局最后一行对齐问题
2020/10/29 Javascript
梳理一下vue中的生命周期
2020/12/30 Vue.js
[42:52]IG vs VGJ.T 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
python删除特定文件的方法
2015/07/30 Python
Django的Modelforms用法简介
2019/07/27 Python
Python实现的爬取豆瓣电影信息功能案例
2019/09/15 Python
python 爬虫 实现增量去重和定时爬取实例
2020/02/28 Python
pytorch随机采样操作SubsetRandomSampler()
2020/07/07 Python
详解Python中的文件操作
2021/01/14 Python
html5 canvas 实现光线沿不规则路径运动
2020/04/20 HTML / CSS
卡骆驰新加坡官网:Crocs新加坡
2018/06/12 全球购物
介绍一下sql server的安全性
2014/08/10 面试题
一名毕业生的自我鉴定
2013/12/04 职场文书
生产部经理岗位职责
2013/12/16 职场文书
会计与出纳自荐书范文
2014/03/16 职场文书
阳光体育活动总结
2014/04/30 职场文书
公司承诺书格式
2014/05/21 职场文书
优秀家长自荐材料
2014/08/26 职场文书
2016年村干部公开承诺书(公开承诺事项)
2016/03/25 职场文书
Apache Calcite 实现方言转换的代码
2021/04/24 Servers
总结几个非常实用的Python库
2021/06/26 Python
javascript实现计算器功能详解流程
2021/11/01 Javascript