jsp注册登录页面（包含登录验证）

最新推荐文章于 2023-03-19 19:26:03 发布
最新推荐文章于 2023-03-19 19:26:03 发布
阅读量1.7k 收藏 11
点赞数 4
分类专栏： html 文章标签： html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_44769557/article/details/108903712
版权

1）使用DIV+CSS，设计并布局一个简单的页面。
2）在其中的一个页面里面，开发一个用户注册界面，要求：使用JavaScript检查格式是否正确。
运行结果：
输入图片在电脑中存放的路径就可以显示了
在这里插入图片描述

主页面main.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>首页</title>
    <style type="text/css">
    body{
        background: rgb(226, 226, 216);
        text-align: center;
        color: #333;
        font-family: Arial, verdana, sans-serif;
    }
    #header{
        width: 776px;
        margin-right: auto;
        margin-left: auto;
        padding: 0px;
        background-attachment: rgb(173, 12, 12);
        height: 60px;
        text-align: left;
    }
    #contain{
        margin-right: auto;
        margin-left: auto;
        width: 776px;
    }
    #mainbg{
        width:776px ;
        padding: 0px;
        background: #e0c477;
        float: left;
    }
    #right{
        float: right;
        margin: 2px 0px 2px 0px;
        padding: 0px;
        width:574px;
        background: #ccd2de;
        text-align: left;
    }
    #left{
        float: right;
        margin: 2px 0px 2px 0px;
        padding: 0px;
        width:200px;
        background: #e0c477;
        text-align: left;
    }
    #footer{
        clear:both;
        width: 776px;
        margin-right: auto;
        margin-left: auto;
        padding: 0px;
        background: #eee;
        height: 200px;
    }
    .text{
        margin: 0px;
        padding: 20px;
    }
    </style>
</head>
<body>
    
    <div id="header"><a href="login.html" style="text-decoration: none;">没有账号？点击去注册</a>
    <h5 align="right"><a href="" style="text-decoration: none;" ><li>登 陆</li></a></h5>
    </div>
    <div id="contain">欢迎！这里是校园袋平台
        <div id="mainbg">
            <div id="right">
                <div class="text">
                    请点击你需要的服务：
                    <p><a href="#">环保袋</a></p>
                    <p><a href="#">购物袋</a></p>
                    <p><a href="#">犭句袋</a></p>
                    <p><a href="#">衤果袋</a></p>
                    <p><a href="#">袋中袋</a></p>
                </div>
            </div>
            <div id="left">
                <div class="text">
                    <ul>
                       <li><a href="#" style="text-decoration: none;">抵押视频</a></li> <br>
                       <li><a href="#" style="text-decoration: none;">抵押资产</a></li> <br>
                       <li><a href="#" style="text-decoration: none;">抵押果照</a></li> <br>                       
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <div id="footer"> <img src="D:\图片\6.jpeg" width="80%" height="100%">      
    </div>
    
</body>
</html>

注册页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>注册账号</title>
	<style type="text/css"> body{
        background: rgb(226, 226, 216);		
        text-align: center;
        color: #333;
        font-family: Arial, verdana, sans-serif;
    }</style>
    <script type="text/javascript">
    //去掉前后空格
function deltrim(x){
	while(x.length>0 && x.charAt(0)==' ')
	 	x = x.substring(1,x.length);
	while(x.length>0&&x.charAt(x.length-1)==' ')
		x = x.substring(0,x.length-1);
	return x;
}
//非空验证
function isNull(elem,message){
	var va=deltrim(elem.value);
	if(va==""){
		alert(message);
		elem.focus();
		return false;
	}
	return true;
}
//验证账号
function validateId(){
	var first=document.forms[0].id.value.charAt(0);
	var exp=/^[a-z0-9]+$/;
	if(isNull(document.forms[0].id,"请输入账号")){//验证非空
		//验证首字符
		if(first>='a'&&first<='z'||first>='A'&&first<='Z'){
		}
		else{
			alert("账号首字符必须是字母！");
			document.forms[0].id.focus();
			return false;
		}
		if(!exp.test(document.forms[0].id.value)){
			alert("账号必须是字母或数字！");
			document.forms[0].id.focus();
			return false;
		}
		return true;
	}else{
		return false;
	}
}
//验证密码
function validatepwd(){
	var exp=/^[a-z0-9]+$/;
	if(isNull(document.forms[0].pwd,"请输入密码")){//验证非空
		if(document.forms[0].pwd.value.length<=8){
			alert("密码大于8位");
			document.forms[0].pwd.focus();
			return false;
		}else{
			if(exp.test(document.forms[0].pwd.value)){
				alert("密码需要有字母和数字之外的字符!");
				document.forms[0].pwd.focus();
				return false;
			}
		}
	}else{
		return false;
	}
	if(document.forms[0].pwd.value!=document.forms[0].repwd.value){
		alert("两次密码不一样!");
		document.forms[0].pwd.focus();
		return false;
	}
	return true;
}

