<!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. Mybatis批量insert 返回主键值和foreach标签详解

    Mybatis批量insert 返回主键 Mybatis从3.3.1版本开始,支持批量插入后返回主键ID.首先对于支持自增主键的数据库使用useGenerateKeys和keyProperty,对于不 ...

  2. caffe matlab接口编译遇到的问题记录

    今天编译的过程中遇到的问题以及查阅到的资料,记录在这里,希望可以帮到其他人. BVLC的caffe源码,如果要编译matlab的接口时,首先需要将makefile.config文件中的matlab的安 ...

  3. sed命令 windows与linux换行

    Linux的Bash命令中有一个sed操作,SSD的create_list.sh中有用到这个操作: 结合着下面这个解释: 也就是删除所有行里面的以VOC2007/Annotations/(这里的\代表 ...

  4. Spring 注解 @Scheduled(cron = "0 0/10 * * * ? ") 动态改变时间

    import java.util.Date; import java.util.concurrent.Executor; import java.util.concurrent.Executors; ...

  5. Centos安装elasticsearch教程

    elasticsearch安装是ytkah在做laravel电商站内搜索要实现的,通过自己的搜索和学习能力不算很费力解决了.下面就整理一下安装elasticsearch教程,服务器是Centos 7, ...

  6. MySQL表操作及数据操作

    表操作 表相当于一个文件,其形式与现实中的表格相同.表中的每条记录都有相应的字段,字段就类似于表格的表头. 表操作详细: #对表进行操作(文件) #首先要切换到指定库(即文件夹)下:use db1; ...

  7. SUDO安全委派和安全模块

    sudo更换身份 su  切换身份   使用su 切换身份必须首先直到被切换成用户的密码   如: su root  就必须要知道root的密码 这种机制安全性不高,容易泄露管理员密码 1. sudo ...

  8. nodejs, vue, webpack 项目实践

    vue 及 webpack,均不需要与nodejs一期使用,他们都可以单独使用到任何语言的框架中. http://jiongks.name/blog/just-vue/ https://cn.vuej ...

  9. Python 全栈开发一 python初识

    1.Python简介 python的创始人为吉多·范罗苏姆(Guido van Rossum).1989年的圣诞节期间,吉多·范罗苏姆为了在阿姆斯特丹打发时间,决心开发一个新的脚本解释程序,作为ABC ...

  10. SQL简单操作

    删除表数据,保留表结构: delete from employee 将删除所有的记录 delete from employee where lastname = 'May' 这条语句是从emplyee ...