JavaWeb网上图书商城完整项目--day02-10.提交注册表单功能之页面实现

1、当从服务器返回的注册错误信息的时候，我们在注册界面需要将错误信息显示出来

我们需要修改regist.jsp页面的代码：其中error是一个haspmap，c标签对map的属性可以直接使用

${errors.loginname}这种形式
复制代码
<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
    <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!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="<c:url value='/jsps/css/user/regist.css'/>">
<script type="text/javascript" src="<c:url value='/jquery/jquery-1.5.1.js'/>"></script>
<script type="text/javascript" src="<c:url value='/jsps/js/user/regist.js'/>"></script>
</head>
<body>
<div id="divMain">
<div id="divTitle"><span id="spanTitle">新用户注册</span></div>
<div id="divBoby">
<form action="/goods/UserServlet" method="post" id="registForm">
<input  type="hidden" name="method" value="regist"/>
<table id="tableForm">
<tr>
<td class="tdText">用户名：</td>
<td class="tdInput"><input class="inputClass" type="text" name ="loginname" id="loginname"/></td>
<td class="tdError"><label class="errorClass" id="loginnameError">${errors.loginname}</label></td>
</tr>

<tr>
<td class="tdText">登陆密码：</td>
<td class="tdInput"><input class="inputClass" type="password" name ="loginpass" id="loginpass"/></td>
<td class="tdError"><label class="errorClass" id="loginpassError">${errors.loginpass }</label></td>
</tr>

<tr>
<td class="tdText">确认密码：</td>
<td class="tdInput"><input class="inputClass" type="password" name ="reloginrepass" id="reloginrepass"/></td>
<td class="tdError"><label class="errorClass" id="reloginrepassError">${errors.reloginpass }</label></td>
</tr>

<tr>
<td class="tdText">Email：</td>
<td class="tdInput"><input class="inputClass" type="text" name ="email" id="email"/></td>
<td class="tdError"><label class="errorClass" id="emailError">${errors.email }</label></td>
</tr>

<tr>
<td class="tdText">图形验证码：</td>
<td class="tdInput"><input class="inputClass" type="text" name ="verifyCode" id="verifyCode"/></td>
<td class="tdError"><label class="errorClass" id="verifyCodeError">${errors.verifyCode }</label></td>
</tr>

<tr>
<td class="tdText"></td>
<td class="tdInput"><div id="divVerifyCode"><img id="imgVerifyCode" src="<c:url value='/VerifyCodeServlet'/>"></div></td>
<td class="tdError"><label ><a href="javascript:changeVerifyCode()">换一张</a></label></td>
</tr>


<tr>
<td class="tdText"></td>
<td class="tdInput"><input  type="image"  src="<c:url value='/images/regist1.jpg'/>" id="submitBtn"/></td>
<td class="tdError"><label></label></td>
</tr>


</table>
</form>
</div>
</div>
</body>
</html>
复制代码

我们应该实现下面的功能：

当用户输错信息之后，在regist.jsp现在错误信息的同时，已经显示用户以前填写的信息，如何实现了，用户提交了参数，我们已经将参数保存到servlet中，当servlet检测用户参数失败的时候，servlet除了保存错误信息之外，还应该保存用户的信息，然后跳转到regsit.jsp界面，除了显示错误信息之外，还显示用户以前填写的信息，

所以servlet应该增加保存用户信息的功能。

复制代码
package com.weiyuan.goods.user.web.servlet;

import java.io.IOException;
import java.util.Map;

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 org.apache.commons.collections.map.HashedMap;

import com.weiyuan.goods.user.domian.User;
import com.weiyuan.goods.user.service.UserService;

import cn.itcast.commons.CommonUtils;
import cn.itcast.servlet.BaseServlet;

/**
 * Servlet implementation class UserServlet
 */
