javaweb实现输入账号密码验证码登录（登录过期验证）（购物车案例）

最新推荐文章于 2025-08-10 15:04:46 发布

原创

最新推荐文章于 2025-08-10 15:04:46 发布 · 3.8k 阅读

46 ·

CC 4.0 BY-SA版权

文章标签：

#javaweb

文章目录

前言
一、javaweb实现输入账号密码验证码登录

前言

提示：以下是本篇文章正文内容，下面案例可供参考

一、javaweb实现输入账号密码验证码登录

1.login.jsp

<%@page import="java.io.PrintWriter"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>小红帽商城--用户登录</title>
<link type="text/css" rel="stylesheet" href="layui/css/layui.css">
</head>
<body>
	<div class="layui-container">
		<div class="layui-row" style="margin-top:100px;">
			<div class="layui-col-md7">&nbsp;</div>
			<div class="layui-col-md5">
			 	<div class="layui-card layui-border-red">
			 		<div class="layui-card-header layui-bg-red">
			 		用户登录
			 		</div>
			 		<div class="layui-card-body" style="padding:40px 60px 40px 10px">
			 		<form action="login" method="post" class="layui-form layui-font-black"><!-- 处理数据页面login -->
			 			<div class="layui-form-item">
			 				<label class="layui-form-label">用户名:</label><!--提交name为username的密码  -->
			 				<div class="layui-input-block">
			 					<input type="text" name="username" class="layui-input layui-border-blue">
			 				</div>
			 			</div>
			 			 <div class="layui-form-item">
			 				<label class="layui-form-label">密码:</label>
			 				<div class="layui-input-block">
			 					<input type="password" name="password" class="layui-input layui-border-blue">><!--提交name为password的密码 -->
			 				</div>
			 			</div>
			 			<div class="layui-form-item">
			 				<label class="layui-form-label">验证码:</label>
			 				<div class="layui-input-block">
			 						<div class="layui-col-md6">
			 						<input type="text" name="vcode" class="layui-input layui-border-blue"><!--提交name为vcode的验证码 -->
			 						</div>
			 						<div class="layui-col-md6">
			 						<img class="vcode"alt="点击切换验证码" src="vcode.jpg" style="margin-left:20px;">
			 						</div>
			 					</div>
			 				</div>
			 				<div class="layui-form-item">
			 						<div class="layui-input-block">
			 						<button type="submit" class="layui-btn layui-btn-normal layui-btn-fluid">提交</button>
			 						</div>
			 					</div>
			 				<div class="layui-form-item">
			 				<div class="layui-input-block"><!-- 输出验证码错误或者用户名密码错误 -->
			 						<%
			 								String error=(String)request.getAttribute("error");
			 								if(error!=null){
   
   
			 									out.print(error);
			 								}
			 						%>
			 						</div>
			 					</div>
			 			</form>
			 			<p class="sj" style="margin-left:100px;"></p><!--当前时间-->
			 			<span class="hour" style="margin-left:100px;"></span><!-- 距离未来某个时间点的还剩多少时间 -->
			 			<span class="minute" style="margin-left:5px;"></span>
			 			<span class="second" style="margin-left:5px;"></span>
			 		</div>
			</div>
		</div>
	</div>
</div>	
<script type="text/javascript" src="layui/layui.js"></script>
<script type="text/javascript">
layui.use(['jquery'],function(){
   
   
	var $=layui.jquery;
	$('.vcode').css({
   
   'cursor':'pointer'}).click(function(){
   
   
		$(this).attr('src','vcode.jpg?_='+new Date().getTime());
	});
});
getdate();
setInterval(function () {
   
   //显示当前时间的函数
    var date = new Date();
    var year

最低0.47元/天解锁文章