1、制作注册界面reg.jsp, 在表单输入以下代码，并导入jquery和reg.js和css包,用于输出注册界面

<form action="" method="post" id="regForm">
<div class="reg_div">
    <p>注册</p>
    <ul class="reg_ul">
      <li>
          <span>User：</span>
          <input type="text" name="userName" value="" placeholder="4-8位用户名" class="reg_user">
          <span class="user_hint">
      </li>
      <li>
          <span>Password：</span>
          <input type="password" name="userPassword" value="" placeholder="6-16位密码" class="reg_password">
          <span class="password_hint"></span>
      </li>
      <li>
          <span>Confirm：</span>
          <input type="password" name="confirmPassword" value="" placeholder="确认密码" class="reg_confirm">
          <span class="confirm_hint"></span>
      </li>
      <li>
          <span>Email：</span>
          <input type="text" name="eMail" value="" placeholder="邮箱" class="reg_email">
          <span class="email_hint"></span>
      </li>
      <li>
          <span>Mobile：</span>
          <input type="text" name="mobile" value="" placeholder="手机号" class="reg_mobile">
          <span class="mobile_hint"></span>
      </li>
          <input type="submit" name="sub" class="red_button" value="注册" ></button> 
    </ul>
  </div>
  
</form> 

导包

<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/style.css">
<script src="js/jquery1.11.3.min.js"></script>
<script src="js/JavaScript.js"></script>

2、在JavaScript.js中写入以下代码，用来判断输入信息是否合法并检查用户名是否被占用

// user
var user_Boolean = false;
var password_Boolean = false;
var varconfirm_Boolean = false;
var emaile_Boolean = false;
var Mobile_Boolean = false;
$(function(){
    $(":text[name='userName']").blur(function(){
        $userName=$(this).val();//获得用户名
        $.ajax({
            type:"post",//如果是post改为post即好
            url:"CheckUnameServlet",
            data:"userName="+$userName,
            success:function(msg){
                if(msg=="1"){
                    //alert("hello");
                    $('.user_hint').html("已被注册").css("color","red");
                    user_Boolean = false;
                }else if(msg=="0"){
                    if((/^[a-z0-9_-]{4,8}$/).test($(".reg_user").val())){
                        $('.user_hint').html("✔").css("color","green");
                        user_Boolean = true;
                    }else {
                        $('.user_hint').html("×").css("color","red");
                        user_Boolean = false;
                      } 
                    }
                }
                
            })
        })
        // password
        $('.reg_password').blur(function(){
          if ((/^[a-z0-9_-]{6,16}$/).test($(".reg_password").val())){
            $('.password_hint').html("✔").css("color","green");
            password_Boolean = true;
          }else {
            $('.password_hint').html("×").css("color","red");
            password_Boolean = false;
          }
        });


        // password_confirm
        $('.reg_confirm').blur(function(){
          if (($(".reg_password").val())==($(".reg_confirm").val())){
            $('.confirm_hint').html("✔").css("color","green");
            varconfirm_Boolean = true;
          }else {
            $('.confirm_hint').html("×").css("color","red");
            varconfirm_Boolean = false;
          }
        });


        // Email
        $('.reg_email').blur(function(){
          if ((/^[a-z\d]+(\.[a-z\d]+)*@([\da-z](-[\da-z])?)+(\.{1,2}[a-z]+)+$/).test($(".reg_email").val())){
            $('.email_hint').html("✔").css("color","green");
            emaile_Boolean = true;
          }else {
            $('.email_hint').html("×").css("color","red");
            emaile_Boolean = false;
          }
        });


        // Mobile
        $('.reg_mobile').blur(function(){
          if ((/^1[34578]\d{9}$/).test($(".reg_mobile").val())){
            $('.mobile_hint').html("✔").css("color","green");
            Mobile_Boolean = true;
          }else {
            $('.mobile_hint').html("×").css("color","red");
            Mobile_Boolean = false;
          }
        });


        // click
        $(":submit[name='sub']").click(function(){
          if(user_Boolean && password_Boolean && varconfirm_Boolean && emaile_Boolean && Mobile_Boolean == true){
              $data=$("#regForm").serialize();
                $.ajax({
                    type:"post",
                    url:"RegServlet",
                    data:$data,
                    success:function(msg){
                        $(location).prop('href', 'login.jsp');
                    }
                })
            
          }else {
            alert("请完善信息");
          } 
    })
})

