jsp实现注册页面，以及如何实现验证码，同时包含jsp异步请求实现用户名查询，防止出现用户名重复。

1.html编写，较为简单，可以从网上复制一些相关的源码。

     注意：复制过来的html文件在转成jsp时，一定要加上jsp编码，不然可能会出现中文乱码。

页面展示：

 

2.定义form表单做提交任务，并为每一个input组件配置name

注册jsp页面：

<form action="register" method="post" class="form1" id="form">
        <div class="div1">
            <div class="input-group input-group-lg">
                <input type="text" id="name" name="name" class="form-control" placeholder="Username" aria-describedby="sizing-addon1" οnblur="fun()">
            </div>
        </div>
        <div class="div1">
            <div class="input-group input-group-lg">
                <input type="text" id="email" name="email" class="form-control" placeholder="Email" aria-describedby="sizing-addon1">
            </div>
        </div>
        <div class="div1">
            <div class="input-group input-group-lg">
                <input type="text" id="password" name="password" class="form-control" placeholder="Password" aria-describedby="sizing-addon1">
            </div>
        </div>
        <div class="div1">
            <div class="input-group input-group-lg">
                <input type="text" id="password1" name="password1" class="form-control" placeholder="RepeatPassword" aria-describedby="sizing-addon1">
            </div>
        </div>
        <div class="div1">
            <div class="input-group input-group-lg">
                <input type="text" name="code" class="form-control" placeholder="CheckCode" aria-describedby="sizing-addon1">
            </div>
        </div>
        <div class="div3">
            <img id="img1" class="img1" src="CheckCode">
        </div>
        <div class="div1">
            <%
                String re=(String) request.getSession().getAttribute("respond");
                if(re!=null){
                    out.write(re);
                }
                request.getSession().setAttribute("respond",null);

            %>
        </div>
        <div class="div1">
            <button type="button" id="btn" class="btn btn-success">注册</button>
        </div>
       <div class="div1">
           <text id="text1"></text>
       </div>

    </form>
</div>

验证码如何实现：

定义一个servlet实现生成随机字符串，并直接转化成图片，返回到jsp页面，同时将验证码传递给

服务器端并进行验证

验证码servlet:

protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    int width=100;
    int height=50;
    char[] a = new char[4];
    BufferedImage image=new BufferedImage(width,height,BufferedImage.TYPE_INT_RGB);
    Graphics g= image.getGraphics();
    g.setColor(Color.pink);
    g.fillRect(0,0,width,height);
    g.setColor(Color.black);
    Random ran=new Random();
    String str="ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz1234567890";

    for(int i=1;i<=4;i++){
        int index=ran.nextInt(str.length());
        g.drawString(String.valueOf(str.charAt(index)),width/5*i,height/2);
        a[i-1]=str.charAt(index);
    }
    HttpSession session = request.getSession();
    String s= String.valueOf(a);
    System.out.println(s);
    session.setAttribute("CheckCode", s);
    /*g.setColor(Color.green);
    for(int i=0;i<20;i++){
        int x1= ran.nextInt(width);
        int x2= ran.nextInt(width);
        int y1=ran.nextInt(height);
        int y2=ran.nextInt(height);
        g.drawLine(x1,y1,x2,y2);
    }
    */

    ImageIO.write(image,"jpg",response.getOutputStream());

}

@Override
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    this.doGet(request,response);
}

3.servlet获取表单中的数据

protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    int width=100;
    int height=50;
    char[] a = new char[4];
    BufferedImage image=new BufferedImage(width,height,BufferedImage.TYPE_INT_RGB);
    Graphics g= image.getGraphics();
    g.setColor(Color.pink);
    g.fillRect(0,0,width,height);
    g.setColor(Color.black);
    Random ran=new Random();
    String str="ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz1234567890";

    for(int i=1;i<=4;i++){
        int index=ran.nextInt(str.length());
        g.drawString(String.valueOf(str.charAt(index)),width/5*i,height/2);
        a[i-1]=str.charAt(index);
    }
    HttpSession session = request.getSession();
    String s= String.valueOf(a);
    System.out.println(s);
    session.setAttribute("CheckCode", s);
    /*g.setColor(Color.green);
    for(int i=0;i<20;i++){
        int x1= ran.nextInt(width);
        int x2= ran.nextInt(width);
        int y1=ran.nextInt(height);
        int y2=ran.nextInt(height);
        g.drawLine(x1,y1,x2,y2);
    }
    */
    ImageIO.write(image,"jpg",response.getOutputStream());
}

@Override
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    this.doGet(request,response);
}

4.利用JDBC实现查询、添加数据。

5.利用session在服务器端返回注册结果，主要分为邮箱已存在、用户名已存在、注册成功这三种。

实现注册servlet:

protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    request.setCharacterEncoding("utf-8");
    String name = request.getParameter("name");
    String email = request.getParameter("email");
    String password = request.getParameter("password");
  
    String check=request.getParameter("code");
    HttpSession session1 = request.getSession();
    session1.setAttribute("respond",null);
    String checkCode = (String) session1.getAttribute("CheckCode");
    if(!Objects.equals(checkCode, check)){
        response.setStatus(302);
        response.setHeader("location","/MyWeb/login.jsp");
        session1.setAttribute("respond","验证码错误");
    }else {
        User user = new User(name, email, password);
        int result = -1;
        try {
            result = user.Register();
        } catch (SQLException e) {
            e.printStackTrace();
        }
        if (result == 0) {
            response.setStatus(302);
            response.setHeader("location", "/MyWeb/Success.jsp");
        } else {
            if(result==1){
                session1.setAttribute("respond","用户名已存在");
            }else if(result==2){
                session1.setAttribute("respond","邮箱已存在");
            }
            response.setStatus(302);
            response.setHeader("location", "/MyWeb/login.jsp");
        }
    }
}

@Override
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    this.doGet(request, response);
}