JavaWeb小工程實戰演練（一）

   好久都沒寫過博客了，本來想着一邊學習，一邊把學習過程中的問題記錄下來寫成博客呢，
應該是沒時間吧。。爲自己懶辯護一下 ԅ(¯﹃¯ԅ) ，剛好暑假來臨了，通過寫這一篇博客，順便總結一下這個學年的一些收穫。

大一下半學期我主要乾了兩件事，其一是編寫了一個聊天室的GUI小程序，其二呢就是寫了這個JavaWeb小項目，應該是在開學的三四周開始接觸的JavaWeb，所以到現在也只是簡單地實現一些功能，等我把JavaWeb學完了，在做一個像樣的項目，不廢話了，先介紹一下這個小項目的具體信息吧。

目的： 編寫一個具有增刪改查的用戶管理系統
用到的工具：IDEA、Navicat、MySQL、Tomcat、Chrome、JDK1.8等。
使用的技術：Servlet、JDBC、Druid連接池、HTML+CSS+JS、BootStrap、JSP等。
設計模式：MVC

網站架構

數據庫表



POJO

User類

package cn.hehewocao.POJO;

import java.util.Date;

public class User {
    private Integer id;
    private String username;
    private String password;
    private String nickname;
    private String sex;
    private String birthday;
    private String phone;
    private String email;
    private String address;
    private String occupation;
    private String describes;

    public User() {
    }

    public User(Integer id, String username, String password, String nickname, String sex, String birthday, String phone, String email, String address, String occupation, String describes) {
        this.id = id;
        this.username = username;
        this.password = password;
        this.nickname = nickname;
        this.sex = sex;
        this.birthday = birthday;
        this.phone = phone;
        this.email = email;
        this.address = address;
        this.occupation = occupation;
        this.describes = describes;
    }

    public User(int id, String username, String password) {
        this.id = id;
        this.username = username;
        this.password = password;
    }

    public User(String username, String password, String phone, String email) {
        this.username = username;
        this.password = password;
        this.phone = phone;
        this.email = email;
    }

    public Integer getId() {
        return id;
    }

    public void setId(int id) {
        this.id = id;
    }

    public String getUsername() {
        return username;
    }

    public void setUsername(String username) {
        this.username = username;
    }

    public String getPassword() {
        return password;
    }

    public void setPassword(String password) {
        this.password = password;
    }

    public String getNickname() {
        return nickname;
    }

    public void setNickname(String nickname) {
        this.nickname = nickname;
    }

    public String getSex() {
        return sex;
    }

    public void setSex(String sex) {
        this.sex = sex;
    }

    public String getBirthday() {
        return birthday;
    }

    public void setBirthday(String birthday) {
        this.birthday = birthday;
    }

    public String getPhone() {
        return phone;
    }

    public void setPhone(String phone) {
        this.phone = phone;
    }

    public String getEmail() {
        return email;
    }

    public void setEmail(String email) {
        this.email = email;
    }

    public String getAddress() {
        return address;
    }

    public void setAddress(String address) {
        this.address = address;
    }

    public String getOccupation() {
        return occupation;
    }

    public void setOccupation(String occupation) {
        this.occupation = occupation;
    }

    public String getDescribes() {
        return describes;
    }

    public void setDescribes(String describe) {
        this.describes = describe;
    }

    @Override
    public String toString() {
        return "User{" +
                "id=" + id +
                ", username='" + username + '\'' +
                ", password='" + password + '\'' +
                ", nickname='" + nickname + '\'' +
                ", sex='" + sex + '\'' +
                ", birthday='" + birthday + '\'' +
                ", phone='" + phone + '\'' +
                ", email='" + email + '\'' +
                ", address='" + address + '\'' +
                ", occupation='" + occupation + '\'' +
                ", describes='" + describes + '\'' +
                '}';
    }
}

Admin類

package cn.hehewocao.POJO;

public class Admin {
    private String id;
    private String administrator;
    private String password;

    public Admin() {
    }

    public Admin(String id, String administrator, String password) {
        this.id = id;
        this.administrator = administrator;
        this.password = password;
    }

