<link rel="stylesheet" href="<%=request.getContextPath() %>/css/bootstrap.min.css" rel="external nofollow" />
<link rel="stylesheet" href="<%=request.getContextPath() %>/css/bootstrapValidator.min.css" rel="external nofollow" />

<script src="<%=request.getContextPath() %>/js/jquery.min.js"></script>
<script src="<%=request.getContextPath() %>/js/bootstrap.min.js"></script> 
<script src="<%=request.getContextPath() %>/js/bootstrapValidator.min.js"></script>

<form id="registerForm" action="<%=request.getContextPath() %>/UserServlet" method="post">
 <input type="hidden" name="method" value="register"/>
 <div class="form-group">
  <label>用戶名</label>
  <input type="text" class="form-control" name="userName" placeholder="用戶名由2-12位字符組成" />
 </div>

 <div class="form-group">
  <label>郵箱</label>
  <input type="text" class="form-control" name="userEmail" placeholder="郵箱" />
 </div>

 <div class="form-group">
  <label>密碼</label>
  <input type="password" class="form-control" name="userPassword" placeholder="密碼由6-10位字母數(shù)字組成" />
 </div>

 <div class="form-group">
  <label>確認密碼</label>
  <input type="password" class="form-control" name="confirmUserPassword" placeholder="再次輸入密碼" />
 </div>

 <div class="form-group">
  <button type="submit" class="btn btn-primary">注冊</button>
  <input type="reset" class="btn btn-primary" value="重置">
 </div>
</form>

<script type="text/javascript">
 $(function() {
  $('#registerForm').bootstrapValidator({
   message: 'This value is not valid',
   feedbackIcons: {
    valid: 'glyphicon glyphicon-ok',
    invalid: 'glyphicon glyphicon-remove',
    validating: 'glyphicon glyphicon-refresh'
   },
   fields: {
    userName: {
     message: 'The username is not valid',
     validators: {
      notEmpty: {
       message: '用戶名不能為空'
      },
      stringLength: {
       min: 2,
       max: 12,
       message: '用戶名由2-12位字符組成'
      },
      threshold: 2,//有2字符以上才發(fā)送ajax請求
      remote: {//ajax驗證。server result:{"valid",true or false} 
       url: "/ImageShare/UserServlet",
       message: '用戶名已存在,請重新輸入',
       delay: 1000,//ajax刷新的時間是1秒一次
       type: 'POST',
       //自定義提交數(shù)據(jù)，默認值提交當前input value
       data: function(validator) {
       return {
        userName : $("input[name=userName]").val(),
         method : "checkUserName"http://UserServlet判斷調(diào)用方法關(guān)鍵字。
        };
       }
      }
     }
    },
    userEmail: {
     validators: {
      notEmpty: {
       message: '郵箱不能為空'
      },
      emailAddress: {
       message: '輸入不是有效的電子郵件地址'
      }
     }
    },
    userPassword: {
     validators: {
      notEmpty: {
       message: '密碼不能為空'
      },
      stringLength: {
       min: 6,
       max: 10,
       message: '密碼由6-10位字符組成'
      },
      identical: {
       field: 'confirmUserPassword',
       message: '密碼輸入不一致'
      }
     }
    },
    confirmUserPassword: {
     validators: {
      notEmpty: {
       message: '密碼不能為空'
      },
      stringLength: {
       min: 6,
       max: 10,
       message: '密碼由6-10位字符組成'
      },
      identical: {
       field: 'userPassword',
       message: '密碼輸入不一致'
      }
     }
    }
   }
  });
 });
</script>

protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
 // TODO Auto-generated method stub
 request.setCharacterEncoding("UTF-8");
 //0、獲取method判斷執(zhí)行操作
 String method = request.getParameter("method");
 if ("checkUserName".equals(method)) {
 //驗證用戶名是否已存在
 checkUserName(request,response);
 }
}

//根據(jù)用戶名稱查詢，檢查用戶名稱的唯一性（用戶注冊）
public void checkUserName(HttpServletRequest request, HttpServletResponse response) throws IOException{
 response.setCharacterEncoding("UTF-8");
 //返回json數(shù)據(jù)，格式為{"valid",true} 表示合法，驗證通過。{"valid":false} 表示不合法，驗證不通過
 String jsonResult = "";
 String userName = request.getParameter("userName");
 //去數(shù)據(jù)進行唯一性確認
 if (userName!=null) {
 //服務(wù)層service調(diào)用數(shù)據(jù)庫訪問層dao中的searchUserName方法。
 boolean b = UserServiceImpl.searchUserName(userName);
 if (b) {
 //如果名稱存在
 jsonResult = "{\"valid\":false}";
 }else{
 //如果該名稱不存在
 jsonResult = "{\"valid\":true}";
 }
 } else {
 jsonResult = "{\"valid\":false}";
 }
 //response把jsonResult打到前臺
 response.getWriter().write(jsonResult);
}