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 相关文章推荐
JQuery制作的放大效果的popup对话框(未添加任何jquery plugin)分享
Apr 28 Javascript
用Jquery.load载入页面后样式没了页面混乱的解决方法
Oct 20 Javascript
jquery插件jquery.LightBox.js实现点击放大图片并左右点击切换效果(附demo源码下载)
Feb 25 Javascript
深入理解React中es6创建组件this的方法
Aug 29 Javascript
Bootstrap弹出框modal上层的输入框不能获得焦点问题的解决方法
Dec 13 Javascript
Node.js查找当前目录下文件夹实例代码
Mar 07 Javascript
纯JS实现简单的日历
Jun 26 Javascript
微信小程序适配iphoneX的实现方法
Sep 18 Javascript
使用 Node.js 实现图片的动态裁切及算法实例代码详解
Sep 29 Javascript
jQuery子选择器与可见性选择器实例分析
Jun 28 jQuery
你或许不知道的一些npm实用技巧
Jul 04 Javascript
基于Vue.js与WordPress Rest API构建单页应用详解
Sep 16 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
一个简单计数器的源代码
2006/10/09 PHP
新手学PHP之数据库操作详解及乱码解决!
2007/01/02 PHP
使用php+swoole对client数据实时更新(一)
2016/01/07 PHP
php实现中文转数字
2016/02/18 PHP
基于CI(CodeIgniter)框架实现购物车功能的方法
2018/04/09 PHP
javascript function、指针及内置对象
2009/02/19 Javascript
ExtJS 入门
2010/10/29 Javascript
js当一个变量为函数时 应该注意的一点细节小结
2011/12/29 Javascript
js图片滚动效果时间可随意设定当鼠标移上去时停止
2014/06/26 Javascript
纯javascript实现简单下拉刷新功能
2015/03/13 Javascript
10条建议帮助你创建更好的jQuery插件
2015/05/18 Javascript
深入理解JavaScript内置函数
2016/06/03 Javascript
利用js判断手机是否安装某个app的多种方案
2017/02/13 Javascript
three.js中文文档学习之创建场景
2017/11/20 Javascript
搭建element-ui的Vue前端工程操作实例
2018/02/23 Javascript
解决jquery的ajax调取后端数据成功却渲染失败的问题
2018/08/08 jQuery
解决angular双向绑定无效果,ng-model不能正常显示的问题
2018/10/02 Javascript
微信小程序实现发送验证码按钮效果
2018/12/20 Javascript
Vue中Table组件Select的勾选和取消勾选事件详解
2019/03/19 Javascript
vue+express+jwt持久化登录的方法
2019/06/14 Javascript
浅谈vue项目,访问路径#号的问题
2020/08/14 Javascript
python统计字母、空格、数字等字符个数的实例
2018/06/29 Python
新年福利来一波之Python轻松集齐五福(demo)
2020/01/20 Python
在Mac中PyCharm配置python Anaconda环境过程图解
2020/03/11 Python
CSS3支持IE6, 7, and 8的边框border属性
2012/12/28 HTML / CSS
css3的图形3d翻转效果应用示例
2014/04/08 HTML / CSS
苏宁红孩子母婴商城:redbaby
2017/02/12 全球购物
世界领先的高品质定制产品平台:Zazzle
2017/07/23 全球购物
Tech21美国/加拿大:英国NO.1防摔保护壳品牌
2018/01/20 全球购物
js正则匹配markdown里的图片标签的实现
2021/03/24 Javascript
中西医专业毕业生职业规划书
2014/02/24 职场文书
监护人证明
2015/06/19 职场文书
初中团委工作总结
2015/08/13 职场文书
浅谈vue2的$refs在vue3组合式API中的替代方法
2021/04/18 Vue.js
Python数据结构之队列详解
2022/03/21 Python
详解Mysql数据库平滑扩容解决高并发和大数据量问题
2022/05/25 MySQL