简单的动态获取验证码（jsp）

最新推荐文章于 2024-05-22 10:11:16 发布
最新推荐文章于 2024-05-22 10:11:16 发布
阅读量1k 收藏 5
点赞数
文章标签： javascript css html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_44730311/article/details/105481718
版权

1.用jsp编写获取验证码的代码，存入session，命名validate.jsp。

<%@ page import="java.awt.image.BufferedImage" %>
<%@ page import="java.awt.*" %>
<%@ page import="java.util.Random" %>
<%@ page import="javax.imageio.ImageIO" %>

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>code</title>
</head>
<body>
<%
    response.setHeader("Cache-Control", "no-cache");
    //在内存中创建图像
    int width = 60, height = 20;
    BufferedImage image = new BufferedImage(width, height, BufferedImage.TYPE_INT_RGB);
    //获取画笔
    Graphics g = image.getGraphics();
    //设定定背景颜色
    g.setColor(new Color(200, 200, 200));
    g.fillRect(0, 0, width, height);
    //随机获取验证码
    Random rnd = new Random();
    int randNum = rnd.nextInt(8999) + 1000;
    String randStr = String.valueOf(randNum);
    //将验证码放入session中
    session.setAttribute("randStr", randStr);
    //将验证码显示到图像中
    g.setColor(Color.black);
    g.setFont(new Font("", Font.PLAIN, 20));
    g.drawString(randStr, 10, 17);
    //产生干扰点
    for (int i = 0; i < 100; i++) {
        int x = rnd.nextInt(width);
        int y = rnd.nextInt(height);
        g.drawOval(x, y, 1, 1);
    }
    //输出图像到界面
    ImageIO.write(image, "JPEG", response.getOutputStream());
    out.clear();
    out = pageContext.pushBody();
%>
</body>
</html>

2.在登录界面调用，实现对验证码的获取
在这里插入图片描述
下面附上登录界面的代码还有css+js代码
登录界面：

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>教师登录界面</title>

<link rel="stylesheet" href="css/style.css">
<script type="text/javascript">
   function checklogin(){
	   var tname=document.getElementById("tname").value;
	   var tpassword=document.getElementById("tpassword").value;
	   var code=document.getElementById("code").value;
	   if(tname==""){
		   document.getElementById("spantname").innerHTML="账户不能为空";
	   }else if(tpassword==""){
		   document.getElementById("spantpassword").innerHTML="密码不能为空";
	   }else if(code==""){
		   document.getElementById("spancode").innerHTML="验证码不能为空";
	   }else{
		   document.form1.submit();	
	   }
					
}
   function checksignin(){	   
		document.form2.submit();			
}
   function refresh() {
       document.getElementById("image").src="validate.jsp?id="+Math.random();
   }
</script>
</head>
<body>
<div class="content">
    	<form action="TeacherLoginServlet" method="post" name="form1">
        <div class="form sign-in">
            <h2>欢迎回来</h2>
            <label>
                <span>账号</span>
                <input type="test" name="tname" id="tname"/>
                <span id="spantname" style="color:red"></span>
            </label>
            <label>
                <span>密码</span>
                <input type="password" id="tpassword" name="tpassword"  />
                <span id="spantpassword" style="color:red"></span>
            </label>
           
             <label>
                <span>验证码</span>
                <input type="text" name="code" id="code" />
                 <img src="validate.jsp" id="image" οnclick="refresh()" />
                  <span id="spancode" style="color:red"></span>
            </label>
             <p class="forgot-pass"><a href="javascript:">忘记密码？</a></p>
            <button type="button" class="submit" onclick="checklogin()">登 录</button>
        </div>
    	</form>
        <div class="sub-cont">
            <div class="img">
                <div class="img__text m--up">
                    <h2>还未注册？</h2>
                    <p>立即注册，加入学生管理！</p>
                </div>
                <div class="img__text m--in">
                    <h2>已有帐号？</h2>
                    <p>有帐号就登录吧，好久不见了！</p>
                </div>
                <div class="img__btn">
                    <span class="m--up">注 册</span>
                    <span class="m--in">登 录</span>
                </div>
            </div>
            <form action="SignServlet" method="post" name="form2">
            <div class="form sign-up">
                <h2>立即注册</h2>
                <label>
                    <span>用户名</span>
                    <input type="text" name="tname"/>
                </label>
                <label>
                    <span>电话</span>
                    <input type="text" name="tphone"/>
                </label>
                <label>
                    <span>密码</span>
                    <input type="password" name="tpassword"/>
                </label>
                <button type="button" class="submit" onclick="checksignin()">注 册</button>
               
            </div>
        	</form>
        </div>
    </div>

    <script src="js/script.js"></script>
	
	
