基于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 相关文章推荐
JavaScript实现点击按钮后变灰避免多次重复提交
Jul 15 Javascript
Array栈方法和队列方法的特点说明
Jan 24 Javascript
JavaScript对IE操作的经典代码(推荐)
Mar 10 Javascript
jquery实现图片上传之前预览的方法
Jul 11 Javascript
jQuery基于cookie实现的购物车实例分析
Dec 24 Javascript
jQuery each函数源码分析
May 25 Javascript
Jquery实现遮罩层的简单实例(就是弹出DIV周围都灰色不能操作)
Jul 14 Javascript
javascript中href和replace的比较(详解)
Nov 25 Javascript
浅谈jQuery hover(over, out)事件函数
Dec 03 Javascript
js用类封装pop弹窗组件
Oct 08 Javascript
解决vue props 拿不到值的问题
Sep 11 Javascript
微信小程序select下拉框实现效果
May 15 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
深入理解:XML与对象的序列化与反序列化
2013/06/08 PHP
php处理静态页面:页面设置缓存时间实例
2017/06/22 PHP
php 算法之实现相对路径的实例
2017/10/17 PHP
小试JQuery的AutoComplete插件
2011/05/04 Javascript
JavaScript实现表格排序方法
2013/06/14 Javascript
用js代码和插件实现wordpress雪花飘落效果的四种方法
2014/12/15 Javascript
jQuery的事件委托实例分析
2015/07/15 Javascript
JS提交form表单实例分析
2015/12/10 Javascript
一个字符串中出现次数最多的字符 统计这个次数【实现代码】
2016/04/29 Javascript
JavaScript数组的栈方法与队列方法详解
2016/05/26 Javascript
jQuery实现右下角可缩放大小的层完整实例
2016/06/20 Javascript
JS查找字符串中出现次数最多的字符
2016/09/05 Javascript
DOM 事件的深入浅出(一)
2016/12/05 Javascript
js使用Replace结合正则替换重复出现的字符串功能示例
2016/12/27 Javascript
仿vue-cli搭建属于自己的脚手架的方法步骤
2019/04/17 Javascript
Python的装饰器模式与面向切面编程详解
2015/06/21 Python
Python简单操作sqlite3的方法示例
2017/03/22 Python
详解python Todo清单实战
2018/11/01 Python
Python3 修改默认环境的方法
2019/02/16 Python
使用python实现kNN分类算法
2019/10/16 Python
pytorch:实现简单的GAN示例(MNIST数据集)
2020/01/10 Python
使用Pycharm分段执行代码
2020/04/15 Python
使用Python画了一棵圣诞树的实例代码
2020/11/27 Python
html5是什么_动力节点Java学院整理
2017/07/07 HTML / CSS
Jacadi Paris美国官方网站:法国童装品牌
2017/10/15 全球购物
一些Unix笔试题和面试题
2012/09/25 面试题
Java文件和目录(IO)操作
2014/08/26 面试题
初三物理教学反思
2014/01/21 职场文书
幼儿园园长新年寄语2015
2014/12/08 职场文书
2015年客服工作总结范文
2015/04/02 职场文书
银行大堂经理培训心得体会
2016/01/09 职场文书
学习型家庭事迹材料(2016精选版)
2016/02/29 职场文书
个人销售励志奋斗口号
2019/12/05 职场文书
详解盒子端CSS动画性能提升
2021/05/24 HTML / CSS
Keras在mnist上的CNN实践,并且自定义loss函数曲线图操作
2021/05/25 Python
云服务器部署 Web 项目的实现步骤
2022/06/28 Servers