    public String getId() {
        return id;
    }

    public void setId(String id) {
        this.id = id;
    }

    public String getAdministrators() {
        return administrator;
    }

    public void setAdministrators(String administrator) {
        this.administrator = administrator;
    }

    public String getPassword() {
        return password;
    }

    public void setPassword(String password) {
        this.password = password;
    }

    @Override
    public String toString() {
        return "Admin{" +
                "id='" + id + '\'' +
                ", administrator='" + administrator + '\'' +
                ", password='" + password + '\'' +
                '}';
    }
}

設計模式

借用一下黑馬的MVC圖，有了設計模式，項目可以這樣創建：

項目目錄：

功能和數據庫設計都有了，那先從最簡單的用戶註冊功能寫起吧 (^._.^)ﾉ

**

用戶信息註冊功能

**
1. 網頁設計：

我個人其實不太會做一些界面好看的網站因此爲了方便和美觀，我在模板之家下了一些網站模板，直接改別人的模板。
這裏分下一波模板下載地址：http://www.cssmoban.com/	（模板之家---都是免費的ԅ(¯﹃¯ԅ)哈哈）

感覺這個模板還可以，那我們就直接拿來修改即可

稍作修改：將網頁加入工作空間，直接放到web目錄下，根據數據庫字段設計表單

2. 後臺代碼設計

爲了防止惡意註冊，所以多加了一個驗證碼功能，因此我們這裏需要兩個servlet去完成註冊這樣的功能。

獲取驗證碼：CheckCodeServlet

package cn.hehewocao.Servlet;

import cn.hehewocao.utils.CaptchaUtil;

import javax.imageio.ImageIO;
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 javax.servlet.http.HttpSession;
import java.awt.image.BufferedImage;
import java.awt.image.RenderedImage;
import java.io.IOException;

@WebServlet("/checkCodeServlet")
public class CheckCodeServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        doPost(req, resp);
    }

    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        req.setCharacterEncoding("utf-8");
        CaptchaUtil cpu = CaptchaUtil.Instance(); //調用驗證碼生成的工具類
        BufferedImage image = cpu.getImage();
        String checkcode = cpu.getString();
        ImageIO.write((RenderedImage) image, "jpg", resp.getOutputStream());//通過response的輸出流
        HttpSession session = req.getSession();
        session.removeAttribute("checkcode");
        session.setAttribute("checkcode", checkcode);//設置session屬性將驗證碼字符串形式存入session中
    }
}

用到的 CaptchaUtil 工具類----->驗證碼生成工具

package cn.hehewocao.utils;
import java.awt.Color;
import java.awt.Font;
import java.awt.Graphics;
import java.awt.image.BufferedImage;
import java.util.Random;
/**
 * 驗證碼生成工具
 * @author HXL
 *
 */
public class CaptchaUtil {
    private BufferedImage image;// 圖像
    private String str;// 驗證碼
    private static char code[] = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ123456789".toCharArray();
    public static final String SESSION_CODE_NAME="code";

    private CaptchaUtil() {
        init();// 初始化屬性
    }

    /*
     * 取得RandomNumUtil實例
     */
    public static CaptchaUtil Instance() {
        return new CaptchaUtil();
    }

    /*
     * 取得驗證碼圖片
     */
    public BufferedImage getImage() {
        return this.image;
    }

    /*
     * 取得圖片的驗證碼
     */
    public String getString() {
        return this.str;
    }

