<!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. Orchard Core 自定义权限配置

    在我们为Orchard Core配置了一个新的Module之后,我们要考虑的是谁可以访问这个Module,那么这里就涉及到了一个权限的配置.如下图,添加了自定义的权限: Orchard Core源码: ...

  2. caz,数字证书，公钥

    如何有效检查证书有效性? https://www.jianshu.com/p/f4a37da10c53 自签名的https证书是不安全的 https://www.cnblogs.com/liyy201 ...

  3. mysql创建计算列（5.7以后才有）

    mysql创建计算列   mysql> create table t(id int auto_increment not null,c1 int,c2 int,c3 int as (c1+c2) ...

  4. SQL SERVER 基于数据库镜像的主从同步(数据库镜像实践汇总)

    SQL SERVER 基于数据库镜像的主从同步 Author:chaoqun.guo    createtime:2019-03-26 目录 SQL SERVER 基于数据库镜像的主从同步... 1 ...

  5. 用composer安装laravel-bjyblog

    前面讲了两行命令composer的安装,现在我们来操作一下composer安装基于laravel的博客laravel-bjyblog.测试环境是linux,bt面板,php7.2安装扩展fileinf ...

  6. 使用 HTMLTestRunner 模块生成HTML格式的测试报告文件

    1.下载HTMLTestRunner.py HTMLTestRunner 是 Python 标准库的 unittest 模块的一个扩展.它生成易于使用的 HTML 测试报告.HTMLTestRunne ...

  7. Mac charles 抓取https请求，安装证书后还是显示unknown

    https://blog.csdn.net/qq_23114525/article/details/81460840 1. 配置证书 2. 设置钥匙串信任 3. 设置手机代理 端口号需要对应设置的端口 ...

  8. composer install 遭遇404错误

    [Composer\Downloader\TransportException] The "https://packagist.phpcomposer.com/p/provider-2019 ...

  9. centos 下python升级

    https://www.cnblogs.com/leon-zyl/p/8422699.html

  10. MSSqlServer 发布/订阅配置（主从同步）

    背景: 1.单个独立数据库的吞吐量是有瓶颈的,那么如何解决这个瓶颈? 2.服务器直接数据如何复制.并具备一致性.可扩展性? 资源: 官方资源:https://technet.microsoft.com ...