验证码的创建和使用

来源:互联网 发布:电信网速提速软件 编辑:程序博客网 时间: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" />

<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" />

<href="#" onclick="createCode2()">看不清,换一张图</a>

<input id="btn2" type="button" onClick='validate2()' value="登陆">

 

</body>

</html>

原创粉丝点击
热门问题 老师的惩罚 人脸识别 我在镇武司摸鱼那些年 重生之率土为王 我在大康的咸鱼生活 盘龙之生命进化 天生仙种 凡人之先天五行 春回大明朝 姑娘不必设防,我是瞎子 长沙宁乡人怎么办护照 北京护照过期了怎么办 去旅游怎么办加急护照 去越南没有护照怎么办 南京护照过期了怎么办 外国人护照快到期怎么办 卖方不配合过户怎么办 贷款的房子离婚怎么办 办房产证换名字怎么办 北京朝阳区房屋过户怎么办 在北京怎么办健康证 健康证无法下载怎么办 健康证下载不了怎么办 北京办理健康证怎么办 北京的健康证怎么办 健康证丢了怎么办 健康证吃宵夜怎么办 合肥办健康证怎么办 个人办理健康证怎么办 身份证丢失怎么办健康证 个人怎么办武汉健康证 山海关古御壹号怎么办房本? 车玻璃被炮烧了怎么办 奔驰钥匙没电怎么办 婚内买的车离婚怎么办 离心风机噪音大怎么办 匹凸匹被st五牛怎么办 考不进去中学怎么办 教师体检来例假怎么办 老板拖欠农民工工资怎么办 公司破产拖欠员工工资怎么办 白玉蜗牛下蛋了怎么办 黄牛卖不出的票怎么办 鸡受风寒不产蛋怎么办 蛋鸡感冒不下蛋怎么办 牛肉煮老了怎么办 牛肉炖碎了怎么办 比值审敛法等于1怎么办 华为手机停止运行怎么办 易事通卡怎么办延期 三星手机照相机故障怎么办