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的消息提示插件 DivAlert之旅(二)
Apr 01 Javascript
详解jquery中$.ajax方法提交表单
Nov 03 Javascript
jQuery中slideUp()方法用法分析
Dec 24 Javascript
jQuery插件Validate实现自定义表单验证
Jan 18 Javascript
浅谈JS正则表达式的RegExp对象和括号的使用
Jul 28 Javascript
vue2.0开发实践总结之疑难篇
Dec 07 Javascript
Ionic + Angular.js实现图片轮播的方法示例
May 21 Javascript
mui 打开新窗口的方式总结及注意事项
Aug 20 Javascript
浅谈React和Redux的连接react-redux
Dec 04 Javascript
Vue两个版本的区别和使用方法(更深层次了解)
Feb 16 Javascript
用VsCode编辑TypeScript的实现方法
May 07 Javascript
JS禁用右键、禁用Ctrl+u、禁用Ctrl+s、禁用F12的实现代码
Dec 01 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可应用于面包屑导航的递归寻找家谱树实现方法
2015/02/02 PHP
yii2.0实现pathinfo的形式访问的配置方法
2016/04/06 PHP
Laravel5.5 数据库迁移:创建表与修改表示例
2019/10/23 PHP
Javascript和Java获取各种form表单信息的简单实例
2014/02/14 Javascript
node.js中的fs.fchmod方法使用说明
2014/12/16 Javascript
JavaScript基本语法讲解
2015/06/03 Javascript
nodejs爬虫抓取数据乱码问题总结
2015/07/03 NodeJs
利用jQuery实现漂亮的圆形进度条倒计时插件
2015/09/30 Javascript
javascript实现很浪漫的气泡冒出特效
2020/09/05 Javascript
BootStrap入门教程(一)之可视化布局
2016/09/19 Javascript
vue省市区三联动下拉选择组件的实现
2017/04/28 Javascript
原生js中ajax访问的实例详解
2017/09/19 Javascript
基于javascript中的typeof和类型判断(详解)
2017/10/27 Javascript
vue自定义全局组件(自定义插件)的用法
2018/01/30 Javascript
Angular通过指令动态添加组件问题
2018/07/09 Javascript
详解js根据百度地图提供经纬度计算两点距离
2019/05/13 Javascript
node中实现删除目录的几种方法
2019/06/24 Javascript
vue遍历对象中的数组取值示例
2019/11/07 Javascript
使用kbone解决Vue项目同时支持小程序问题
2019/11/08 Javascript
微信小程序国际化探索实现(附源码地址)
2020/05/20 Javascript
微信小程序仿抖音短视频切换效果的实例代码
2020/06/24 Javascript
在MAC上搭建python数据分析开发环境
2016/01/26 Python
python rsa 加密解密
2017/03/20 Python
Django中提供的6种缓存方式详解
2019/08/05 Python
Python从入门到精通之环境搭建教程图解
2019/09/26 Python
Travelstart沙特阿拉伯:廉价航班、豪华酒店和实惠的汽车租赁优惠
2019/04/06 全球购物
介绍一下结构化程序设计方法和面向对象程序设计方法的区别
2012/06/27 面试题
商务英语毕业生自荐信范文
2013/11/08 职场文书
售前工程师职业生涯规划
2014/03/02 职场文书
基层党支部公开承诺书
2014/05/29 职场文书
商铺门前三包责任书
2014/07/25 职场文书
行政人事主管岗位职责
2015/04/11 职场文书
爱心捐赠活动简讯
2015/07/20 职场文书
求职自荐信该如何书写?
2019/06/24 职场文书
Python爬虫基础讲解之请求
2021/05/13 Python
js Proxy的原理详解
2021/05/25 Javascript