    private void init() {
        // 在內存中創建圖象
        int width = 80, height = 25;
        BufferedImage image = new BufferedImage(width, height, BufferedImage.TYPE_INT_RGB);
        // 獲取圖形上下文
        Graphics g = image.getGraphics();
        // 生成隨機類
        Random random = new Random();
        // 設定背景色
        g.setColor(getRandColor(200, 250));
        g.fillRect(0, 0, width, height);
        // 設定字體
        g.setFont(new Font("Times New Roman", Font.PLAIN, 18));
        // 隨機產生155條幹擾線，使圖象中的認證碼不易被其它程序探測到
        g.setColor(getRandColor(160, 200));
        for (int i = 0; i < 155; i++) {
            int x = random.nextInt(width);
            int y = random.nextInt(height);
            int xl = random.nextInt(12);
            int yl = random.nextInt(12);
            g.drawLine(x, y, x + xl, y + yl);
        }
        // 取隨機產生的認證碼(4位數字)
        String sRand = "";
        for (int i = 0; i < 4; i++) {
            String rand = String.valueOf(code[random.nextInt(code.length)]);
            sRand += rand;
            // 將認證碼顯示到圖象中
            g.setColor(new Color(20 + random.nextInt(110), 20 + random.nextInt(110), 20 + random.nextInt(110)));
            // 調用函數出來的顏色相同，可能是因爲種子太接近，所以只能直接生成
            g.drawString(rand, 13 * i + 6, 16);
        }
        // 賦值驗證碼
        this.str = sRand;

        // 圖象生效
        g.dispose();
        // ByteArrayInputStream input = null;
        // ByteArrayOutputStream output = new ByteArrayOutputStream();
        // try {
        // ImageOutputStream imageOut = ImageIO.createImageOutputStream(output);
        // ImageIO.write(image, "JPEG", imageOut);
        // imageOut.close();
        // input = new ByteArrayInputStream(output.toByteArray());
        // } catch (Exception e) {
        // System.out.println("驗證碼圖片產生出現錯誤：" + e.toString());
        // }
        // this.image = input
        this.image = image;/* 賦值圖像 */
    }

    /*
     * 給定範圍獲得隨機顏色
     */
    private Color getRandColor(int fc, int bc) {
        Random random = new Random();
        if (fc > 255)
            fc = 255;
        if (bc > 255)
            bc = 255;
        int r = fc + random.nextInt(bc - fc);
        int g = fc + random.nextInt(bc - fc);
        int b = fc + random.nextInt(bc - fc);
        return new Color(r, g, b);
    }
}

註冊用戶：RegisterServlet

package cn.hehewocao.Servlet;

import cn.hehewocao.POJO.User;
import cn.hehewocao.Service.UserService;
import cn.hehewocao.Service.UserServiceImp;
import cn.hehewocao.utils.OverwritePopulate;
import org.apache.commons.beanutils.BeanUtils;
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 javax.servlet.http.HttpSession;
import java.io.IOException;
import java.lang.reflect.InvocationTargetException;
import java.util.Map;

@WebServlet("/registerServlet")
public class RegisterServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        this.doPost(req, resp);
    }

    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {

        req.setCharacterEncoding("utf-8");
        HttpSession session = req.getSession();
        String checkcode = req.getParameter("checkcode");
        System.out.println(checkcode + ":" + (String) session.getAttribute("checkcode"));
        String username = req.getParameter("username");//封裝User對象 本來想用BeanUtils類來分裝的，但好像因爲有個日期類型的數據，導致一直報		錯。。沒辦法只能自己動手封裝了。。。
        String password = req.getParameter("password");
        String nickname = req.getParameter("nickname");
        String sex = req.getParameter("sex");
        String birthday = req.getParameter("birthday");
        String phone = req.getParameter("phone");
        String email = req.getParameter("email");
        String address = req.getParameter("address");
        String occupation = req.getParameter("occupation");
        String describe = req.getParameter("describe");
        if ("".equals(username)) {
            username = null;
        }
        if ("".equals(password)) {
            password = null;
        }
        if ("".equals(nickname)) {
            nickname = null;
        }
        if ("".equals(sex)) {
            sex = null;
        }
        if ("".equals(birthday)) {
            birthday = null;
        }
        if ("".equals(phone)) {
            phone = null;
        }
        if ("".equals(email)) {
            email = null;
        }
        if ("".equals(address)) {
            address = null;
        }
        if ("".equals(occupation)) {
            occupation = null;
        }
        if ("".equals(describe)) {
            describe = null;
        }
        User user = new User(0, username, password, nickname, sex, birthday, phone, email, address, occupation, describe);
        Map<String, String[]> parameterMap = req.getParameterMap();
        System.out.println(user);
        if (checkcode==null || !checkcode.equalsIgnoreCase((String) session.getAttribute("checkcode") )) {//驗證碼輸入有誤，將錯誤信息存入request，轉發到register.jsp
            session.removeAttribute("checkcode");//刪除驗證碼，每個驗證碼只允許使用一次
            req.setAttribute("register_msg", "驗證碼輸入有誤！");
            req.setAttribute("register_submit", user);  // 將user也存入request，爲了方便回顯數據
            req.getRequestDispatcher("/register.jsp").forward(req, resp);
            return;
        } else {
            UserService us = new UserServiceImp();
            us.addUser(user);
            session.removeAttribute("checkcode");
            req.setAttribute("success_msg","恭喜您，賬號註冊成功，立即登錄吧！");
            req.getRequestDispatcher("/login.jsp").forward(req, resp);//轉發到登錄界面
        }
    }
}