</body>
</html>

css样式：


 *, *:before, *:after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: 'Open Sans', Helvetica, Arial, sans-serif;
    background: #ededed;
}

input, button {
    border: none;
    outline: none;
    background: none;
    font-family: 'Open Sans', Helvetica, Arial, sans-serif;
}

.tip {
    font-size: 20px;
    margin: 40px auto 50px;
    text-align: center;
}

.content {
    overflow: hidden;
    position: absolute;
    left: 50%;
    top: 50%;
    width: 900px;
    height: 550px;
    margin: -300px 0 0 -450px;
    background: #fff;
}

.form {
    position: relative;
    width: 640px;
    height: 100%;
    transition: -webkit-transform 0.6s ease-in-out;
    transition: transform 0.6s ease-in-out;
    transition: transform 0.6s ease-in-out, -webkit-transform 0.6s ease-in-out;
    padding: 50px 30px 0;
}

.sub-cont {
    overflow: hidden;
    position: absolute;
    left: 640px;
    top: 0;
    width: 900px;
    height: 100%;
    padding-left: 260px;
    background: #fff;
    transition: -webkit-transform 0.6s ease-in-out;
    transition: transform 0.6s ease-in-out;
    transition: transform 0.6s ease-in-out, -webkit-transform 0.6s ease-in-out;
}

.content.s--signup .sub-cont {
    -webkit-transform: translate3d(-640px, 0, 0);
    transform: translate3d(-640px, 0, 0);
}

button {
    display: block;
    margin: 0 auto;
    width: 260px;
    height: 36px;
    border-radius: 30px;
    color: #fff;
    font-size: 15px;
    cursor: pointer;
}

.img {
    overflow: hidden;
    z-index: 2;
    position: absolute;
    left: 0;
    top: 0;
    width: 260px;
    height: 100%;
    padding-top: 360px;
}

.img:before {
    content: '';
    position: absolute;
    right: 0;
    top: 0;
    width: 900px;
    height: 100%;
    background-image: url(../images/bg.jpg);
    background-size: cover;
    transition: -webkit-transform 0.6s ease-in-out;
    transition: transform 0.6s ease-in-out;
    transition: transform 0.6s ease-in-out, -webkit-transform 0.6s ease-in-out;
}

.img:after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
}

.content.s--signup .img:before {
    -webkit-transform: translate3d(640px, 0, 0);
    transform: translate3d(640px, 0, 0);
}

.img__text {
    z-index: 2;
    position: absolute;
    left: 0;
    top: 50px;
    width: 100%;
    padding: 0 20px;
    text-align: center;
    color: #fff;
    transition: -webkit-transform 0.6s ease-in-out;
    transition: transform 0.6s ease-in-out;
    transition: transform 0.6s ease-in-out, -webkit-transform 0.6s ease-in-out;
}

.img__text h2 {
    margin-bottom: 10px;
    font-weight: normal;
}

.img__text p {
    font-size: 14px;
    line-height: 1.5;
}

