基于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 相关文章推荐
用YUI做了个标签浏览效果
Feb 20 Javascript
封装好的省市地区联动控件附下载
Aug 13 Javascript
tangram框架响应式加载图片方法
Nov 21 Javascript
简单的邮箱登陆的提示效果类似于yahoo邮箱
Feb 26 Javascript
jquery.validate使用时遇到的问题
May 25 Javascript
Javascript同时声明一连串(多个)变量的方法
Jan 23 Javascript
js 获取html5的data属性实现方法
Jul 28 Javascript
BetterScroll 在移动端滚动场景的应用
Sep 18 Javascript
jquery实现倒计时小应用
Sep 19 jQuery
axios post提交formdata的实例
Mar 16 Javascript
详解 微信小程序开发框架(MINA)
May 17 Javascript
vue路由结构可设一层方便动态添加路由操作
Aug 31 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从零开始打造自己的MVC框架之入口文件实现方法详解
2019/06/03 PHP
一个很简单的jquery+xml+ajax的无刷新树结构(无css,后台是c#)
2010/06/02 Javascript
使用jQuery+HttpHandler+xml模拟一个三级联动的例子
2011/08/09 Javascript
Javascript合并表格中具有相同内容单元格示例
2013/08/11 Javascript
Node.js入门教程:在windows和Linux上安装配置Node.js图文教程
2014/08/14 Javascript
优化Node.js Web应用运行速度的10个技巧
2014/09/03 Javascript
jQuery中用dom操作替代正则表达式
2014/12/29 Javascript
js实现的奥运倒计时时钟效果代码
2015/12/09 Javascript
Mongoose实现虚拟字段查询的方法详解
2017/08/15 Javascript
详解webpack-dev-server的简单使用
2018/04/02 Javascript
echarts实现地图定时切换散点与多图表级联联动详解
2018/08/07 Javascript
vue+canvas实现拼图小游戏
2020/09/18 Javascript
JS sort排序详细使用方法示例解析
2020/09/27 Javascript
vue实现简易计算器功能
2021/01/20 Vue.js
[02:33]2018 DOTA2亚洲邀请赛回顾视频 再次拾起那些美妙的时刻
2018/04/10 DOTA
[01:32:10]NAVI vs VG Supermajor 败者组 BO3 第一场 6.5
2018/06/06 DOTA
linux环境下安装pyramid和新建项目的步骤
2013/11/27 Python
python网络爬虫采集联想词示例
2014/02/11 Python
python修改list中所有元素类型的三种方法
2018/04/09 Python
解决python nohup linux 后台运行输出的问题
2018/05/11 Python
python网络爬虫 CrawlSpider使用详解
2019/09/27 Python
已安装tensorflow-gpu,但keras无法使用GPU加速的解决
2020/02/07 Python
Python日志:自定义输出字段 json格式输出方式
2020/04/27 Python
Python unittest单元测试框架实现参数化
2020/04/29 Python
你需要学会的8个Python列表技巧
2020/06/24 Python
Python 利用argparse模块实现脚本命令行参数解析
2020/12/28 Python
使用CSS3实现input多选框自定义样式的方法示例
2019/07/19 HTML / CSS
详解canvas.toDataURL()报错的解决方案全都在这了
2020/03/31 HTML / CSS
普通大学毕业生自荐信
2013/11/04 职场文书
大学学生会竞选演讲稿
2014/04/25 职场文书
安全保卫工作竞聘材料
2014/08/25 职场文书
酒会邀请函
2015/01/31 职场文书
董事长秘书工作总结
2015/08/14 职场文书
初中生入团申请书范文(五篇)
2019/10/16 职场文书
详解Django中 render() 函数的使用方法
2021/04/22 Python
Redis Stream类型的使用详解
2021/11/11 Redis