UserServiceImpl類

package cn.hehewocao.Service;

import cn.hehewocao.Dao.UserDaoImp;
import cn.hehewocao.POJO.PageBean;
import cn.hehewocao.POJO.User;
import cn.hehewocao.Dao.UserDao;
import java.util.List;
import java.util.Map;

public class UserServiceImp implements UserService {
    @Override
    public void addUser(User user) { //實現UserService接口中的addUser方法
        UserDao ud = new UserDaoImp();//調用UserDaoImpl中的方法
        ud.addUser(user);
    }

UserDaoImp類

package cn.hehewocao.Dao;
import cn.hehewocao.JDBC.DBCPUtils;
import cn.hehewocao.POJO.User;
import cn.hehewocao.utils.JDBCUtils;
import org.apache.commons.dbutils.QueryRunner;
import org.apache.commons.dbutils.handlers.BeanListHandler;
import org.springframework.jdbc.core.BeanPropertyRowMapper;
import org.springframework.jdbc.core.JdbcTemplate;
import java.sql.SQLException;
import java.time.temporal.Temporal;
import java.util.ArrayList;
import java.util.List;
import java.util.Map;

public class UserDaoImp implements UserDao 
    @Override
    public void addUser(User user) {

        String sql = "insert into user  values ( null, ? , ? , ? , ? , ? , ? , ? , ? , ? , ?)";
        JdbcTemplate jdbcTemplate = new JdbcTemplate(JDBCUtils.getDateSource()); 
        jdbcTemplate.update(sql, user.getUsername(), user.getPassword(), user.getNickname(), user.getSex(), user.getBirthday(),
                user.getPhone(), user.getEmail(), user.getAddress(), user.getOccupation(), user.getDescribes());

    }

用到的JDBCUtils類

package cn.hehewocao.JDBC;

import org.apache.commons.dbcp.BasicDataSource;
import java.io.InputStream;
import java.util.Properties;

public class DBCPUtils {

    private static BasicDataSource bds = new BasicDataSource();

    static{
        try {
            Properties properties = new Properties();
            InputStream is = DBCPUtils.class.getClassLoader().getResourceAsStream("JDBCconfig.properties");
            properties.load(is);//加載配置文件
            bds.setDriverClassName(properties.getProperty("driver"));
            bds.setUrl(properties.getProperty("url"));
            bds.setUsername(properties.getProperty("username"));
            bds.setPassword(properties.getProperty("password"));
            bds.setInitialSize(10);
            bds.setMaxActive(8);
            bds.setMaxIdle(2);
            bds.setMinIdle(1);

        }catch (Exception e){
            e.printStackTrace();
        }

    }
    public static BasicDataSource getDateSource(){
        return bds;
    }
}

3. JSP頁面設計
jsp頁面中獲取request中保存的數據，主要完成回顯的功能。

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html lang="en">

<head>

    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>註冊我們的網站</title>

