基于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实现 注册时选择阅读条款 左右移动
Apr 11 Javascript
javascript模拟实现C# String.format函数功能代码
Nov 25 Javascript
jquery原创弹出层折叠效果点击折叠弹出一个层
Mar 12 Javascript
50 个 jQuery 插件可将你的网站带到另外一个高度
Apr 26 Javascript
JavaScript检测原始值、引用值、属性
Jun 20 Javascript
基于Two.js实现星球环绕动画效果的示例
Nov 06 Javascript
node.js支持多用户web终端实现及安全方案
Nov 29 Javascript
bootstrap 路径导航 分页 进度条的实例代码
Aug 06 Javascript
js实现div色块拖动录制
Jan 16 Javascript
JavaScript实现动态留言板
Mar 16 Javascript
JavaScript布尔运算符原理使用解析
May 06 Javascript
Vue组件更新数据v-model不生效的解决
Apr 02 Vue.js
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
一个可以找出源代码中所有中文的工具
2006/10/25 PHP
PHP 前加at符合@的作用解析
2015/07/31 PHP
Zend Framework教程之资源(Resources)用法实例详解
2016/03/14 PHP
php cookie 详解使用实例
2016/11/03 PHP
PHP封装的简单连接MongoDB类示例
2019/02/13 PHP
基于laravel缓冲cache的用法详解
2019/10/23 PHP
jQuery 在光标定位的地方插入文字的插件
2012/05/10 Javascript
解析js原生方法创建表格效率测试
2013/07/08 Javascript
javascript:FF/Chrome与IE动态加载元素的区别说明
2014/01/26 Javascript
js调试工具console.log()方法查看js代码的执行情况
2014/08/08 Javascript
Javascript必知必会(四)js类型转换
2016/06/08 Javascript
jQuery查找和过滤_动力节点节点Java学院整理
2017/07/04 jQuery
Vue响应式原理深入解析及注意事项
2017/12/11 Javascript
Angular17之Angular自定义指令详解
2018/01/21 Javascript
JS实现星星海特效
2019/12/24 Javascript
Python修改MP3文件的方法
2015/06/15 Python
一行代码让 Python 的运行速度提高100倍
2018/10/08 Python
python使用for循环计算0-100的整数的和方法
2019/02/01 Python
Python3 修改默认环境的方法
2019/02/16 Python
Python3多线程版TCP端口扫描器
2019/08/31 Python
Python-jenkins模块之folder相关操作介绍
2020/05/12 Python
python3.6.8 + pycharm + PyQt5 环境搭建的图文教程
2020/06/11 Python
Jupyter Notebook 安装配置与使用详解
2021/01/06 Python
你正在寻找的CSS3 动画技术
2011/07/27 HTML / CSS
HTML5新标签兼容——&gt; 的两种方法
2018/09/12 HTML / CSS
应届毕业生个人求职信范文
2014/01/29 职场文书
贯彻学习两会心得体会范文
2014/03/17 职场文书
不忘国耻振兴中华演讲稿
2014/05/14 职场文书
我的中国梦演讲稿600字
2014/08/19 职场文书
寝室长工作失责检讨书
2014/10/06 职场文书
出纳工作检讨书范文
2014/12/27 职场文书
鼋头渚导游词
2015/02/05 职场文书
黄河绝恋观后感
2015/06/08 职场文书
开学第一周值周总结
2015/07/16 职场文书
信息技术远程培训心得体会
2016/01/09 职场文书
Python的property属性详细讲解
2022/04/11 Python