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静态的url如何传递
May 03 Javascript
jquery click([data],fn)使用方法实例介绍
Jul 08 Javascript
JQuery 传送中文乱码问题的简单解决办法
May 24 Javascript
微信小程序  Mustache语法详细介绍
Oct 27 Javascript
js前端解决跨域问题的8种方案(最新最全)
Nov 18 Javascript
基于Angular.js实现的触摸滑动动画实例代码
Feb 19 Javascript
javascript将list转换成树状结构的实例
Sep 08 Javascript
深入理解Vue 单向数据流的原理
Nov 09 Javascript
jQuery实现动态加载(按需加载)javascript文件的方法分析
May 31 jQuery
react 移动端实现列表左滑删除的示例代码
Jul 04 Javascript
Ant Design Pro 下实现文件下载的实现代码
Dec 03 Javascript
React实现todolist功能
Dec 28 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
FCKeditor的安装(PHP)
2007/01/13 PHP
php的urlencode()URL编码函数浅析
2011/08/09 PHP
腾讯QQ微博API接口获取微博内容
2013/10/30 PHP
PHP的mysqli_query参数MYSQLI_STORE_RESULT和MYSQLI_USE_RESULT的区别
2014/09/29 PHP
php实现粘贴截图并完成上传功能
2015/05/17 PHP
php计算整个目录大小的方法
2015/06/01 PHP
PHP数组游标实现对数组的各种操作详解
2016/01/26 PHP
PHP检测数据类型的几种方法(总结)
2017/03/04 PHP
php安装扩展mysqli的实现步骤及报错解决办法
2017/09/23 PHP
PHP反射原理与用法深入分析
2019/09/28 PHP
Extjs中使用extend(js继承) 的代码
2012/03/15 Javascript
js里怎么取select标签里的值并修改
2012/12/10 Javascript
JS测试显示屏分辨率以及屏幕尺寸的方法
2013/11/22 Javascript
解析JavaScript中delete操作符不能删除的对象
2013/12/03 Javascript
jQuery EasyUI datagrid实现本地分页的方法
2015/02/13 Javascript
javascript实现3D切换焦点图
2015/10/16 Javascript
浅析Node.js实现HTTP文件下载
2016/08/05 Javascript
javascript中异常处理案例(推荐)
2016/10/03 Javascript
简单实现JavaScript图片切换效果
2016/11/28 Javascript
Vue.js上传图片到阿里云OSS存储的方法示例
2018/12/13 Javascript
5分钟教你用nodeJS手写一个mock数据服务器的方法
2019/09/10 NodeJs
vue 全局环境切换问题
2019/10/27 Javascript
Vue实现点击当前元素以外的地方隐藏当前元素(实现思路)
2019/12/04 Javascript
js 获取本周、上周、本月、上月、本季度、上季度的开始结束日期
2020/02/01 Javascript
Python Sqlite3以字典形式返回查询结果的实现方法
2016/10/03 Python
Python Requests库基本用法示例
2018/08/20 Python
python实现在图片上画特定大小角度矩形框
2018/10/24 Python
python文件读写代码实例
2019/10/21 Python
详解HTML5中的标签
2015/06/19 HTML / CSS
使用HTML5 Canvas绘制直线或折线等线条的方法讲解
2016/03/14 HTML / CSS
阿联酋团购网站:Groupon阿联酋
2016/10/14 全球购物
英国在线药房:Chemist.co.uk
2019/03/26 全球购物
一道Delphi面试题
2016/10/28 面试题
查摆剖析材料范文
2014/09/30 职场文书
2015年度党员自我评价范文
2015/03/03 职场文书
2015年美容师个人工作总结
2015/10/14 职场文书