    <!-- CSS -->
    <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Roboto:400,100,300,500">
    <link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="assets/font-awesome/css/font-awesome.min.css">
    <link rel="stylesheet" href="assets/css/form-elements.css">
    <link rel="stylesheet" href="assets/css/style.css">

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]-->
    <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
    <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <!--[endif]-->

    <!-- Favicon and touch icons -->
    <link rel="shortcut icon" href="assets/ico/favicon.png">
    <link rel="apple-touch-icon-precomposed" sizes="144x144" href="assets/ico/apple-touch-icon-144-precomposed.png">
    <link rel="apple-touch-icon-precomposed" sizes="114x114" href="assets/ico/apple-touch-icon-114-precomposed.png">
    <link rel="apple-touch-icon-precomposed" sizes="72x72" href="assets/ico/apple-touch-icon-72-precomposed.png">
    <link rel="apple-touch-icon-precomposed" href="assets/ico/apple-touch-icon-57-precomposed.png">


    <style>

        body {

            background-image: url("assets/img/backgrounds/2.jpg");
        }

    </style>


</head>

<body>

<!-- Top content -->
<div class="top-content">

    <div class="inner-bg">
        <div class="container">
            <div class="row">
                <div class="col-sm-6 col-sm-offset-3 form-box">
                    <div class="form-top">
                        <div class="form-top-left">
                            <h3>註冊我們的網站</h3>
                            <p>輸入您的用戶名、密碼和郵箱：</p>
                        </div>
                        <div class="form-top-right">
                            <i class="fa fa-lock"></i>
                        </div>
                    </div>
                    <div class="form-bottom">
                        <form role="form" action="${pageContext.request.contextPath}/registerServlet" method="post"
                              class="login-form">

                            <div class="form-group">
                                <label class="sr-only">Username</label>
                                <input type="text" name="username" placeholder="用戶名(必填)..." value="${register_submit.username}"
                                       class="form-username form-control" id="username">
                            </div>

                            <div class="form-group">
                                <label class="sr-only">Password</label>
                                <input type="password" name="password" placeholder="密碼(必填)..."
                                       class="form-password form-control" id="password">
                            </div>

                            <div class="form-group">
                                <label class="sr-only">Repassword</label>
                                <input type="password" name="repassword" placeholder="再次輸入密碼(必填)..."
                                       class="form-password form-control" id="repassword">
                            </div>

                            <div class="form-group">
                                <label class="sr-only">Email</label>
                                <input type="text" name="email" placeholder="郵箱(必填)..." value="${register_submit.email}"
                                       class="form-username form-control" id="email">
                            </div>

                            <div class="form-group">
                                <label class="sr-only">手機號</label>
                                <input type="text" name="phone" placeholder="手機號(必填)..." value="${register_submit.phone}"
                                       class="form-username form-control" id="phone">
                            </div>


                            <div class="form-group">
                                <label class="sr-only">暱稱</label>
                                <input type="text" name="nickname" placeholder="暱稱..." value="${register_submit.nickname}"
                                       id="nickname" style="height: 50px;width: 100%">
                            </div>

                            <div class="form-group">
                                <label class="sr-only">性別</label>
                                <select class="form-control" name="sex" id="sex" value="${register_submit.sex}"
                                        style="height: 50px;border: solid #d5d5d5;background-color: #FFFAFA">
                                    <option <c:if test="${register_submit.sex == '男'}">selected</c:if>>男</option>
                                    <option <c:if test="${register_submit.sex == '女'}">selected</c:if>>女</option>
                                </select>
                            </div>

                            <div class="form-group"
                                 style="width: 40%;float: left;height: 50px;border: solid #d5d5d5;background-color: #FFFAFA">
                                <p style="font-size: medium;font-weight: normal;margin-top: 8px;margin-left: 20px;">
                                    生日...</p>
                            </div>
                            <div style="width: 50%;height:50px;float: left;margin-left: 5%">
                                <input type="date" name="birthday" id="birthday" value="${register_submit.birthday}"
                                       style="border: solid #d5d5d5;height: 50px;background-color: #FFFAFA;text-align: center">
                            </div>

                            <div class="form-group">
                                <label class="sr-only">所在省份</label>
                                <select class="form-control" name="address" id="address"
                                        style="height: 50px;border: solid #d5d5d5;background-color: #FFFAFA">
                                    <option <c:if test="${register_submit.address == '北京'}">selected</c:if>>北京</option>
                                    <option <c:if test="${register_submit.address == '天津'}">selected</c:if>>天津</option>
                                    <option <c:if test="${register_submit.address == '河北'}">selected</c:if>>河北</option>
                                    <option <c:if test="${register_submit.address == '山西'}">selected</c:if>>山西</option>
                                    <option <c:if test="${register_submit.address == '內蒙古'}">selected</c:if>>內蒙古</option>
                                    <option <c:if test="${register_submit.address == '遼寧'}">selected</c:if>>遼寧</option>
                                    <option <c:if test="${register_submit.address == '吉林'}">selected</c:if>>吉林</option>
                                    <option <c:if test="${register_submit.address == '黑龍江'}">selected</c:if>>黑龍江</option>
                                    <option <c:if test="${register_submit.address == '上海'}">selected</c:if>>上海</option>
                                    <option <c:if test="${register_submit.address == '江蘇'}">selected</c:if>>江蘇</option>
                                    <option <c:if test="${register_submit.address == '浙江'}">selected</c:if>>浙江</option>
                                    <option <c:if test="${register_submit.address == '安徽'}">selected</c:if>>安徽</option>
                                    <option <c:if test="${register_submit.address == '福建'}">selected</c:if>>福建</option>
                                    <option <c:if test="${register_submit.address == '江西'}">selected</c:if>>江西</option>
                                    <option <c:if test="${register_submit.address == '山東'}">selected</c:if>>山東</option>
                                    <option <c:if test="${register_submit.address == '河南'}">selected</c:if>>河南</option>
                                    <option <c:if test="${register_submit.address == '湖北'}">selected</c:if>>湖北</option>
                                    <option <c:if test="${register_submit.address == '湖南'}">selected</c:if>>湖南</option>
                                    <option <c:if test="${register_submit.address == '廣東'}">selected</c:if>>廣東</option>
                                    <option <c:if test="${register_submit.address == '廣西'}">selected</c:if>>廣西</option>
                                    <option <c:if test="${register_submit.address == '海南'}">selected</c:if>>海南</option>
                                    <option <c:if test="${register_submit.address == '重慶'}">selected</c:if>>重慶</option>
                                    <option <c:if test="${register_submit.address == '四川'}">selected</c:if>>四川</option>
                                    <option <c:if test="${register_submit.address == '貴州'}">selected</c:if>>貴州</option>
                                    <option <c:if test="${register_submit.address == '雲南'}">selected</c:if>>雲南</option>
                                    <option <c:if test="${register_submit.address == '西藏'}">selected</c:if>>西藏</option>
                                    <option <c:if test="${register_submit.address == '陝西'}">selected</c:if>>陝西</option>
                                    <option <c:if test="${register_submit.address == '甘肅'}">selected</c:if>>甘肅</option>
                                    <option <c:if test="${register_submit.address == '青海'}">selected</c:if>>青海</option>
                                    <option <c:if test="${register_submit.address == '寧夏'}">selected</c:if>>寧夏</option>
                                    <option <c:if test="${register_submit.address == '新疆'}">selected</c:if>>新疆</option>
                                    <option <c:if test="${register_submit.address == '港澳臺'}">selected</c:if>>港澳臺</option>

                                </select>
                            </div>

                            <div class="form-group">
                                <label class="sr-only">職業</label>
                                <input type="text" name="occupation" placeholder="職業..." value="${register_submit.occupation}"
                                       style="height: 50px;width: 100%" id="occupation">
                            </div>

                            <div class="form-group">
                                <label class="sr-only">個人說明</label>
                                <textarea style="width: 100%" name="describe" placeholder="個人說明..." rows="3"
                                          id="describes"><%--<c:if test="${not empty register_submit.describes}">${register_submit.describes}</c:if>--%>
                                </textarea>
                            </div>


                            <div class="form-group" style="width: 60%;float: left">
                                <label class="sr-only">驗證碼</label>
                                <input type="text" name="checkcode" placeholder="驗證碼(必填)..."
                                       class="form-username form-control" id="checkcode">
                            </div>

                            <div style="width: 30%;height:50px;float: left;border: solid #d5d5d5;margin-left: 5%">
                                <img src="${pageContext.request.contextPath}/checkCodeServlet" id="checkImage"
                                     style="width: 100%;height: 100%" onclick="changeCheckImage()">
                            </div>

                            <button type="submit" class="btn" id="btn">註冊</button>

                        </form>

                    </div>
                </div>
            </div>
            <div class="row">
                <p style="color: red">${pageContext.request.getAttribute("register_msg")}</p><br>
                <p><a href="login.jsp" style="color: white">前往登錄</a></p>
            </div>
            <div class="row">
                <div class="col-sm-6 col-sm-offset-3 social-login">
                    <h3>...or login with:</h3>
                    <div class="social-login-buttons">
                        <a class="btn btn-link-2" href="#">
                            <i class="fa fa-facebook"></i> Facebook
                        </a>
                        <a class="btn btn-link-2" href="#">
                            <i class="fa fa-twitter"></i> Twitter
                        </a>
                        <a class="btn btn-link-2" href="#">
                            <i class="fa fa-google-plus"></i> Google Plus
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>

