验证码的创建和使用
来源:互联网 发布:电信网速提速软件 编辑:程序博客网 时间:2024/05/16 15:03
1. 创建新的js,css
(1) 创建validate.js
var code; //在全局 定义验证码
//大小写敏感
//1.生成一个新的验证码
function createCode(){
code = "";
var codeLength = 4;//验证码的长度
var checkCode = document.getElementById("checkCode");
//设置一个62位长的数组
var selectChar = 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++) {
//Math.floor(Math.random( ) * (n+1));取出0~1之间的随机数*最大值加1(即数组的大小),floor()去除小数点后的数字。
var charIndex = Math.floor(Math.random() * 62);
code += selectChar[charIndex];
}
if (checkCode) {
checkCode.className = "code";
checkCode.value = code;
}
}
//2.判断输入的验证码是否正确
function validate(){
var temp = document.getElementById("inputCode").value;
if (temp.length <= 0) {
alert("请输入验证码!");
return false;
}
else
if (temp != code) {//验证输入的是否等于全局 验证码
alert("验证码输入错误!");
document.getElementById("inputCode").value = "";
createCode();//刷新验证码
return false;
}
else {
alert('恭喜!输入正确,请等待跳转');
document.getElementById("inputCode").value = "";
createCode();//刷新验证码
return true;
}
}
var codes; //在全局 定义验证码
//大小写不敏感
//1.生成一个新的验证码
function createCode2(){
codes = "";
var codeLength = 4;//验证码的长度
var checkCode = document.getElementById("checkCode2");
//设置一个62位长的数组
var selectChar = 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++) {
//Math.floor(Math.random( ) * (n+1));取出0~1之间的随机数*最大值加1(即数组的大小),floor()去除小数点后的数字。
var charIndex = Math.floor(Math.random() * 62);
codes += selectChar[charIndex];
}
if (checkCode) {
checkCode.className = "code";
checkCode.value = codes;
}
}
//2.判断输入的验证码是否正确
function validate2(){
var inputCode = document.getElementById("inputCode2").value;
var temp = inputCode.toUpperCase();//转换成大写字母
var codess = codes.toUpperCase();
if (temp.length <= 0) {
alert("请输入验证码!");
return false;
}
else
if (temp != codess) {//验证输入的是否等于全局 验证码
alert("验证码输入错误!");
document.getElementById("inputCode2").value = "";
createCode2();//刷新验证码
return false;
}
else {
alert('恭喜!输入正确,请等待跳转');
document.getElementById("inputCode2").value = "";
createCode2();//刷新验证码
return true;
}
}
//登录时产生
function load(){
createCode();
createCode2();
}
window.onload = load;
(2) 创建validate.css
.code {
background-image: url(code.jpg);
font-family: Arial;
font-style: italic;
color: Red;
border: 1px solid #1f44ba;
padding: 2px 3px;
letter-spacing: 3px;
font-weight: bolder;
background-image: url(downpage.jpg);
}
.unchanged {
border: 0;
width:80px;
}
2. 验证码使用
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>验证码</title>
<!-- 必须导入 -->
<link rel="stylesheet" type="text/css" href="validate.css">
<script type="text/javascript" src="validate.js"></script>
<!-- 到此 -->
</head>
<body>
<h1>
大小写敏感
</h1>
验证码:
<!-- 如果是type="text",那么type可以省略,默认是text(文本框)类型 -->
<input id="inputCode" type="text" />
<!-- readonly="readonly"控件只读 -->
<input id="checkCode" type="text" class="unchanged"
readonly="readonly" />
<a href="#" onclick="createCode()">看不清,换一张图</a>
<input id="btn" type="button" onClick='validate()' value="登陆">
<h1>
大小写不敏感
</h1>
验证码:
<!-- 如果是type="text",那么type可以省略,默认是text(文本框)类型 -->
<input id="inputCode2" name="validate" type="text" />
<!-- readonly="readonly"控件只读 -->
<input id="checkCode2" name="validate2" type="text" class="unchanged"
readonly="readonly" />
<a href="#" onclick="createCode2()">看不清,换一张图</a>
<input id="btn2" type="button" onClick='validate2()' value="登陆">
</body>
</html>
- 验证码的创建和使用
- 使用 PHP 5.5 创建和验证哈希最简单的方法
- yii 验证码的使用和验证过程
- 使用Kaptcha进行验证码的生成和验证
- yii 使用cactiveform 创建表单时候遇到的一些验证问题和使用ajax_form时重置验证规则的解决办法
- 验证码的制作和使用(ASP)
- 验证码的制作和使用(ASP)
- 验证码的生成和使用
- 验证码的生成和使用
- php验证码的封装和使用
- JAVA工具类(15)----验证码工具类的创建、配置、使用及后台验证
- 创建servlet的验证码
- 使用Servlet创建验证码图片
- 验证码的使用
- 验证码的使用
- 验证码的使用
- 验证码的使用
- 验证码的使用
- fedora11升级笔记之yum update错误
- 幸运
- android JNI(1)- gelf_update_phdr(): invalid data
- 引用他人的 DIV+CSS IE6 IE7 兼容问题
- 全国民办普通高校名单
- 验证码的创建和使用
- Ubuntu下Java环境的构建
- Head First JavaScript(中文版44---48)
- 程序过程中的写代码之思考
- 曾经整理的一个php操作mysql类
- C++ Boost Assign 文档(翻译)
- 职业经理人
- 从《我的兄弟叫顺溜》看技术人才的职业规划
- 像树一样的成长