@WebServlet("/UserServlet")
public class UserServlet extends BaseServlet{
    private static final long serialVersionUID = 1L;
    private UserService service = new UserService();
    /*
     * 用户注册页面使用ajax校验/*
     * 用户注册页面使用ajax校验用户名会调用该方法
     * *会调用该方法
     * */
    public String validateLoginname(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        // TODO Auto-generated method stub
        //首先获得用户上传的用户名
        String loginName = request.getParameter("loginname");
        boolean  flag = service.ajaxValidateLoginName(loginName);
        response.getWriter().print(flag);
        return null;
    }
    /*
     * 用户注册页面使用ajax校验邮箱会调用该方法
     * */
    public String validateEmail(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        // TODO Auto-generated method stub
       //获得用户上传的emai
    
        String email = request.getParameter("email");
        System.out.println("validateEmail is called"+email);
        boolean  flag = service.ajaxValidateEmail(email);
        response.getWriter().print(flag);
        return null;
    }
    
    /*
     * 用户注册页面使用ajax校验验证码会调用该方法
     * */
    public String validateVerifyCode(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        // TODO Auto-generated method stub
         //获得用户上传的verfycode
        String verifyCode  = request.getParameter("verifyCode");
        //获得session中保存的验证码
        String sessionCode = (String) request.getSession().getAttribute("vCode");
        //二者进行比较看是否相等
        System.out.println("validateVerifyCode is called"+verifyCode+":"+sessionCode);
        boolean  flag = sessionCode.equalsIgnoreCase(verifyCode);
        response.getWriter().print(flag);
        return null;
    }
    
    /*
     * 当用户从邮箱点击的激活的时候会调用该方法，并且把激活码传递过来
     * 
     * */
    public String activation(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        // TODO Auto-generated method stub
        System.out.println("activation is called");
        
        return null;
    }
    
    
    /*
     * 当用户注册的时候会调用该方法
     * 
     * */
    public String regist(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        // TODO Auto-generated method stub
        System.out.println("activation is called");
        
        //1、将请求的参数封装成User对象
                User user = CommonUtils.toBean(request.getParameterMap(), User.class);
                //2 、对传递过来的参数进行校验，把错误的信息封装到一个hashMap中
                  Map errors = validateParams(user, request);
                  if(errors.size() > 0){//说明参数错误，跳转到注册界面提示用户输入的参数有误
                      request.setAttribute("errors", errors);    
                      request.setAttribute("user", user);
                      return "f:/jsps/user/regist.jsp";
                  }
                 service.addUser(user);
                 request.setAttribute("code", "success");
                 request.setAttribute("msg", "用户注册成功，请马上到邮箱进行激活");
                  return "f:/jsps/msg.jsp";
          
    }
    
    
    public Map validateParams(User user,HttpServletRequest request){
        Map<String, String> map  = new HashedMap();
        //校验用户名
        String loginName = user.getLoginname();
        if(loginName == null || loginName.isEmpty()){
            map.put("loginname", "用户名不能为空");
        }
        if(loginName.length() < 3 || loginName.length() > 20){
            map.put("loginname", "用户名长度应该在3到20之间");
        }
        //校验用户名是否注册
        if(service.ajaxValidateLoginName(loginName)){
            map.put("loginname", "用户名已经被注册");
        }
        
        //检查登陆密码
        String loginpass = user.getLoginpass();
        if(loginpass == null || loginpass.isEmpty()){
            map.put("loginpass", "登陆密码不能为空");
        }
        if(loginpass.length() < 3 || loginpass.length() > 20){
            map.put("loginname", "登陆密码的长度应该在3到20之间");
        }
        
        //检查确认密码的信息
        //检查登陆密码
        String reloginpass = user.getReloginpass();
        if(reloginpass == null || reloginpass.isEmpty()){
            map.put("reloginpass", "登陆密码不能为空");
        }
        if(reloginpass.length() < 3 || reloginpass.length() > 20){
            map.put("reloginpass", "登陆密码的长度应该在3到20之间");
        }
        if(!reloginpass.equalsIgnoreCase(loginpass)){
            map.put("reloginpass", "两次输入的密码不一样");
        }
        
        //检查邮箱
        String email = user.getEmail();
        if(email == null || email.isEmpty()){
            map.put("email", "登陆邮箱不能为空");
        }
        //检查邮箱的格式是否正确
        if(!email.matches("^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((\\.[a-zA-Z0-9_-]{2,3}){1,2})$")){
            map.put("email", "邮箱格式不正确");
        }
        
        
        //检查验证码是否相等
        String verifyCode = user.getVerifyCode();
        //获得session中保存的验证码
        String sessionCode =(String) request.getSession().getAttribute("vCode");
        if(!verifyCode.equalsIgnoreCase(sessionCode)){
            map.put("verifyCode", "验证码不正确");
        }
        
        return map;
        
        
        
    }


}
复制代码

