JS功能来实现登陆验证码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
#checkHR {
float:left;

}
#checkCode {
float:left;
width:90px;
height:15px;
padding: 0px 10px;
color:red;
font-size:16px;
font-family:Arial;
font-style:italic;
color:Red;
border:0;
padding:2px 3px;
letter-spacing:3px;
font-weight:bolder;
}
.refresh {
font-size: 14px;
color: red;
}
.text {
font-size: 16px;
color: #F00;
}
</style>
<script language="javascript" type="application/javascript">
var code="" ; //在全局 定义验证码
function createCode(){
code = "";
var codeLength = 6;//验证码的长度
var checkCode = document.getElementById("checkCode");
checkCode.value = "";
var selectChar = new Array(0,1,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();
}
document.getElementById("checkCode").innerHTML = code;
}

function validate () {
var inputCode = document.getElementById("checkNum").value.toUpperCase();

if(inputCode.length <=0) {
alert("请输入验证码!");
return false;
}
else if(inputCode != code ){
alert("验证码输入错误!");
createCode();
return false;
}
else {
alert("验证码通过!");
return true;
}

}
</script>
</head>

<body bgcolor="#33CCFF">
<table width="521" height="37" align="center">
<tr>
<td width="291"><div id="checkHR"><span class="text">请输入验证码:</span>
<input type="text" value="" id="checkNum" style="height:15px;"/></div></td>
<td width="101"><a href="javascript:void(0);"><div id="checkCode" onclick="createCode()";></div></a></td>
<td width="104"><input type="button" class="btnCheck" id="gotoCheck" value="验证" onclick="validate();" style="width:50px; height:25px; color:#39F;"/></td>
</tr>
</table>

</body>
</html>

时间: 2024-10-12 11:29:42

JS功能来实现登陆验证码的相关文章

java登陆验证码与JS无刷新验证

最近公司的项目的登陆模块由我负责,所以就做了个登陆小功能进行练手,其包括了用jQuery对用户名和密码进行不为null验证,和出于安全性考虑加了一个验证码的校验 别的不说先上代码 controller层 CreateImage.java package com.controller; import java.awt.Color; import java.awt.Font; import java.awt.Graphics; import java.awt.image.BufferedImage;

登陆验证码的实现

因为没怎么做网页端的功能,一直不知道登陆验证码是怎么实现的,这次学习梳理一下: 1. web 端展示的是图片,有后台服务(如sevlet返回一个图片) 2. 每次展示/刷新图片,请求一次服务端,web端生成一个唯一ID传到服务端,服务端保存该唯一ID与生成的验证码的对应关系,并返回图片 3. 登陆请求参数包含用户名和密码,唯一ID和用户录入的验证码 4. 登陆后台服务要验证用户录入的验证码与根据唯一ID找到的服务端缓存的验证码是否一致,如果不一致则报错.如果一致,在继续校验用户名和密码是否正确

phpcms v9后台登陆验证码无法显示,怎么取消验证码

phpcms v9后台登陆验证码无法显示论坛里关于这个问题貌似一直没有解决,查看源代码后发现,关键一点是获取验证码的图片与全局变量SITE_URL相关,也就是网站的目录, 所以只要修改cache/configs/system.php文件中的网站路径变量 ‘web_path’ 即可. 举例说明(本地域名http://localhost) 如果所有的文件都在根目录下(例如apache下的htdocs),此时,默认访问地址应该是http://localhost/,则‘web_path’=>'/',若网

系列博文-Three.js入门指南(张雯莉)-静态demo和three.js功能概览

一:一个最简单的静态DEMO //body加载完后触发init() //WebGL的渲染是需要HTML5 Canvas元素的,你可以手动在HTML的<body>部分中定义Canvas元素,或者让Three.js帮你生成.这两种选择一般没有多大差别,我们在此手动在HTML中定义: <body > <canvas id="mainCanvas" width="400px" height="300px" ></

转载-js按回车键实现登陆-myself

$(document).ready(function(){ document.onkeydown = function (event){  if (event.keyCode==13) //回车键的键值为13  submit(); };}); function submit(){ var password = $("#password").val(); $("#password").val(password); document.forms[0].submit();

js依赖mui.css生成图片验证码

js依赖mui.css生成图片验证码 相关css和js引入路径 https://cdnjs.cloudflare.com/ajax/libs/mui/3.7.1/css/mui.css https://cdnjs.cloudflare.com/ajax/libs/mui/3.7.1/css/mui.min.css https://cdnjs.cloudflare.com/ajax/libs/mui/3.7.1/fonts/mui.ttf https://cdnjs.cloudflare.com/

基于JS实现发送短信验证码后的倒计时功能(无视页面刷新,页面关闭不进行倒计时功能)

<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="Generator" content="EditPlus?"> <meta name="Author" content=""> <meta name="

js实现发送短信验证码后的倒计时功能(无视页面刷新)

[1].[代码] 这是页面上的发送验证码按钮 跳至 [1] [2] [3]<input id="second" type="button" value="免费获取验证码" />[2].[代码] js对cookie的操作 跳至 [1] [2] [3] //发送验证码时添加cookiefunction addCookie(name,value,expiresHours){ var cookieString=name+"=&quo

用struts2做一个带有图片效果的登陆验证码

我们在登陆网站的时候总是会有带有图片验证功能的验证码,它是怎么做出来的了,今天我就详细的将每一步步骤写出来. 1.在action层 1 package cn.itcast.javaee.js.checkcode; 2 3 import java.io.PrintWriter; 4 import javax.servlet.http.HttpServletResponse; 5 import org.apache.struts2.ServletActionContext; 6 import com