前期准备

首先在 webapp 目录下引入 JSP 和 CSS、JS、images 等资源文件，资源文件已放入文末的百度网盘链接中。

1. register.jsp 和资源文件直接放在项目目录下，即 webapp 目录下。

2. activeFail.jsp、activeSuccess.jsp 和 registerSuccess.jsp 放在 WEB-INF 下的 regist 文件夹下（WEB-INF 下文件安全，不可直接访问）。

然后打开 register.jsp，在顶部引入 jstl 标签库，以方便我们对后台获取的数据进行条件判断、遍历等操作。

    <%@ page contentType="text/html;charset=UTF-8"%> <%--设置文档类型  防止页面中文乱码--%><%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>         <%--引入jstl核心标签库--%><%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>   <%--引入jstl函数标签库--%><c:set var="ctx" value="${pageContext.request.contextPath }"/>           <%--用于设置变量值和对象属性--%>

在 head 标签内引入 CSS 和 JS 文件：

    <link type="text/css" rel="stylesheet" href="${ctx}/css/dreamland.css"><script type="text/javascript" src="${ctx}/js/jquery.min.js"></script>

在 index.jsp 页面 H2 标签内下加入 a 标签（记得引入 page 标签，设置编码格式，否则会中文乱码）：

    <a href="register.jsp">点我注册</a>

然后运行项目点击链接“点我注册”查看效果：

样式没问题，接下来制作验证码。

验证码

1.在 id 为 nickName_span 的 span 标签下加入 input 输入框和验证码图片（src 属性引入图片）：