关于JavaWeb验证码(数字)登入界面设计

提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档

目录

题目:

代码:

1.loginForm.jsp(登入界面)

2.validate.jsp(验证码生成)

3.ValidateServlet.java(Servlet文件,处理验证码是否正确)

4.web.xml(配置Servlet文件才能运行)

效果截图:

登入界面:

登入成功:

登入失败:

总结


题目:

       关于Javaweb的登入界面设置验证码,数字类型的验证,有登入界面loginForm.jsp,具有刷新验证码效果,生成验证码界面validate.jsp,Servlet文件ValidateServlet.java,处理验证码是否正确并返回结果,其次web.xml文件为Servlet的配置,让Servlet正常运行,最后测试验证。

代码:

1.loginForm.jsp(登入界面)

<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>title</title>
<style>
</style>
</head>
<body>
    <script type="text/javascript">
    function refresh()
    {
    	
    	loginForm.imgValidate.src="validate.jsp?id="+Math.random();
    
    }
    </script>
	欢迎登入本系统<br>
	<form action="servlet/ValidateServlet" method="post" name="loginForm">
	请输入账号:<input type="text" name="account"><br>
	请输入密码:<input type="password" name="password"><br>
	验证码:<input type="text" name="code" size="10">
	<img name="imgValidate" src="validate.jsp" onclick="refresh()"alt="看不清楚">
	<a href="javascript: refresh()">看不清,换一张</a>
	<br>
	<input type="submit" value="登入">
	</form>
</body>
</html>

2.validate.jsp(验证码生成)

<%@ page language="java"
    import="java.awt.*"
    import="java.awt.image.BufferedImage"
    import="java.util.*"
    import="javax.imageio.ImageIO"
    pageEncoding="GB2312"
 %>
<!DOCTYPE html>
<body>
	<%
	response.setContentType("image/jpeg;charsert=utf-8");//关键,防止图片变成乱码
	 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);
	//随机产生的验证码(4位数)
	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);
	//随机产生100个干扰点,是图像中的验证码不易被其他程序探测到
	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>

3.ValidateServlet.java(Servlet文件,处理验证码是否正确)

提示:这里个文件,还可以处理密码和账号是否正确,然后再决定成功登入系统页面。

package beans;

import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.http.HttpSession;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

@WebServlet("/ValidateServlet")
public class ValidateServlet extends HttpServlet {
	private static final long serialVersionUID = 1L;
	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		// TODO Auto-generated method stub
	String code=request.getParameter("code");
		HttpSession session=request.getSession();
		String randStr=(String)session.getAttribute("randStr");
		response.setCharacterEncoding("gb2312");
		PrintWriter out=response.getWriter();
		if(!code.equals(randStr))
		{
			out.println("验证码错误!");
			
		}
		else
		{
			out.println("验证码正确!跳转到longinserlet...");
		}
		
		
	}

}

4.web.xml(配置Servlet文件才能运行)

提示:只看ValidateServlet.java文件,其它的是多余出来的。

 

以下文件中, <servlet-class>beans.ValidateServlet</servlet-class>,beans是包名,ValidateServlet是java的类名,其它的不变。

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://java.sun.com/xml/ns/javaee" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd" version="3.0">
  <display-name>T2</display-name>
  <welcome-file-list>
    <welcome-file>index.html</welcome-file>
    <welcome-file>index.htm</welcome-file>
    <welcome-file>index.jsp</welcome-file>
    <welcome-file>default.html</welcome-file>
    <welcome-file>default.htm</welcome-file>
    <welcome-file>default.jsp</welcome-file>
  </welcome-file-list>
  </servlet>
  <servlet>
    <servlet-name>ValidateServlet</servlet-name>
    <servlet-class>beans.ValidateServlet</servlet-class>
  </servlet>
  <servlet-mapping>
    <servlet-name>ValidateServlet</servlet-name>
    <url-pattern>/servlet/ValidateServlet</url-pattern>
  </servlet-mapping>
</web-app>

效果截图:

登入界面:

登入成功:

登入失败:

总结

提示:这里对文章进行总结:
例如:以上就是今天要讲的内容,本文仅仅简单介绍了关于JavaWeb验证码(数字)登入界面设计。

  • 6
    点赞
  • 49
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

酷酷滴Q

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值