.content.s--signup .img__text.m--up {
    -webkit-transform: translateX(520px);
    transform: translateX(520px);
}
.img__text.m--in {
    -webkit-transform: translateX(-520px);
    transform: translateX(-520px);
}

.content.s--signup .img__text.m--in {
    -webkit-transform: translateX(0);
    transform: translateX(0);
}

.img__btn {
    overflow: hidden;
    z-index: 2;
    position: relative;
    width: 100px;
    height: 36px;
    margin: 0 auto;
    background: transparent;
    color: #fff;
    text-transform: uppercase;
    font-size: 15px;
    cursor: pointer;
}
.img__btn:after {
    content: '';
    z-index: 2;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    border: 2px solid #fff;
    border-radius: 30px;
}

.img__btn span {
    position: absolute;
    left: 0;
    top: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    transition: -webkit-transform 0.6s;
    transition: transform 0.6s;
    transition: transform 0.6s, -webkit-transform 0.6s;
}

.img__btn span.m--in {
    -webkit-transform: translateY(-72px);
    transform: translateY(-72px);
}

.content.s--signup .img__btn span.m--in {
    -webkit-transform: translateY(0);
    transform: translateY(0);
}

.content.s--signup .img__btn span.m--up {
    -webkit-transform: translateY(72px);
    transform: translateY(72px);
}

h2 {
    width: 100%;
    font-size: 26px;
    text-align: center;
}

label {
    display: block;
    width: 260px;
    margin: 25px auto 0;
    text-align: center;
}

label span {
    font-size: 12px;
    color: #909399;
    text-transform: uppercase;
}

input {
    display: block;
    width: 100%;
    margin-top: 5px;
    padding-bottom: 5px;
    font-size: 16px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.4);
    text-align: center;
}

.forgot-pass {
    margin-top: 15px;
    text-align: center;
    font-size: 12px;
    color: #cfcfcf;
}

.forgot-pass a {
    color: #cfcfcf;
}

.submit {
    margin-top: 40px;
    margin-bottom: 20px;
    background: #d4af7a;
    text-transform: uppercase;
}

.fb-btn {
    border: 2px solid #d3dae9;
    color: #8fa1c7;
}
.fb-btn span {
    font-weight: bold;
    color: #455a81;
}

.sign-in {
    transition-timing-function: ease-out;
}
.content.s--signup .sign-in {
    transition-timing-function: ease-in-out;
    transition-duration: 0.6s;
    -webkit-transform: translate3d(640px, 0, 0);
    transform: translate3d(640px, 0, 0);
}

.sign-up {
    -webkit-transform: translate3d(-900px, 0, 0);
    transform: translate3d(-900px, 0, 0);
}
.content.s--signup .sign-up {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}
#yzdiv{
		text-align: center;
	}

js的代码：