注册页面截图：

reg.jpg

3、在CheckUnameServlet.servlet中写如下代码：

protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
               
        String userName = request.getParameter("userName");
        String sql="select * from login_reg where userName=?";
        
        List<Object> paramList=new ArrayList<Object>();
        paramList.add(userName);
        
        DbHelper dbHelper=new DbHelper();
        List<Map<String, Object>> list = dbHelper.executeQuery(sql, paramList);
        if(list!=null && list.size()>0) {
            response.getWriter().print("1");
        }else {
            response.getWriter().print("0");
        }
    }

4、在RegServlet中写如下代码，用于往数据库添加数据

protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
         //禁用缓存
        response.setHeader("Pragma", "No-cache");
        response.setHeader("Cache-Control", "no-cache");
        response.setDateHeader("Expires", 0);

        response.setContentType("text/html;charset=UTF-8");
        request.setCharacterEncoding("UTF-8");
        
        String userName = request.getParameter("userName");
        String userPassword = request.getParameter("userPassword");
        String eMail = request.getParameter("eMail");
        String mobile = request.getParameter("mobile");
        try {
            Class.forName("com.mysql.jdbc.Driver");
            //2、创建一个链接对象连接数据库
            Connection conn=DriverManager.getConnection("jdbc:mysql://localhost:3306/login_reg","root","123456");
            //3、创建声明对象（语句命令对象）传sql语句到数据库
            Statement statement = conn.createStatement();
            //4、执行sql语句
            String sql = "insert into login_reg(userName,userPassword,eMail,mobile) values('"+userName+"','"+userPassword+"','"+eMail+"','"+mobile+"')";
           
            int i = statement.executeUpdate(sql);
            //5、处理结果
            if(i>0)
                response.sendRedirect("login.jsp");
            else
                response.getWriter().println("注册失败");
            //6、关闭连接
            statement.close();
            conn.close();
        } catch (ClassNotFoundException e) {
            // TODO Auto-generated catch block
            e.printStackTrace();
        } catch (SQLException e) {
            // TODO Auto-generated catch block
            e.printStackTrace();
        }
    }

5、在normalize.css中添加如下代码

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video, button { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; font-family: "寰蒋闆呴粦"; text-decoration: none; color: #000; }
body { min-width: 1200px; }
a:hover { text-decoration: none; }
input { outline: none; }
/* HTML5 display-role reset for older browsers */

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }
body { line-height: 1; }
ol, ul { list-style: none; }
blockquote, q { quotes: none; }
blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }
table { border-collapse: collapse; border-spacing: 0; }

6、在style.css中添加以下代码

body{
  background-color: #333;
}
.reg_div{
  margin:auto;
  width: 500px;
  height: 500px;
  border:1px solid #333;
  border-radius: 5px;
  text-align: center;
  margin-top: 200px;
  background-color: #ffffff;
}
.reg_div p{
  padding: 30px 0px;
  font-size: 30px;
}

.reg_ul{
  width: 100%;
}
.reg_ul li{
  margin: auto;
  overflow: hidden;
  width: 100%;
  margin-top: 10px;
}

.reg_ul li span:nth-of-type(1){
  float: left;
  margin: auto;
  margin-left: 90px;
  margin-top: 10px;
}
.reg_ul li span:nth-of-type(2){
  float: left;
  margin-top: 8px;
  margin-left: 10px;
}
.reg_ul li input{
  float: left;
  width: 228px;
  height: 30px;
  border:1px solid #333;
  border-radius: 3px;
  padding-left: 20px;
  outline:medium;
  margin-left: 10px;
}
.red_button{
  margin:auto;
  color: #ffffff;
  background-color: #333;
  font-size: 16px;
  padding: 10px 60px;
  outline: inherit;
  border-radius: 3px;
  cursor: pointer;
  margin-top: 10px;
}
.reg_ul li:nth-of-type(2) span:nth-of-type(1){
  margin-left: 52px;
}
.reg_ul li:nth-of-type(3) span:nth-of-type(1){
  margin-left: 63px;
}
.reg_ul li:nth-of-type(4) span:nth-of-type(1){
  margin-left: 83px;
}
.reg_ul li:nth-of-type(5) span:nth-of-type(1){
  margin-left: 71px;
}

效果图：

reg1.jpg