基于javascript实现数字英文验证码


Posted in Javascript onJanuary 25, 2017

本文实例为大家分享了js实现数字英文验证码的具体代码,供大家参考,具体内容如下

<html>
<head>
<style type="text/css">
.code{
background-image:url(111.jpg);
font-family:Arial,宋体;
font-style:italic;
color:green;
border:0;
padding:2px 3px;
letter-spacing:3px;
font-weight:bolder;
}
.unchanged {
border:0;
}
</style>
<script language="javascript" type="text/javascript">
var code ; //在全局 定义验证码
function createCode(){
code = new Array();
var codeLength = 4;//验证码的长度
var checkCode = document.getElementById("checkCode");
checkCode.value = "";

var selectChar = new Array(2,3,4,5,6,7,8,9,'A','B','C','D','E','F','G','H','J','K','L','M','N','P','Q','R','S','T','U','V','W','X','Y','Z');

for(var i=0;i<codeLength;i++) {
var charIndex = Math.floor(Math.random()*32);
code +=selectChar[charIndex];
}
if(code.length != codeLength){
createCode();
}
checkCode.value = code;
}

function validate () {
var inputCode = document.getElementById("input1").value.toUpperCase();

if(inputCode.length <=0) {
alert("请输入验证码!");
return false;
}
else if(inputCode != code ){
alert("验证码输入错误!");
createCode();
return false;
}
else {
alert("成功!");
return true;
}
}
</script>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312"></head>
<body onLoad="createCode();">

<input type="text" id="input1" />
<input type="button" id="checkCode" class="code" style="width:60px" onClick="createCode()" /> <a href="#" onClick="createCode()">看不清楚</a>
<input id="Button1" onClick="validate();" type="button" value="确定" />
<script></script>
</body>
</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JQuery 写的个性导航菜单
Dec 24 Javascript
ie下jquery.getJSON的缓存问题的处理方法
Mar 29 Javascript
javascript实现滑动解锁功能
Dec 31 Javascript
jQuery插件Tooltipster实现漂亮的工具提示
Apr 12 Javascript
AngularJS HTML DOM详解及示例代码
Aug 17 Javascript
jQuery.uploadify文件上传组件实例讲解
Sep 23 Javascript
JQuery Ajax WebService传递参数的简单实例
Nov 02 Javascript
Bootstrap CSS组件之导航(nav)
Dec 17 Javascript
layui表格实现代码
May 20 Javascript
利用Node.js检测端口是否被占用的方法
Dec 07 Javascript
微信小程序自定义组件实现环形进度条
Nov 17 Javascript
VUE解决 v-html不能触发点击事件的问题
Oct 28 Javascript
js阻止移动端页面滚动的两种方法
Jan 25 #Javascript
servlet+jquery实现文件上传进度条示例代码
Jan 25 #Javascript
json数据处理及数据绑定
Jan 25 #Javascript
详解jQuery中ajax.load()方法
Jan 25 #Javascript
js实现鼠标左右移动,图片也跟着移动效果
Jan 25 #Javascript
JavaScript 网页中实现一个计算当年还剩多少时间的倒数计时程序
Jan 25 #Javascript
js实现文字选中分享功能
Jan 25 #Javascript
You might like
php巧获服务器端信息
2006/12/06 PHP
destoon实现调用热门关键字的方法
2014/07/15 PHP
thinkphp区间查询、统计查询与SQL直接查询实例分析
2014/11/24 PHP
Yii学习总结之安装配置
2015/02/22 PHP
CI框架(ajax分页,全选,反选,不选,批量删除)完整代码详解
2016/11/01 PHP
PHP7引入的&quot;??&quot;和&quot;?:&quot;的区别讲解
2019/04/08 PHP
Laravel关系模型指定条件查询方法
2019/10/10 PHP
innerhtml用法 innertext用法 以及innerHTML与innertext的区别
2009/10/26 Javascript
JavaScript 设计模式之组合模式解析
2010/04/09 Javascript
用jquery实现自定义风格的滑动条实现代码
2011/04/26 Javascript
IE6/7/8/9不支持exec的简写方式
2011/05/25 Javascript
获取元素距离浏览器周边的位置的方法getBoundingClientRect
2013/04/17 Javascript
JS基于面向对象实现的拖拽库实例
2015/09/24 Javascript
Jquery和BigFileUpload实现大文件上传及进度条显示
2016/06/27 Javascript
jQuery实现页面滚动时智能浮动定位
2017/01/08 Javascript
关于angularJs清除浏览器缓存的方法
2017/11/28 Javascript
Vue下拉框回显并默认选中随机问题
2018/09/06 Javascript
详解vantUI框架在vue项目中的应用踩坑
2018/12/06 Javascript
Javascript 对象(object)合并操作实例分析
2019/07/30 Javascript
vue中使用element组件时事件想要传递其他参数的问题
2019/09/18 Javascript
小程序实现背景音乐播放和暂停
2020/06/19 Javascript
微信小程序实现聊天室
2020/08/21 Javascript
[03:57]《不朽》——2015DOTA2国际邀请赛—中国军团出征主题曲MV
2015/07/15 DOTA
Python多线程编程(一):threading模块综述
2015/04/05 Python
Python2.x版本中maketrans()方法的使用介绍
2015/05/19 Python
浅谈编码,解码,乱码的问题
2016/12/30 Python
Pytorch Tensor的统计属性实例讲解
2019/12/30 Python
利用python清除移动硬盘中的临时文件
2020/10/28 Python
CSS3实现复选框动画特效示例代码
2016/09/27 HTML / CSS
CSS3中媒体查询结合rem布局适配手机屏幕
2019/06/10 HTML / CSS
Linux如何压缩可执行文件
2013/10/21 面试题
共产党员公开承诺书范文
2014/03/28 职场文书
工作评语大全
2014/04/26 职场文书
医院义诊活动总结
2014/07/04 职场文书
2015年医院后勤工作总结
2015/05/20 职场文书
一小时迅速入门Mybatis之bind与多数据源支持 Java API
2021/09/15 Javascript