//提交按钮
function gogo(){
	if(validateId()&&validatepwd()&&checkIdenty()){ 
		document.write("注册成功！请返回登录");		
		alert("注册成功！请返回登录");
		document.forms[0].pwd.focus();
		return true;
	}else{		
		return false;	
	}	
}
</script>
</head>
<body>
	<div id="body">
    <form action="login1.html" method="post">
		<center>
        <fieldset><legend>注册您的用户</legend>
            <table>
                <tr>
                    <td>账号</td>
                    <td><input type="text" name="id" />
                    </td>
                </tr>
                <tr>
                    <td>密码</td>
                    <td><input type="password" name="pwd" />
                    </td>
                </tr>
                <tr>
                    <td>确认密码</td>
                    <td><input type="password" name="repwd" />
                    </td>
                </tr>
                <tr>
					<td><input type="button" value="注册" onclick="gogo()"/>
                    </td>
                    <td><input type="reset" name="重置" />
                    </td>
                </tr>
			</table>
			已有账号？点击去<a href="main.html">登录</a>
		</fieldset></center>
	</div>
</body>
</html>
我永远信仰
关注
  • 4
    点赞
  • 踩
  • 11
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
jsp 登录与注册
q墨白
12-29 323
login.jsp <%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>登录</title> <style type="text/css"> form { width:
jsp实现的简单注册登录
wenzi880607的专栏
07-29 725
register.jsp String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; %>       ">         My J
jsp页面注册校验用户名
07-20
jsp页面登陆注册时，完整的校验用户名和密码等信息
JSP继续学习（完成一个最简单的用户登录界面)
fengsigaoju的博客
03-12 2万+
感觉只看视频效率太低，请教了别人，于是趁着有空自己写了个简单至极的登录界面，练练手。 功能是 1登录，用户名是fengsigaoju,密码123456若不相等就报错，否则就显示登陆成功. 2注册，在判断用户名和密码为空那边花了点时间，判断新老密码各种搜索. 3一开始  一直错误，加了值就过了，也不知道为什么，有谁肯告知，万分感谢。 自学难啊... Myjsp
jsp实现的登录和注册
qq_42680327的博客
06-10 3102
在通过学习jsp的同时，参考了一些资料，整理写下这篇博客，希望对大家有所帮助。 登录： 代码如下： <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01...
Javaweb学生信息管理系统（Mysql+JSP+MVC+CSS）
热门推荐
weixin_52254591的博客
06-19 3万+
本系统主要实现对基于Javaweb学生信息管理系统所需的各项基本功能，能够对学生信息进行增删改查等功能，并可以实现用户注册、用户登陆等功能。数据库：Mysql开发工具：Eclipse开发环境：JDK+Tomcat...............
jsp注册里密码强弱怎么弄_JavaScript注册时密码强度校验代码
weixin_33906021的博客
12-23 254
密码强度有4个状态，分别如下图。无密码状态密码低级状态密码中级状态密码高级状态实现的代码主要如下：HTML代码 无 CSS代码.pwd{width:50px;height:20px;line-height:14px;padding-top:2px;}.pwd_f{color:#BBBBBB;}.pwd_c{background-color:#F3F3F3;border-top:1px solid ...
servlet+jsp登录注册页面前后台代码完整版
最新发布
06-20
3. **反馈信息**：登录或注册成功或失败后，Servlet会通过请求转发或者重定向（使用`RequestDispatcher`或`response.sendRedirect()`）返回JSP页面，JSP可以根据Servlet传递的信息（如错误消息或成功提示）动态展示...
JSP实现登录注册连接MySql数据库-初学
03-03
在登录注册系统中，我们通常会创建两个页面：login.jsp（登录页面）和register.jsp（注册页面）。登录页面包含用户名和密码输入框，以及提交按钮；注册页面则需要收集用户的新用户名、密码，可能还有邮箱等信息。 ...
jsp实现登录验证的过滤器
10-17
- `jsp`文件：登录界面`login.jsp`和可能的其他页面 2. **LoginFilter.java详解**： - `@WebFilter`注解：用于声明这个类是一个过滤器，指定过滤器名称`filterName`为"loginFilter"，`urlPatterns`为"/*"，表示该...
JSP实现用户登录、注册和退出功能
10-22
这通常通过在JSP页面中添加条件语句或使用异常处理机制来实现。 9. **会话管理**：为了保持用户登录状态，需要使用HTTP会话（session）来跟踪用户。当用户成功登录后，可以将用户ID或其他标识符存储在session中，...
jsp制作的简单的登录注册系统
02-28
【标题】"jsp制作的简单的登录注册系统"所涉及的知识点包括JSP（JavaServer Pages）、MySQL数据库、MyEclipse集成开发环境以及登录注册系统的实现流程。这些是Web开发中的基础概念和技术，对于初学者来说是非常重要...
jsp注册里密码强弱怎么弄_js密码强度校验
weixin_42506752的博客
12-31 374
现在很多论坛和博客都在用户注册时添加了验证密码强度的功能，在以前的文章中，我们曾经给出过一段检验密码强度的例子，今天再看一个与《js密码强度校验》的代码。效果：//CharMode函数//测试某个字符是属于哪一类.function CharMode(iN){if (iN>=48 && iN <=57) //数字return 1;if (iN>=65 &&a...
jsp网页实现登录用户名于密码的验证（不涉及数据库操作）
weixin_43887915的博客
06-21 1万+
效果图： 登录失败图： 成功登录图： 代码login.jsp: <%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%> <body> <h3>用户登录</h3> <form action="" method="post...
JSP实现简单的登录和注册
weixin_61370021的博客
03-19 1万+
JSP实现简单的登录和注册，使用Map集合模拟数据库存储数据
JSP页面进行用户验证
weixin_44434232的博客
11-07 714
在form表单提交之前进行数据验证，防止没有输入用户名或密码进行登录的情况发生。
使用JSP实现简单的登录注册功能，并且使用Session跟踪用户登录信息
m0_56154713的博客
04-05 9516
使用JSP实现简单的登录注册功能，并且使用了Session来跟踪用户的登录信息，这个是用纯JSP来实现此功能的，由于没有连接数据库，所以使用List来模拟数据库。 第一步：创建web项目 如果有不会创建web项目的，可以点击下面这个链接去看。 idea创建第一个web项目 实现登录注册功能，用到以下7个jsp文件和两个类。 login.jsp是登录页面； register.jsp是注册页面； doLogin.jsp是在login.jsp页面的表单提交后在doLogin.jsp页面做效验，如果输入的用户名和
JavaWeb学习——Servlet&JSP用户注册及验证码实现案例（23）
Hoorus的窝
02-17 2219
日常学习笔记
实验二：JSP内置对象实验报告
qq_44769557的博客
10-16 6902
一、实验目的 通过编程和上机实验理解 JSP各个页面之间的响应和传递的过程。并且能够熟练的掌握JSP的内置对象的属性和方法，并能灵活运用。 二、实验要求 1． 基础练习：内置对象常用方法的使用。 2． 编写获取表单数据。 3． 按照下列要求实现简单注册、登录程序。 截图： 代码 注册页面 index.jsp <%@ page language="java" contentType="text/html;charSet=utf-8" pageEncoding="utf-8"%> &l

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值