此DEMO包含以下功能
- 登录界面（检验用户密码是否为空）
- 检验登录（检验用户名密码是否匹配+传值到用户界面）
- 注册界面（表单检验+运用Ajax实现用户名唯一性检验并异步刷新提示）
- 检验注册（插入信息到mysql数据库）
登陆界面
登录界面包含了“检验用户名密码是否为空”，下面给出界面代码
loginUI.jsp
<%@ page contentType="text/html;charset=UTF-8" %>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>登录</title>
<link rel="stylesheet" type="text/css" href="css/login.css">
<script src="js/jquery-3.6.0.js" type="text/javascript" charset="utf-8"></script>
<script>
$(document).ready(function(){
$("input").blur(function(){
var $parent = $(this).parent();
$parent.find(".onError").remove();
if ($(this).is("#username")) {
if (this.value==="") {//检验用户名
$parent.append("<span class='onError' style='color: red;font-size: 5px'>用户名不能为空！</span>")
}
}
if ($(this).is("#password")) {
if (this.value==="") {//检验密码
$parent.append("<span class='onError' style='color: red;font-size: 5px'>密码不能为空！</span>")
}
}
});
//如果是空的话，则不能提交
$("form").submit(function(){
$("form input").trigger("blur");
if($(".onError").length>0) return false;
});
});
</script>
</head>
<body>
<section class="forms">
<div class="container">
<div class="forms-grid">
<div class="login">
<strong>欢迎登录</strong>
<form action="#" method="post" class="login-form">
<div class="form">
<div class="form-row">
<label class="form-label">用户名</label>
<label for="username"></label>
<input type="text" class="form-text" id="username" name="username">
</div>
<div class="form-row">
<label class="form-label">密码</label>
<label for="password"></label>
<input type="password" class="form-text" id="password" name="password">
</div>
<div class="form-row bottom">
<a href="registerUI.jsp" class="register">点此注册</a>
</div>
<div class="form-row button-login">
<button type="button" class="btn" style="float: left" onclick="encodeURI(location.href='CheckLogin.jsp?username='+username.value+'&password='+password.value)">用户登录</button>
</div>
<form method="post" action="#">
<button type="button" class="btn" style="float: right" onclick="encodeURI(location.href='CheckAdmin.jsp?username='+username.value+'&password='+password.value)">后台登陆</button>
</form>
</div>
</form>
</div>
</div>
</div>
</section>
</body>
</html>
下面给出登录功能代码
CheckLogin.jsp
<%@ page import="java.sql.*" %>
<%@ page import="java.nio.charset.StandardCharsets" %>
<%@ page contentType="text/html;charset=UTF-8" %>
<html>
<head>
<title>CheckLogin</title>
</head>
<body>
<%
//从登录界面获取用户名和密码
String username=new String(request.getParameter("username").getBytes(StandardCharsets.ISO_8859_1), StandardCharsets.UTF_8);
String pwd=new String(request.getParameter("password").getBytes(StandardCharsets.ISO_8859_1), StandardCharsets.UTF_8);
//加载连接数据库所需的信息
String sDBDriver = "com.mysql.jdbc.Driver";
String conStr = "jdbc:mysql://172.18.97.253:3306/webdb?useSSL=false";
String dbname = "web";
String password = "web";
String usersex;
String headpath;
//连接数据库并进行查询
Connection conn=null;
try {
Class.forName(sDBDriver);
conn = DriverManager.getConnection(conStr, dbname, password);
} catch (ClassNotFoundException | SQLException cnfe) {
cnfe.printStackTrace();
}
if(conn!=null){
String sql="select * from peo19082203 where name='"+username+"' and pwd='"+ pwd + "'";
Statement stmt= null;
try {
stmt = conn.createStatement();
} catch (SQLException e) {
e.printStackTrace();
}
ResultSet rs = null;
try {
assert stmt != null;
rs = stmt.executeQuery(sql);//将查询结果保存到rs里面
} catch (SQLException e) {
e.printStackTrace();
}
try {
assert rs != null;
if(rs.next()){
//在数据库里是将0作为女性，1作为男性，所以这里需要进行一个转换
if(rs.getString("sex").equals("0")){
usersex="男";
}else{
usersex="女";
}
if(rs.getString("photo")==null){//头像
headpath="image/backImg.png";
}else{
headpath=rs.getString("photo");
}
try {
response.sendRedirect("customerUI.jsp?name="+username+"&tel="+rs.getString("tel")+"&sex="+java.net.URLEncoder.encode(usersex, StandardCharsets.UTF_8)+"&path="+headpath);//若用户密码正确，则将信息传给用户界面
} catch (SQLException e) {
e.printStackTrace();
}
}
else{
out.println("<script language='javascript'>alert('用户名或密码错误！');window.location.href='loginUI.jsp';</script>");//若用户名密码不正确则返回登陆界面，并弹出提示“用户名密码错误”
}
} catch (SQLException e) {
e.printStackTrace();
}
}
else{
out.println("<script language='javascript'>alert('数据库连接失败！');window.location.href='loginUI.jsp';</script>");
}
try {
assert conn != null;
conn.close();
} catch (SQLException e) {
e.printStackTrace();
}
%>
</body>
</html>
登录成功
登录失败
注册界面
Ajax实现用户名唯一性检验
registerUI.jsp
<%@ page contentType="text/html;charset=UTF-8" %>
<html>
<head>
<title>Title</title>
<link rel="stylesheet" type="text/css" href="css/login.css">
<script src="js/jquery-3.6.0.js" type="text/javascript" charset="utf-8"></script>
//表单检验
<script>
$(document).ready(function(){
$("input").blur(function(){
var $parent = $(this).parent();
$parent.find(".onError").remove();
if ($(this).is("#username")) {
if (this.value==="") {
$parent.append("<span class='onError' style='color: red;font-size: 5px'>用户名不能为空！</span>")
}
}
if ($(this).is("#password")) {
if (this.value==="") {
$parent.append("<span class='onError' style='color: red;font-size: 5px'>密码不能为空！</span>")
}
if(this.value.length < 6&&this.value.length>0){
$parent.append("<span class='formtips onError' style='color: red;font-size: 5px'>密码长度至少为六位！</span>")
}
}
if ($(this).is("#tel")) {
if (this.value==="") {
$parent.append("<span class='onError' style='color: red;font-size: 5px'>电话不能为空！</span>")
}
if(this.value.length !==11&&this.value.length>0){
$parent.append("<span class='formtips onError' style='color: red;font-size: 5px'>大陆手机电话号码应为11位</span>")
}
}
});
$("form").submit(function(){
$("form input").trigger("blur");
if($(".onError").length>0) return false;
});
});
</script>
//Ajax异步刷新（用户名唯一性检验）
<script type="text/javascript">
var xmlHttpReq=null;
function createRequest(){
if(window.XMLHttpRequest){
xmlHttpReq=new XMLHttpRequest();
}else if(window.ActiveXObject){
xmlHttpReq=new ActiveXObject("Microsoft.XMLHTTP");
}
}
function getBackInfo(){
createRequest();
var username=document.getElementById("username").value;
if(xmlHttpReq!=null){
var url="CheckOnlyName.jsp?username="+username;
xmlHttpReq.open("get",url,true);
xmlHttpReq.onreadystatechange=Result;
xmlHttpReq.send(null);
}else{
alert("请求失败!");
}
}
function Result(){
if(xmlHttpReq.readyState===4){
if(xmlHttpReq.status===200){
document.getElementById("er").innerHTML=xmlHttpReq.responseText;
}else{
alert("请求失败!");
}
}
}
</script>
</head>
<body>
<section class="forms">
<div class="container">
<div class="forms-grid">
<div class="leftColumn">
<div class="login">
<form class="login-form">
<div class="form">
<img src="image/机器人.png" height="368" width="276" alt="图片加载失败">
<h3>同心同德 拯溺救难</h3>
</div>
</form>
</div>
</div>
<div class="login" style="height: 540px;width: 400px">
<strong>注册</strong>
<form action="CheckRegister.jsp" method="post" class="login-form">
<div class="form">
<div class="form-row">
<label class="form-label" style="color: #4d61fc">用户名</label>
<label for="username"></label>
<input onblur="getBackInfo()" type="text" class="form-text" id="username" name="username" placeholder="用户名不可是中文">
<div id="er" style='color: red;font-size: 5px'></div>
</div>
<div class="form-row">
<label class="form-label" style="color: #4d61fc">密码</label>
<label for="password"></label>
<input type="password" class="form-text" id="password" name="password" placeholder="密码长度不得小于6位">
</div>
<div class="form-row">
<label class="form-label" style="color: #4d61fc">电话</label>
<label for="password"></label>
<input type="tel" class="form-text" id="tel" name="tel" placeholder="请输入11位大陆电话号码">
</div>
<div class="sex" >
<label class="form-label" style="float: left;color: #4d61fc">性别</label>
<select name="sex" style="float: right">
<option value="0" style="font-size: 12px;">男</option>
<option value="1" style="font-size: 12px;">女</option>
</select><br/>
</div>
<div class="form-row button-login" >
<button type="submit" class="btn" style="float: left">注册</button>
<button type="reset" class="btn" style="float: right">重置</button>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</section>
</body>
</html>
检验用户名唯一性
CheckOnlyName.jsp
<%@ page import="java.sql.*" pageEncoding="utf-8" %>
<%
String username=request.getParameter("username");
String sql="select name from peo19082203 where name='"+username+"'";
String sDBDriver = "com.mysql.jdbc.Driver";
String conStr = "jdbc:mysql://172.18.97.253:3306/webdb?useSSL=false";
String dbname = "web";
String password = "web";
Connection conn=null;
try {
Class.forName(sDBDriver);
conn = DriverManager.getConnection(conStr, dbname, password);
} catch (ClassNotFoundException | SQLException cnfe) {
cnfe.printStackTrace();
}
if(conn!=null) {
Statement stmt = null;
try {
stmt = conn.createStatement();
} catch (SQLException e) {
e.printStackTrace();
}
ResultSet rs = null;
try {
assert stmt != null;
rs = stmt.executeQuery(sql);
} catch (SQLException e) {
e.printStackTrace();
}
try {
assert rs != null;
if (rs.next()) {
out.println("账号已被注册");
}
} catch (SQLException e) {
e.printStackTrace();
}
}
%>
注册功能
CheckRegister.jsp
<%@ page contentType="text/html;charset=UTF-8" import="java.sql.*"%>
<html>
<head>
<title>CheckRegister</title>
</head>
<body>
<%
//获取注册信息
String username= request.getParameter("username");
String pwd= request.getParameter("password");
String sex= request.getParameter("sex");
String tel= request.getParameter("tel");
//加载连接数据库所需的信息
String sDBDriver = "com.mysql.jdbc.Driver";
String conStr = "jdbc:mysql://172.18.97.253:3306/webdb?useSSL=false";
String dbname = "web";
String password = "web";
Connection conn=null;
try {
Class.forName(sDBDriver);
conn = DriverManager.getConnection(conStr, dbname, password);
} catch (ClassNotFoundException | SQLException cnfe) {
cnfe.printStackTrace();
}
PreparedStatement pStmt = conn.prepareStatement("select * from peo19082203 where name = '" + username + "'");
//首先检验用户是否存在，若存在则不注册
ResultSet rs = pStmt.executeQuery();
try {
if(rs.next()){
out.println("<script language='javascript'>alert('该用户已存在，请重新注册！');window.location.href='registerUI.jsp';</script>");
}
else {
PreparedStatement tmt = null;
try {//插入数据
tmt = conn.prepareStatement("Insert into peo19082203(name,pwd,sex,tel) values('"+username+"','"+pwd+"','"+sex+"','"+tel+"')");
} catch (SQLException e) {
e.printStackTrace();
}
int rst = 0;
try {
assert tmt != null;
rst = tmt.executeUpdate();
} catch (SQLException e) {
e.printStackTrace();
}
if (rst != 0){//注册成功跳转到注册页面
out.println("<script language='javascript'>alert('用户注册成功！');window.location.href='loginUI.jsp';</script>");
}
else{//注册失败跳转到注册页面
out.println("<script language='javascript'>alert('用户注册失败！');window.location.href='registerUI.jsp';</script>");
}
}
} catch (SQLException e) {
e.printStackTrace();
}
try {
conn.close();
} catch (SQLException e) {
e.printStackTrace();
}
try {
pStmt.close();
} catch (SQLException e) {
e.printStackTrace();
}
try {
rs.close();
} catch (SQLException e) {
e.printStackTrace();
}
%>
</body>
</html>
所用到的的css样式在我的资源库中。
2966
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
