设计找回密码页面,为了达到页面的复用,这里设计了两层,一层用来查询账号是否存在,另一层用于修改密码。
<%-- Created by IntelliJ IDEA. User: 龚涵彬 Date: 2024/2/3 Time: 16:43 To change this template use File | Settings | File Templates. --%> <%@ 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); } }
然后就是修改密码界面
<%-- Created by IntelliJ IDEA. User: 龚涵彬 Date: 2024/2/3 Time: 16:41 To change this template use File | Settings | File Templates. --%> <%@ 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>
标签:01,return,23,request,getElementById,2023,msg,import,document From: https://www.cnblogs.com/zhenaifen/p/17983725