2024/02/07
设计找回密码页面，为了达到页面的复用，这里设计了两层，一层用来查询账号是否存在，另一层用于修改密码。
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>找回密码</title>
</head>
<body>
<h1>找回密码</h1>
<div style="text-align: center">
<form action="find-servlet" id="firststep" method="post">
<label for="nameid">请输入你要找回密码的账号:</label><input type="text" name="nameid" id="nameid"><br>
<span id="msg" style="font-size: 12px;color:red">${msg}</span><br>
<input type="button" id="btm" value="确定">
</form>
<script>
document.getElementById("btm").addEventListener("click",function () {
var a=document.getElementById("nameid").value;
if (a.length===0||a.trim()==="")
{
document.getElementById('msg').innerHTML="您的输入不能为空";
return;
}
var b=confirm("确认账号无误？")
if(!b)
{
document.getElementById('msg').innerHTML="您已取消";
return;
}
document.getElementById("firststep").submit();
})
</script>
</div>
</body>
</html>
新增一条数据库查询操作方法
public boolean findCode(Base_InformationBean baseInformationBean) //查找账号
{
DBUtil db=new DBUtil();
Connection conn=db.getConnection();
String sql="select * from hhh where code=?";
try {
PreparedStatement pstm=conn.prepareStatement(sql);
pstm.setString(1,baseInformationBean.getCode());
ResultSet rs=pstm.executeQuery();
if(rs.next())
{
return true;
}
} catch (SQLException e) {
throw new RuntimeException(e);
}
return false;
}
然后是在servlet里的操作和重定向
package com.example.demo;
import bean.Base_InformationBean;
import bean.InfoDAO;
import jakarta.servlet.ServletException;
import jakarta.servlet.annotation.WebServlet;
import jakarta.servlet.http.HttpServlet;
import jakarta.servlet.http.HttpServletRequest;
import jakarta.servlet.http.HttpServletResponse;
import java.io.IOException;
@WebServlet(value = "/find-servlet")
public class FindcodeServlet extends HttpServlet {
private String code;
private Base_InformationBean hhh;
public void doGet(HttpServletRequest request, HttpServletResponse response) throws IOException {
code=request.getParameter("nameid");
hhh=new Base_InformationBean();
hhh.setCode(code);
boolean flag=new InfoDAO().findCode(hhh);
if(!flag)
{
request.setAttribute("msg","该账号不存在，请注册");
try {
request.getRequestDispatcher("findback_pwd.jsp").forward(request,response);
}
catch (ServletException e) {
throw new RuntimeException(e);
}
}else
{
request.setAttribute("code",code);
try {
request.getRequestDispatcher("change_pwd.jsp").forward(request,response);
} catch (ServletException e) {
throw new RuntimeException(e);
}
}
}
public void doPost(HttpServletRequest request, HttpServletResponse response) throws IOException {
response.setContentType("text/html");
doGet(request,response);
}
}
然后就是修改密码界面
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>新密码</title>
</head>
<body>
<div style="text-align: center">
<form action="" method="post" id="change_pwd">
账号：<input type="text" value="${code}" name="nameid" readonly><br>
<label for="pwd1">请输入新密码：</label><input type="password" name="pwd" id="pwd1"><br>
<label for="pwd1">再次确认密码：</label><input type="password" name="p" id="pwd2"><br>
<span id="msg" style="font-size: 12px;color:red">${msg}</span><br><br>
<button type="button" id="btm">确认</button>
</form>
<script>
document.getElementById("btm").addEventListener("click",function () {
var pwd1=document.getElementById("pwd1").value;
var pwd2=document.getElementById("pwd2").value;
if(!is(pwd1))
{
document.getElementById('msg').innerHTML="您的新密码不能为空";
return;
}
if(!is(pwd2))
{
document.getElementById('msg').innerHTML="您再次确认密码不能为空";
return;
}
if(pwd1!==pwd2)
{
document.getElementById('msg').innerHTML="您的两次密码输入不一致";
return;
}
})
function is(s)
{
if (s.length===0||s.trim()==="")
return false;
else return true;
}
</script>
</div>
</body>
</html>
