<!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. 20165225《Java程序设计》第七周学习总结

    20165225<Java程序设计>第七周学习总结 1.视频与课本中的学习: - 第十一章学习总结 MySQL数据库管理系统,简称MySQL,是世界上最流行的开源数据库管理系统,其社区版( ...

  2. linux之用户和用户组

    什么用户组? 具有某种共同特征的用户集合起来.用户组(Group)配置文件主要有 /etc/group和/etc/gshadow,其中/etc/gshadow是/etc/group的加密信息文件. 注 ...

  3. sqlite数据导入mysql

    sqlite导出数据 1.首先将sqlite数据库中的数据库格式由db或者db3等转为.sql格式,方法如下: 首先是不修改路径的情况下,在命令行下(方法一): sqlite3 database_na ...

  4. div总在页面最顶端

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx. ...

  5. centos mysql 实战 第一节课 安全加固 mysql安装

    centos mysql  实战  第一节课   安全加固  mysql安装 percona名字的由来=consultation 顾问+performance 性能=per  con  a mysql ...

  6. Windows server 2016 支持容器 ,安装docker 搭建Ubuntu+hadoop （docker为服务器）

    一.Windows server 2016 是肯定要安装的, 关于如何启动容器功能那就是控制面板中增加与删除里面的启用了,很多地方可以百度到 二. 安装Ubuntu hadoop 等  待续 注意: ...

  7. ABAP 创建function model 返回参数为内表类型

    1:通过T-CODE  se11  创建一个structure   ZSTRU2. 2:   创建一个table type, 表名 ZTAB1. 3: 表的row type 选择 ZSTRU2 4: ...

  8. HTTP协议和WEB框架

    一.HTTP协议 <<HTTP权威指南>>读书笔记:https://www.cnblogs.com/qcssmd/p/5508150.html 一.HTTP简介 HTTP协议是 ...

  9. [Leetcode] Template to rotate matrix

    Rotate the image by 90 degrees (clockwise). Given input matrix = [ [1,2,3,4], [5,6,7,8], [9,10,11,12 ...

  10. Struts2漏洞利用工具下载(更新2017-V1.8版增加S2-045/S2-046)

    Struts2漏洞利用工具下载(已更新V1.8版) 2017-03-21:增加S2-046,官方发布S2-046和S2-045漏洞引发原因一样,只是利用漏洞的位置发生了变化,S2-046方式可能绕过部 ...