在jsp增加用户显示以前记录的信息

复制代码
<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
    <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!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="<c:url value='/jsps/css/user/regist.css'/>">
<script type="text/javascript" src="<c:url value='/jquery/jquery-1.5.1.js'/>"></script>
<script type="text/javascript" src="<c:url value='/jsps/js/user/regist.js'/>"></script>
</head>
<body>
<div id="divMain">
<div id="divTitle"><span id="spanTitle">新用户注册</span></div>
<div id="divBoby">
<form action="/goods/UserServlet" method="post" id="registForm">
<input  type="hidden" name="method" value="regist"/>
<table id="tableForm">
<tr>
<td class="tdText">用户名：</td>
<td class="tdInput"><input class="inputClass" type="text" name ="loginname" id="loginname" value="${user.loginname}"/></td>
<td class="tdError"><label class="errorClass" id="loginnameError">${errors.loginname}</label></td>
</tr>

<tr>
<td class="tdText">登陆密码：</td>
<td class="tdInput"><input class="inputClass" type="password" name ="loginpass" id="loginpass" value="${user.loginpass}"/></td>
<td class="tdError"><label class="errorClass" id="loginpassError">${errors.loginpass }</label></td>
</tr>

<tr>
<td class="tdText">确认密码：</td>
<td class="tdInput"><input class="inputClass" type="password" name ="reloginpass" id="reloginrepass" value="${user.reloginpass}"/></td>
<td class="tdError"><label class="errorClass" id="reloginrepassError">${errors.reloginpass }</label></td>
</tr>

<tr>
<td class="tdText">Email：</td>
<td class="tdInput"><input class="inputClass" type="text" name ="email" id="email" value="${user.email}" /></td>
<td class="tdError"><label class="errorClass" id="emailError">${errors.email }</label></td>
</tr>

<tr>
<td class="tdText">图形验证码：</td>
<td class="tdInput"><input class="inputClass" type="text" name ="verifyCode" id="verifyCode"/></td>
<td class="tdError"><label class="errorClass" id="verifyCodeError">${errors.verifyCode }</label></td>
</tr>

<tr>
<td class="tdText"></td>
<td class="tdInput"><div id="divVerifyCode"><img id="imgVerifyCode" src="<c:url value='/VerifyCodeServlet'/>"></div></td>
<td class="tdError"><label ><a href="javascript:changeVerifyCode()">换一张</a></label></td>
</tr>


<tr>
<td class="tdText"></td>
<td class="tdInput"><input  type="image"  src="<c:url value='/images/regist1.jpg'/>" id="submitBtn"/></td>
<td class="tdError"><label></label></td>
</tr>


</table>
</form>
</div>
</div>
</body>
</html>
复制代码

我们来看程序运行的效果：

 

posted on   luzhouxiaoshuai  阅读(879)  评论(0)  编辑  收藏  举报

编辑推荐：
· SQL Server 2025 AI相关能力初探
· Linux系列：如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列（二）：开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
阅读排行：
· 阿里最新开源QwQ-32B，效果媲美deepseek-r1满血版，部署成本又又又降低了！
· AI编程工具终极对决：字节Trae VS Cursor，谁才是开发者新宠？
· 开源Multi-agent AI智能体框架aevatar.ai，欢迎大家贡献代码
· Manus重磅发布：全球首款通用AI代理技术深度解析与实战指南
· 被坑几百块钱后，我竟然真的恢复了删除的微信聊天记录！

导航

< 2025年3月 >
日 一 二 三 四 五 六
23 24 25 26 27 28 1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30 31 1 2 3 4 5

统计

点击右上角即可分享
微信分享提示
AI IDE Trae