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 相关文章推荐
一段实时更新的时间代码
Jul 07 Javascript
jquery 查找新建元素代码
Jul 06 Javascript
页面只能打开一次Cooike如何实现
Dec 04 Javascript
JavaScript基础语法、dom操作树及document对象
Dec 02 Javascript
jquery带下拉菜单和焦点图代码分享
Aug 24 Javascript
原生JavaScript实现Ajax的方法
Apr 07 Javascript
Vue.js常用指令汇总(v-if、v-for等)
Nov 03 Javascript
Angular1.x自定义指令实例详解
Mar 01 Javascript
jQuery实现的回车触发按钮事件功能示例
Mar 25 jQuery
Angular学习教程之RouterLink花式跳转
May 03 Javascript
如何正确理解vue中的key详解
Nov 02 Javascript
react 原生实现头像滚动播放的示例
Apr 21 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
WordPress开发中用于获取近期文章的PHP函数使用解析
2016/01/05 PHP
php加密之discuz内容经典加密方式实例详解
2017/02/04 PHP
PHP自定义序列化接口Serializable用法分析
2017/12/29 PHP
PHP开发api接口安全验证操作实例详解
2020/03/26 PHP
javascript demo 基本技巧
2009/12/18 Javascript
javascript 原型继承介绍
2011/08/30 Javascript
AngularJS实现表单验证
2015/01/28 Javascript
JavaScript在Android的WebView中parseInt函数转换不正确问题解决方法
2015/04/25 Javascript
javascript省市区三级联动下拉框菜单实例演示
2015/11/29 Javascript
详解Python中logging日志模块在多进程环境下的使用
2016/12/26 Javascript
Three.js利用dat.GUI如何简化试验流程详解
2017/09/26 Javascript
如何开发出更好的JavaScript模块
2017/12/22 Javascript
Vue v2.4中新增的$attrs及$listeners属性使用教程
2018/01/08 Javascript
swiper 解决动态加载数据滑动失效的问题
2018/02/26 Javascript
Vue中的methods、watch、computed的区别
2018/11/26 Javascript
JS实现求字符串中出现最多次数的字符和次数示例
2019/07/05 Javascript
[03:24]CDEC.Y赛前采访 努力备战2016国际邀请赛中国区预选赛
2016/06/25 DOTA
python实现bucket排序算法实例分析
2015/05/04 Python
Python使用xlwt模块操作Excel的方法详解
2018/03/27 Python
python3.x实现发送邮件功能
2018/05/22 Python
Python subprocess库的使用详解
2018/10/26 Python
python中yield的用法详解——最简单,最清晰的解释
2019/04/04 Python
Python增强赋值和共享引用注意事项小结
2019/05/28 Python
详解使用scrapy进行模拟登陆三种方式
2021/02/21 Python
专门经营化妆刷的美国彩妆品牌:Sigma Beauty
2017/09/11 全球购物
顶碗少年教学反思
2014/02/21 职场文书
学校志愿者活动总结
2014/06/27 职场文书
超市开业庆典活动策划方案
2014/09/15 职场文书
精神文明建设汇报材料
2014/12/24 职场文书
自主招生推荐信格式模板
2015/03/24 职场文书
2015年店长工作总结范文
2015/04/08 职场文书
大学生党课感想
2015/08/11 职场文书
2016党员党课心得体会
2016/01/07 职场文书
Python列表删除重复元素与图像相似度判断及删除实例代码
2021/05/07 Python
Python列表的索引与切片
2022/04/07 Python
Vscode中SSH插件如何远程连接Linux
2022/05/02 Servers