document.querySelector('.img__btn').addEventListener('click', function() {
    document.querySelector('.content').classList.toggle('s--signup')
})
725話
关注
  • 0
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
验证码的获取
weixin_44571808的博客
06-01 2174
开发工具与关键技术： Visual Studio 验证码 作者：黎凤焕 撰写时间：2019年 5月 30 日 做登录页面的时候，一般都会使用验证码来登录的，经过验证码的判断是否正确，还判断账号与密码是否正确，经过多处判断信息的准确性才可以登录进去。验证码的长度自定义的，一般验证码的长度为4到8位数。 如果验证码太长，用户的体验程度有影响，浪费用户的时间，或者用户输入验证码的时候输入错误了，又...
动态验证码的获取方法
Lly1120的博客
04-08 1763
在各大登录界面都需要填写动态验证码。 那么我们应该如何获取呢？ 我们可以利用三步就可以实现动态验证码的获取 // 第一步 // 找到验证码提示框的元素 driver.findElement(By.xpath("验证码元素")); // 第二步 // 获取验证码元素后，运用方法 String text = findElement.getAttribute("textContent"); // 第三步 // 把获取的元素填入相对应的输入框中 driver.findElement(By.xpath("需要
实现手机验证码获取及倒计时功能
最新发布
m0_54340021的博客
05-22 727
本文介绍了两种实现手机验证码获取及倒计时功能的方法，适用于Web和移动应用的用户身份验证环节。两种实现都包含了详细的代码示例和注释，以帮助开发者理解并快速集成到自己的项目中。文章最后强调了在实际开发中需要与后端服务进行集成和安全校验的重要性，以确保验证码功能的安全性和有效性。
jsp无刷新获取验证码
java闲扯淡
10-24 1374
生成验证码
60秒获取验证码的代码实现
baidu_34157788的博客
02-20 790
<input type=""text" id="phone"><input type="button" id="btn_get">function checkPhone(){ var phone = document.getElementById('phone').value; if(!(/^1[34578]\d{9}$/.test(pho
WEB自动化_如何获取动态验证码
lkr
06-25 629
WEB自动化_如何获取动态验证码
jsp 最简单获取动态 验证码 例子
03-21
在这个“jsp 最简单获取动态验证码例子”中，我们将探讨如何在JSP中生成并显示一个简单的动态验证码。 验证码的主要目的是防止自动机器人或恶意脚本进行非法操作，例如防止垃圾邮件、注册虚假账号等。动态验证码则...
jsp servlet 动态验证码
10-17
在动态验证码场景中，当用户点击“刷新验证码”按钮时，AJAX请求会被触发，向服务器发送请求以获取新的验证码。服务器生成新的验证码后，通过JSON或其他数据格式返回，前端JavaScript代码接收到新验证码并更新图像。...
实现jsp验证码的简单小例子
01-20
- `src=”index/image.jsp”` 指定了图像的来源，这里是一个JSP页面，会动态生成验证码图像。 - `onclick` 事件触发时，通过添加随机参数（`Math.random()`）来防止浏览器缓存验证码图像。 8. **JavaScript刷新...
jsp动态生成验证码
05-17
本话题主要围绕"jsp动态生成验证码"展开，我们将深入探讨如何在JavaServer Pages (JSP) 中实现这一功能。 首先，验证码的生成通常涉及到两个主要部分：后端生成逻辑和前端展示。在JSP中，这通常通过Servlet和...
Jsp图片验证码
01-19
`JSP`（JavaServer Pages）是Java的一种动态网页技术，可以用来生成图片验证码。下面我们将详细探讨如何在JSP中创建图片验证码以及验证用户输入的验证码是否正确。 ### 1. 图片验证码的生成原理 图片验证码的基本...
validate.jsp
10-05
通用的验证码，可在页面中使用img标签src属性嵌套。可以直接放置页面中使用，简单方便
获取验证码
11-30
很好的实现验证码功能,功能很强大哦，很好很好
获取短信验证码源码
04-24
在注册或者登录的时候，执行该代码可以收到手机验证码
JS实现获取短信验证码功能（前台代码）
12-10
也是通过网络搜集整理的，我自己在实际项目中用到，使用了jquery技术，很简单，全套的，保证一看就懂。
jQuery手机注册表单获取验证码代码.zip
07-05
jQuery手机注册表单获取验证码代码是一款输入手机号码表单验证，60秒倒计时发送验证码完成注册表单代码。
获取验证码代码记录
bayer_zeng的博客
10-22 352
写好一份获取验证码逻辑, 记录已做备用 // 1.定义一个随机字典 public static final char[] chars = { '1', '2', '3', '4', '5', '6', '7', '8', '9', '0', 'A', 'B', 'C', 'D', 'E','F', 'G', 'H', 'I', 'J', ...
JSP语法详解：注释与声明
在Java Server Pages (JSP) 中，理解和掌握基本语法是创建动态网页的关键。文档中首先提到了两种类型的注释方式： 1. HTML注释：这种注释方式对于用户可见，因为它们会被浏览器解析并显示在源代码中。例如，`<!-- ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值