<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>js验证码</title>
<style type="text/css">
.code
{
background:url(code_bg.jpg);
font-family:Arial;
font-style:italic;
color:blue;
font-size:16px;
border:0;
padding:2px 3px;
letter-spacing:3px;
font-weight:bolder;
float:left;
cursor:pointer;
width:150px;
text-align:center;
vertical-align:middle;
}
a
{
text-decoration:none;
font-size:12px;
color:#288bc4;
}
a:hover
{
text-decoration:underline;
}
</style>
<script type="text/javascript">
var code;
function createCode()
{
code = "";
 
var codeLength = 4;  //验证码的长度
var checkCode = document.getElementById("checkCode");
var codeChars = new Array(0, 1, 2, 3, 4, 5, 6, 7, 8, 9,
'a','b','c','d','e','f','g','h','i','j','k','l','m','n','o','p','q','r','s','t','u','v','w','x','y','z',
'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'); //所有候选组成验证码的字符，当然也可以用中文的
for(var i = 0; i < codeLength; i++)
{
var charNum = Math.floor(Math.random() * 52);
code += codeChars[charNum];
}
if(checkCode)
{
checkCode.className = "code";
checkCode.innerHTML = code;
}
}
function validateCode()
{
var inputCode=document.getElementById("inputCode").value;
if(inputCode.length <= 0)
{
alert("请输入验证码！");
}
else if(inputCode.toUpperCase() != code.toUpperCase())
{
alert("验证码输入有误！");
createCode();
}
else
{
alert("验证码正确！");
}
}
</script>
</head>
<body onload="createCode()">
<form id="form1" runat="server" onsubmit="validateCode()">
<div>
<table border="0" cellspacing="5" cellpadding="5" >
<tr>
<td></td>
<td><div class="code" id="checkCode" onclick="createCode()" style="border:1px solid #ccc; height:30px;line-height:30px;" ></div></td>
<td><a href="#" onclick="createCode()">看不清换一张</a></td>
</tr>
<tr>
<td>验证码：</td>
<td><input style="float:left;" type="text" id="inputCode" /></td>
<td>请输入验证码</td>
</tr>
<tr>
<td></td>
<td><input id="Button1" onclick="validateCode();" type="button" value="确定" /></td>
<td></td>
</tr>
</table>
</div>
</form>

</body>
</html>

使用js实现登录随机验证码的效果的更多相关文章

  1. Django之路 - 实现登录随机验证码

    登录验证码是每个网站登录时的基本标配,网上也有很多相应的文章, 但是从生成验证码到 应用到自己的网站上的全步骤,并没有看到很多, 为了节约大家的时间,我把整体步骤写下来, 即拿即用哈 1. 生成随机验 ...

  2. Django之实现登录随机验证码

    登录验证码是每个网站登录时的基本标配,网上也有很多相应的文章, 但是从生成验证码到 应用到自己的网站上的全步骤,并没有看到很多, 为了节约大家的时间,我把整体步骤写下来, 即拿即用哈 1. 生成随机验 ...

  3. C#系统登录随机验证码生成及其调用方法

    话不多说,直接上代码 public ValidateCode() { } /// <summary> /// 验证码的最大长度 /// </summary> public in ...

  4. Django框架登录验证及产生随机验证码的实例

    1:views视图代码 # 登录验证 def login(request): # 使用ajax请求可以使用判断 # if request.is_ajax(): if request.method == ...

  5. js弹窗登录效果(源码)--web前端

    1.JS弹窗登录效果 <!DOCTYPE html><html lang="en"><head> <meta charset=" ...

  6. js用正则表达式验证用户和密码的安全性，生成随机验证码

    制作了一个表单,表单验证用户.密码.随机验证码 html页面

  7. js随机验证码

    随机验证码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <ti ...

  8. js验证登录注册

    js验证登录注册的优势,在前台直接验证,不需要在后台读取返回数据验证,减轻服务器压力. 登陆验证得必要性,拦截恶意脚本的登录注册攻击.哈哈,当然有些高手是可以直接跳过js验证的. 所以还是后台验证,并 ...

  9. python笔记-20 django进阶 （model与form、modelform对比，三种ajax方式的对比，随机验证码，kindeditor）

    一.model深入 1.model的功能 1.1 创建数据库表 1.2 操作数据库表 1.3 数据库的增删改查操作 2.创建数据库表的单表操作 2.1 定义表对象 class xxx(models.M ...

随机推荐

  1. rem设置

    html{ font-size:10vw; }

  2. 给予Java初学者的学习路线建议

    va学习这一部分其实也算是今天的重点,这一部分用来回答很多群里的朋友所问过的问题,那就是你是如何学习Java的,能不能给点建议?今天我是打算来点干货,因此咱们就不说一些学习方法和技巧了,直接来谈每个阶 ...

  3. springMVC(二)： @RequestBody @ResponseBody 注解实现分析

    一.继承结构 @RequestBody.@ResponseBody的处理器:RequestResponseBodyMethodProcessor @ModelAttribute处理器: ModelAt ...

  4. 【剑指offer】复杂链表的复制

    一.题目: 输入一个复杂链表(每个节点中有节点值,以及两个指针,一个指向下一个节点,另一个特殊指针指向任意一个节点),返回结果为复制后复杂链表的head.(注意,输出结果中请不要返回参数中的节点引用, ...

  5. 我的DIY作品

    工欲善其事必先利其器~呵呵~我自己体会从无到有的乐趣~0~ 从Visio到CAD再到Autodesk,你妹的~只有自己才懂~哎~感谢兄弟朋友们的支持! Visio图: CAD图: Autodesk图:

  6. Koala ===》编译工具 ==》Less和Sass

    官网下载网址:http://koala-app.com/index-zh.html 安装时:必须装在c盘,否则会编译报错,切记要装在c盘使用,把整体目录拖动到软件中,执行编译(success)即可 整 ...

  7. background-size的兼容性

    做响应式布局的时候,如果有背景图,我们当然希望他能够全屏100%显示,这样显得页面非常的爆满,不过这又出现了一个问题,图片的尺寸多大合适呢,现在的浏览器分辨率参差不齐,对于Firefox等高级的浏览器 ...

  8. 产品设计教程：如何理解 px,dp,dpi, pt，看这一篇就够了

    先聊聊熟悉的几个单位 围绕着各种屏幕做设计和开发的人会碰到下面几个单位:in, pt, px, dpi,dip/dp, sp 下面先简单回顾下前四个单位: “in” inches的缩写,英寸.就是屏幕 ...

  9. test4

  10. Mac为python2.7.10安装pip

    首先下载get-pip.py https://bootstrap.pypa.io/get-pip.py alias python="/usr/bin/python2.7" pyth ...