验证码的创建和使用

最新推荐文章于 2019-02-14 15:15:00 发布
最新推荐文章于 2019-02-14 15:15:00 发布
阅读量360 收藏
点赞数
分类专栏： Java 文章标签： stylesheet button class border import url
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yangyu16ashen/article/details/4306762
版权

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>

yangyu16ashen
关注
专栏目录
各种网络服务器的简单搭建
05-05
详细讲解各种网络服务器的简单搭建。
搭建入门网络验证码（注册码）教程
zhineng007的博客
11-10 1775
百宝云入门级脚本试用系统 　　1.操作步骤介绍： 　　A.脚本（试用启动脚本）： 　　登录界面 　　到期检测线程 　　B.百宝云（验证试用合法性）： 　　判断登录信息的合法性 　　记录脚本的启动时间、运行时间 　　默认接口（_get)的处理★ 　　2.系统预计完成时间 入门级学院（基本熟悉百宝云开发）预估在2小时内完成A，2小时内完成B 　　中级学员（熟悉开发工具，做过一些脚
搭建亿万级别短信服务发送平台
aikudemn的博客
07-03 7571
原文链接 摘要： 阿里云的小伙伴们，走过路过，千万不要错过。之所以起这么唬人的标题，其实就是想让路过的您点一下，顺便关注一下博主。当然你也可以默默地顶完文章然后转身就走人，但是动作一定要快，姿势必须要帅，深藏功名尘与土。 写在开始 阿里云的小伙伴们，走过路过，千万不要错过。之所以起这么唬人的标题，其实就是想让路过的您点一下，顺便关注一下博主。当然你也可以默默地顶完文章然后
四、自动化平台搭建-Django-如何做验证码
bangluan7686的博客
02-14 109
前提：安装包 pip install pillow==3.4.1 1、打开booktest/views.py，创建视图verify_code。 from PIL import Image, ImageDraw, ImageFont from django.utils.six import BytesIO ... def verify_code(request): ...
python自动创建字符验证码，python创建验证码
07-14
python自动创建字符验证码，python创建验证码！ python自动创建字符验证码，python创建验证码！ python自动创建字符验证码，python创建验证码！ python自动创建字符验证码，python创建验证码 ！python自动创建字符...
C#验证码的创建与使用示例
01-20
本文实例讲述了C#验证码的创建与使用方法。分享给大家供大家参考，具体如下： 1、C#创建验证码 ① 创建获取验证码页面（ValidateCode.aspx） <html xmlns=http://www.w3.org/1999/xhtml> <head runat=...
yii实现创建验证码实例解析
10-25
Yii框架实现验证码创建实例解析涉及的知识点包括Yii框架的基础结构、如何在Yii中集成和配置验证码功能，以及在前端视图中展示和处理验证码。 1. Yii框架基础结构：Yii是一个高性能的现代PHP框架，用于开发Web应用。...
php中使用GD库做验证码
10-22
以下是如何使用PHP和GD库创建验证码的步骤： 1. **初始化参数**： 在代码中，我们首先定义了一些参数，例如验证码的类型（纯数字、字母或字母数字混合）、长度、干扰像素密度和干扰线条数量。这些参数可以根据实际...
java创建验证码工具方法
11-02
java创建验证码工具方法，简单几行代码就搞定 hahahah....
搭建中级注册码（网络验证码）系统教程
zhineng007的博客
11-12 655
以下是我总结的百宝云中级注册码教程，都是纯原创，自己的经验总结！        1.操作步骤介绍： 　　A.脚本（试用启动、注册码启动）： 　　登录界面 　　到期检测线程 　　B.百宝云（验证试用与注册码启动，解绑、冻结、解冻、删除注册码）： 　　判断登录信息的合法性 　　记录脚本的启动时间、运行时间 　　默认接口（_get)的处理★ 　　数据库的基本操作★ 　　数组的运用★
Extjs+Struts+simpleCaptcha+jsp:搭建你的验证码平台
Kaiwii的专栏
10-22 3879
步骤一： 在servlet容器中部署一个SimpleCaptchaServlet 1、编写一个名为SimpleCaptchaServlet的HttpServlet子类： import java.io.IOException; //from kaiwii's blog import javax.servlet.ServletException; import javax.serv
weixin123在线订餐系统的设计与实现+springboot.rar
09-13
所有源码，都可正常运行
weixin262高校校园交友微信小程序springboot.rar
最新发布
09-13
所有源码，都可正常运行
基于java的视频网站系统的设计与实现.docx
09-13
基于java的视频网站系统的设计与实现.docx
weixin153实验室管理微信小程序+ssm.rar
09-13
所有源码，都可正常运行
基于java的宠物商城网站设计与实现.docx
09-13
基于java的宠物商城网站设计与实现.docx
使用Servlet创建验证码图片教程
绘制验证码图片通常会创建一个`BufferedImage`对象，设置背景色，然后在画布上绘制验证码字符串，使用随机颜色和旋转角度。为了增加混淆，还可以随机绘制一些线条和点。 最后，我们通过`HttpServletResponse`的`...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值