Javascript注册页面验证登录
2024-05-10 00:49:47
Javascript注册页面验证登录连接数据库。
目前登录功能好像出问题了，用不了数据库注册的信息用于登录。由于时间的原因，以后再更改。个人笔记，不建议拿去用，因为还存在问题没有解决。
(1)index.css
@CHARSET "UTF-8";
header {width: 800px;height: 50px;background:rgba(218,80,223,0.70);margin: 0 auto;color: white;text-align: center;border:1px solid #FFF;/*添加边框*/}nav {width: 800px;height: 30px;color: white;background:rgba(350,80,201,0.60);text-align: center;margin: 0 auto;border:1px solid #FFF;/*添加边框*/}section {margin: 0 auto;width: 800px;height: 450px;color: white;text-align: center;margin: 0 auto;border:1px solid #FFF;/*添加边框*/}aside {float: left;width: 200px;height: 450px;background:rgba(25,215,206,0.40);color: black ;text-align: center;margin: 0 auto;}article {float: right;height: 450px;width: 600px;color: white；border:1px solid #FFF;/*添加边框*/ text-align: center;background:rgba(239,68,195,0.40);margin: 0 auto;}footer {width: 800px;height: 50px;background:rgba(218,80,223,0.60);color: white;text-align: center;margin: 0 auto;border:1px solid #FFF;/*添加边框*/}a {a{display: block;/*将a变成块状*/width: 100px;/*设置块的宽度*/height: 50px;/*设置块的长度*/font-family: Microsoft Yahei;line-height: 50px;/*设置字体在块中的高度#*/background-color:rgba(151,16,113,0.40) ;margin: 0px 0px;/*块里的高宽通过margin设置*/color: #fff;text-align: center;/*字体居中*/text-decoration: none;/*去掉下划线*/font-size: 15px;}}p {text-align: center;}legend {text-align: center;}(2)index.jsp
<%@ 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" type="text/css" href="index.css" />
</head>
<body id="body" background="">
<div id="header"><h3>学生信息管理首页</h3>
</div>
<ul id="nav"> <li><a href="index.jsp" >首页</a></li><li><a href="regist.jsp">注册</a></li><li><a href="login.jsp">登录</a></li><li><a href="alarm.jsp">学生信息</a></li></ul><!-- 中间 -->
<div id="content"><h1>使用学生信息管理系统! </h1>
</div>
<!--底部-->
<div id="footer"></div>
</body>
</html>
(3)login.css
@CHARSET "UTF-8";#body{width: 800px;height:auto;margin: 0 auto;color: rgba(0,0,0,1.00);text-align: center;border:1px solid #000000;/*添加边框*/}#header{width: 800px;height: 50px;background:rgba(218,80,223,0.70);margin: 0 auto;color: rgba(0,0,0,1.00);text-align: center;border:1px solid #FFF;/*添加边框*/border-right:1px solid #000000;background-color:skyblue;/*设置透明背景颜色*/}#nav {Width:800px; height:40px; padding:0;margin: 0 auto;list-style:none; background-color: rgba(197,92,207,1.00);} #nav li {width:150px;height:40px;float:left;text-align:center;border-bottom:solid 1px rgba(244,244,244,1.00);border-right:solid 1px rgba(244,244,244,1.00);font:25px "microsoft yahei";}#nav li a {width:150px;height:40px;color:#800080; line-height: 50px;text-decoration:none;} #nav li a:hover{width:150px;height:40px;display:block; background-color:blue;}#content{margin: 0 auto;width: 800px;height: auto;text-align: center;margin: 0 auto;border:1px solid #FFF;/*添加边框*/border-right:1px solid #000000;color: rgba(0,0,0,1.00);background-color:white;}.aaa{text-align-last:justify;display: inline-block; width: 80px;}.bbb{align:center;margin-top:20px;}.ccc{background-color:skyblue;display: block;align:center;width: 400px;height: auto;margin-left: 200px;margin-top: 30px;margin-bottom: 40px;border:1px solid #000;}.ddd{background-color: rgba(208,162,63,1.00);}#footer {width: 800px;height: 50px;background:rgba(218,80,223,0.60);text-align: center;margin: 0 auto;border:1px solid #FFF;/*添加边框*/background-color:skyblue;border-right:1px solid #000000;}#a{text-decoration:none;}(4)login.jsp
<%@ 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" type="text/css" href="login.css" /><script type="text/javascript"></script>
</head>
<body id="body" background="">
<div id="header"><h3>学生信息管理系统登录页面</h3>
</div>
<ul id="nav"> <li><a href="index.jsp" >首页</a></li><li><a href="regist.jsp">注册</a></li><li><a href="login.jsp">登录</a></li><li><a href="alarm.jsp">学生信息管理</a></li></ul><!-- 中间 -->
<div id="content"><h1>欢迎登录学生信息管理系统</h1><div class="ccc"><h3>请登录...</h3><h4>登录</h4><form action="${pageContext.request.contextPath}/loginServlet" method="post"><div class="bbb"><label class="aaa">用户名：</label><input type="text" id="username" name="username" placeholder="请输入用户名" /></div><br /><div class="bbb"><label class="aaa">密码：</label><input type="password" id="password" name="password" placeholder="请输入密码"/></div><br /><div class="bbb"><input type="checkbox" value="记住用户名" checked />记住用户名</div><br /><div class="bbb"><input class="ddd" type="submit" id="login" name="login" value="登录" /><a href="${pageContext.request.contextPath}/regist.jsp" class="a">账号注册</a></div><br /> </form></div>
</div>
<!--底部-->
<div id="footer"></div>
</body>
</html>(5)regist.css
@CHARSET "UTF-8";#body{width: 800px;height:auto;margin: 0 auto;color: rgba(0,0,0,1.00);text-align: center;border:1px solid #000000;/*添加边框*/}#header{width: 800px;height: 50px;background:rgba(218,80,223,0.70);margin: 0 auto;color: rgba(0,0,0,1.00);text-align: center;border:1px solid #FFF;/*添加边框*/border-right:1px solid #000000;background-color:skyblue;/*设置透明背景颜色*/}#nav {Width:800px; height:40px; padding:0;margin: 0 auto;list-style:none; background-color: rgba(197,92,207,1.00);} #nav li {width:150px;height:40px;float:left;text-align:center;border-bottom:solid 1px rgba(244,244,244,1.00);border-right:solid 1px rgba(244,244,244,1.00);font:25px "microsoft yahei";}#nav li a {width:150px;height:40px;color:#800080; line-height: 50px;text-decoration:none;} #nav li a:hover{width:150px;height:40px;display:block; background-color:blue;}#content{margin: 0 auto;width: 800px;height: auto;text-align: center;margin: 0 auto;border:1px solid #FFF;/*添加边框*/border-right:1px solid #000000;color: rgba(0,0,0,1.00);background-color:white;}.aaa{text-align-last:justify;display: inline-block; width: 80px;}.bbb{align:center;margin-top:20px;}.ccc{background-color:pink;display: block;align:center;width: 400px;height: auto;margin-left: 200px;margin-top: 30px;margin-bottom: 40px;border:1px solid #000;}.ddd{background-color: rgba(208,162,63,1.00);}#footer {width: 800px;height: 50px;background:rgba(218,80,223,0.60);text-align: center;margin: 0 auto;border:1px solid #FFF;/*添加边框*/background-color:skyblue;border-right:1px solid #000000;}(6)regist.jsp
<%@ 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" type="text/css" href="regist.css" />
</head>
<body id="body" background=""><div id="header"><h3>学生信息管理系统注册页面</h3>
</div>
<ul id="nav"> <li><a href="index.jsp" >首页</a></li><li><a href="regist.jsp">注册</a></li><li><a href="login.jsp">登录</a></li><li><a href="alarm.jsp">学生信息</a></li></ul><!-- 中间 -->
<div id="content"><h1>欢迎注册学生信息管理系统</h1><div class="ccc"><h3>用户注册</h3><p>欢迎注册您的相关信息，请您如实填写</p><form action="${pageContext.request.contextPath}/registServlet" method="post"><div class="bbb"><label class="aaa" >用户姓名: </label><input type="text" name="username" id="username" placeholder="请输入学号"/> <br/></div><div class="bbb"> <label class="aaa" >手机号码:</label><input type="tel" name="userphone" id="userphone" pattern="^1\d{10}$" placeholder="请输入手机号" /><br/></div><div class="bbb"><label class="aaa" >邮箱地址:</label><input type="email" name="email" id="email"/><br/></div> <div class="bbb"> <label class="aaa" for="password">密码: </label><input type="password" name="password" id="pwd"placeholder="请输入密码" /> <br /></div><div class="bbb"><label class="aaa" for="password1">确认密码: </label><input type="password" name="password1" id="repwd" placeholder="再次输入密码" /> <br/></div><font color="red" size="2"> ${registError }</font><div class="bbb"><input type="checkbox" checked />我同意<a href="#">相关协议和政策</a><br /></div><div class="bbb"><input class="ddd" type="submit" id="checksubmit" value="提交" /> <input class="ddd" type="reset" value="重置" /><a href="${pageContext.request.contextPath}/login.jsp" class="signup-link">已有账号？返回登录</a></div></form></div>
</div>
<!--底部-->
<div id="footer"></div>
</body>
</html>
(7)loginSevlet.java
package servlet;
import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;import DAO.UserDao;
import student.UserVo;
/*** @description 登录请求处理类* @author LLM*/
@WebServlet("/loginServlet")
public class loginServlet extends HttpServlet {private static final long serialVersionUID = 1L;@Overridepublic void doPost(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {request.setCharacterEncoding("utf-8");response.setContentType("text/html;charset=utf-8");//接收表单信息String username = request.getParameter("username");String password = request.getParameter("password");//设置回显request.setAttribute("username", username);request.setAttribute("password", password);//根据用户名查询用户UserVo user =new UserDao().findUser(username);//查找数据库是否有相应的用户密码。验证登录if(user!=null){if(user.getPassword().equals(password)){request.getSession().setAttribute("user", user);response.sendRedirect("loginsuccess.jsp");}else if(password==null||!user.getPassword().equals(password)) {response.sendRedirect("loginfail.jsp");}else if(username==null){response.sendRedirect("loginfail.jsp");}}else {response.sendRedirect("loginfail.jsp");}}@Overrideprotected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {doPost(request, response);}}(8)registeServlet.java
package servlet;import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;import DAO.UserDao;
import student.UserVo;
/*** @description 注册请求处理类* @author WANGZIC*/
@WebServlet("/registServlet")
public class registServlet extends HttpServlet {private static final long serialVersionUID = 1L;@Overridepublic void doPost(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {request.setCharacterEncoding("utf-8");response.setContentType("text/html;charset=utf-8");//从regist.jsp获取表单信息String username = request.getParameter("username");String userphone= request.getParameter("userphone");String email = request.getParameter("email");String password = request.getParameter("password");String rpsw = request.getParameter("password1");//验证注册if(username==null||username.trim().isEmpty()){request.setAttribute("registError", "用户名不能为空");request.getRequestDispatcher("/regist.jsp").forward(request, response);return;}if(userphone==null||userphone.trim().isEmpty()){request.setAttribute("registError", "电话号码不能为空");request.getRequestDispatcher("/regist.jsp").forward(request, response);return;}if(email==null||email.trim().isEmpty()){request.setAttribute("registError", "邮箱不能为空");request.getRequestDispatcher("/regist.jsp").forward(request, response);return;}if(password==null||password.trim().isEmpty()){request.setAttribute("registError", "密码不能为空");request.getRequestDispatcher("/regist.jsp").forward(request, response);return;}if(!password.equals(rpsw)){request.setAttribute("registError", "密码不一致");request.getRequestDispatcher("/regist.jsp").forward(request, response);return;}UserDao u = new UserDao();//增加数据到数据库boolean res = u.addUser(username,userphone,email,password);if(res){response.sendRedirect("registsuccess.jsp");System.out.println("增加用户到数据库成功");}else {request.setAttribute("registError", "注册失败，该用户名已存在");request.getRequestDispatcher("/regist.jsp").forward(request, response);System.out.println("增加用户到数据库成功");}}@Overrideprotected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {doPost(request, response);}
}
(9)UserVo.java(这是一个Javabean类)
package student;public class UserVo {private int id;private String username;private String userphone;private String email;private String password;public int getId(){return id;}public String getUsername(){return username;}public String getUserphone(){return userphone;}public String getEmail(){return email;}public String getPassword(){return password;}public void setId(int id){this.id=id;}public void setUsername(String username){this.username=username;}public void setUserphone(String userphone){this.userphone=userphone;}public void setEmail(String email){this.email=email;}public void setPassword(String password){this.password=password;}public String toString() {return "查询结果：User{" +"id=" + id +", username='" + username + '\'' +", userphone='" + userphone + '\'' +", email='" + email + '\'' +", password='" + password + '\'' +'}';}}Javascript注册页面验证登录相关推荐
- 小兔鲜注册页面验证、阶段案例（登录、首页页面）（重点）、小兔鲜放大镜效果——DOM
目录 1. 小兔鲜注册页面验证 2. 阶段案例(登录.首页页面)(重点) 3. 小兔鲜放大镜效果 1. 小兔鲜注册页面验证 验证码模块有个小问题: 连续点击获取验证码会导致触发多次计时器,会导致计时出 ...
- JavaScript使用md5验证登录加密
直接上代码 1.HTML部分 <!DOCTYPE html> <html lang="en"> <head><meta charset=& ...
- h5 php登录注册页面验证,H5制作一个注册页面的代码实例
HTML5写的注册页面,正在学习html5的朋友可以参考下 代码如下: register.html function play(){ document .getElementById("me ...
- 用vue实现注册页面、登录页面、主页之间跳转并保持登录状态【完整代码】
文章目录 前言 一.页面的简单实现 1.登录页面 2.注册页面 3.主页(显示个人信息) 二.逻辑实现 1.localStorage的使用 2.功能实现 登录 注册 主页 路由配置文件 总结 前言 本 ...
- 使用js完成注册页面验证-注册有返回值的onsubmit事件函数
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title>注册页 ...
- 从0开始写Vue项目-Vue页面主体布局和登录、注册页面
1.从0开始写Vue项目-环境和项目搭建_慕言要努力的博客-CSDN博客 2. 从0开始写Vue项目-Vue2集成Element-ui和后台主体框架搭建_慕言要努力的博客-CSDN博客 一.主体布局 ...
- JavaScript实现注册页面的表单验证
基于javaweb的学习以及为后面做项目做基础,其次参考资料做了些琢磨来实现这个登录界面的注册的验证,下面是效果图(顺便附加素材) 下面是代码展示 1.注册界面register.html <!D ...
- PHP登录与注册页面简单实现（包含数据库验证）（包含数据库）
log.php(登录主界面) 由于是简单的页面,登录页面只做了数据库验证,其实有条件也可以加上邮箱验证和验证码验证. <!doctype html> <html> <he ...
- 原生JavaScript实现登录注册前端验证
原生JavaScript实现登录注册前端验证 功能:实现一个简单的前端登录页面的验证, 废话不多说,直接上代码... 登录窗口代码段... //html <div class="log ...
最新文章
- RDKit：计算不同分子或构象之间的RMSD
- 新的服务器装Ubuntu系统（如何在windows下制作启动盘以及如何安装Ubuntu系统）
- HTML基础（四）：注释、URL参数、访问路径、图片地图
- python数字类型-Python数字类型及其操作
- Javaamp;amp;(面试题)初始化顺序总结
- linux npm安装_怎样在Linux上开发vue项目
- 单链表的创建示意图, 显示单向链表的分析
- innodb_monitor
- android WebView详解，常见漏洞详解和安全源码（上）
- 《入门经典》——6.24
- linux 下运行 tomcat
- 郎朗钢琴课独家上线知乎 手把手带你开启钢琴之路
- Keras过拟合相关解决办法
- java中map类型_Java中Map类型遍历的两种方式对比
- android webview缩放功能,在Android WebView中启用/禁用缩放
- 微信小程序富文本插件WxParse使用
- java计算机毕业设计随心淘网管理系统源代码+数据库+系统+lw文档
- 这十本书有望成为第四届橙瓜网络文学奖年度十大玄幻作品！
- 12，verilog移位操作
- visual studio 2017 安装离线MSDN