</div>

<div class="row">
    <p>Create By BOOM : [email protected]</p>
</div>

<!-- Javascript -->
<script src="assets/js/jquery-1.11.1.min.js"></script>
<script src="assets/bootstrap/js/bootstrap.min.js"></script>
<script src="assets/js/jquery.backstretch.min.js"></script>


<script>

    function checkUsernaem(username) {
        var flag = true;
        if (username.length == 0) {
            alert("用戶名不能爲空！");
            flag = false;
            return flag;
        }
        var regexp = /^[a-zA-Z]{6,20}/;
        if (!regexp.test(username)) {
            alert("非法的用戶名！用戶名必須是以字母開頭，只含字母的6-20位字母組合！");
            flag = false
        }
        return flag;
    }

    function checkPassword(password, repassword) {
        var flag = true;

        if (!(password.length >= 6 && password.length <= 20) || password.length == 0) {
            alert("密碼必須是6-20位的字符！");
            flag = false;
            return flag;
        }
        if (password == username) {
            alert("密碼不能和賬號一樣！");
            flag = false;
            return flag;
        }

        if (password != repassword) {
            alert("兩次輸入的密碼不一致！");
            flag = false;
            return flag;
        }

        return flag;
    }

    function checkEmail(email) {
        var flag = true;
        if (email.indexOf("@") == -1 || email.length == 0) {
            alert("非法的郵箱地址！");
            flag = false;
        }
        return flag;
    }

    function checkPhone(phone) {
        var flag = true;
        var phoneNumReg = /^1[3456789]\d{9}$/;
        if (!phoneNumReg.test(phone) || phone.length == 0) {
            alert("請輸入正確的手機號！");
            flag = false;
        }
        return flag;
    }

    function checkCode(checkcode) {
        var flag = true;
        if (checkcode.length == 0) {
            alert("驗證碼不能爲空！");
            flag = false;
        }
        return flag;
    }


    function check() {
        var username = document.getElementById("username").value;
        var password = document.getElementById("password").value;
        var repassword = document.getElementById("repassword").value;
        var email = document.getElementById("email").value;
        var phone = document.getElementById("phone").value;
        var checkcode = document.getElementById("checkcode").value;
        if (checkUsernaem(username) && checkPassword(password, repassword) && checkEmail(email) && checkPhone(phone) && checkCode(checkcode)) {
            return true;
        } else {
            return false;
        }
    }

    var submit = document.getElementById("btn").onclick = function (ev) {
        return check();
    }

    //鼠標點擊切換驗證碼
    function changeCheckImage() {
        var checkImage = document.getElementById("checkImage");
        var date = new Date();
        var time = date.getTime();
        checkImage.setAttribute("src", "${pageContext.request.contextPath}/checkCodeServlet?" + time);//添加時間戳，防止瀏覽器緩存圖片
    }

    document.getElementById("describes").value = "${register_submit.describes}";

</script>


</body>

</html>

Jar包

好了，到此就完成了註冊用戶的功能。
源碼在我的GitHub上：[email protected]:hehewocao00544/JavaEE.git
或者CSDN下載：https://download.csdn.net/download/qq_42080839/11368626