基于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操作web控件的自定义属性
Nov 25 Javascript
深入理解javascript构造函数和原型对象
Sep 23 Javascript
js鼠标点击图片实现随机变换图片的方法
Feb 16 Javascript
javascript正则表达式总结
Feb 29 Javascript
jQuery使用$.each遍历json数组的简单实现方法
Apr 18 Javascript
JavaScript输出所选择起始与结束日期的方法
Jul 12 Javascript
微信小程序实现拖拽 image 触摸事件监听的实例
Aug 17 Javascript
详解React-Native全球化多语言切换工具库react-native-i18n
Nov 03 Javascript
JS实现的对象去重功能示例
Jun 04 Javascript
jQuery实现图片切换效果
Oct 19 jQuery
Vue项目打包、合并及压缩优化网页响应速度
Jul 07 Vue.js
用JS创建一个录屏功能
Nov 11 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
ajax+php打造进度条 readyState各状态
2010/03/20 PHP
php实现以只读方式打开文件的方法
2015/03/16 PHP
PHP实现权限管理功能示例
2017/09/22 PHP
使用PHPStorm+XDebug搭建单步调试环境
2017/11/19 PHP
javascript编程起步(第三课)
2007/02/27 Javascript
JAVASCRIPT  THIS详解 面向对象
2009/03/25 Javascript
jquery 通过name快速取值示例
2014/01/24 Javascript
jQuery实现鼠标经过图片预览大图效果
2014/04/10 Javascript
javascript轻量级模板引擎juicer使用指南
2014/06/22 Javascript
jquery操作checkbox示例分享
2014/07/21 Javascript
手机端网页点击链接触发自动拨打或保存电话的示例代码
2014/08/15 Javascript
JavaScript数组常用方法
2015/03/02 Javascript
Bootstrap3.3.7导航栏下拉菜单鼠标滑过展开效果
2017/10/31 Javascript
详解vue-cli中模拟数据的两种方法
2018/07/03 Javascript
解决LayUI加上form.render()下拉框和单选以及复选框不出来的问题
2019/09/27 Javascript
[01:19:23]2018DOTA2亚洲邀请赛 4.5 淘汰赛 Mineski vs VG 第二场
2018/04/06 DOTA
Python设计模式编程中解释器模式的简单程序示例分享
2016/03/02 Python
Pyinstaller将py打包成exe的实例
2018/03/31 Python
python3利用venv配置虚拟环境及过程中的小问题小结
2018/08/01 Python
Pyinstaller打包.py生成.exe的方法和报错总结
2019/04/02 Python
python异步实现定时任务和周期任务的方法
2019/06/29 Python
Python实现计算对象的内存大小示例
2019/07/10 Python
Python 词典(Dict) 加载与保存示例
2019/12/06 Python
JAVA及PYTHON质数计算代码对比解析
2020/06/10 Python
Html5移动端获奖无缝滚动动画实现示例
2018/06/25 HTML / CSS
Claire’s法国:时尚配饰、美容、珠宝、头发
2021/01/16 全球购物
俄罗斯三星品牌商店:Samsungstore
2020/04/05 全球购物
初中化学教学反思
2014/01/23 职场文书
大学生个人自荐信
2014/02/24 职场文书
《梅兰芳学艺》教学反思
2014/02/24 职场文书
户籍证明书标准模板
2014/09/10 职场文书
党员干部形式主义个人整改措施
2014/09/17 职场文书
爱的教育读书笔记
2015/06/26 职场文书
禁毒主题班会教案
2015/08/14 职场文书
Python调用腾讯API实现人脸身份证比对功能
2022/04/04 Python
多线程Spring通过@Scheduled实现定时任务
2022/05/25 Java/Android