用户注册实现方案一

做用户注册功能非常头疼，想要做出某些网站的注册效果但苦于难以实现，经过半天的专研，总算写出点像样的东西来。随着学习的深入，以后还会修改方案，暂时供自己查阅使用。

代码：

1 输入框onblur调用此方法，传递参数field，作用是：后台根据field的类型，对field指定的字段进行校验。

// 输入框onblur调用此方法，传递参数field，作用是：后台根据field的类型，对field指定的字段进行校验。function ajaxValidate(field) {var flag = false;  // 指定字段是否校验成功var username = $.trim($("#username").val());var password = $.trim($("#password").val());var rePassword = $.trim($("#rePassword").val());var email = $.trim($("#email").val());var name = $.trim($("#name").val());var phone = $.trim($("#phone").val());var addr = $.trim($("#addr").val());var vCode = $.trim($("#captcha").val());  // 验证码$.ajax({type: "POST",url: "${pageContext.request.contextPath}/user_registAjax.action",async: false,  // 如果是异步的话，就得不到正确的返回值了。不过官方不推荐同步写法。。data: {"username": username,"password": password,"rePassword": rePassword,"email": email,"name": name,"phone": phone,"addr": addr,"vCode": vCode,"field": field  // 需要校验的字段},success: function(result) {switch(result) {case "00":  // 后台传过来的标识符，用来决定错误字符串$("#usernameSpan").text("用户名为空");$("#usernameSpan").css("color", "red");flag = false;break;case "01":$("#usernameSpan").text("用户名长度不在3-10之间");$("#usernameSpan").css("color", "red");flag = false;break;case "02":$("#usernameSpan").text("用户名已经被注册");$("#usernameSpan").css("color", "red");flag = false;break;case "03":$("#usernameSpan").text("用户名可以使用");$("#usernameSpan").css("color", "green");flag = true;break;case "10":$("#passwordSpan").text("密码为空");$("#passwordSpan").css("color", "red");flag = false;break;case "11":$("#passwordSpan").text("密码长度不在3-10之间");$("#passwordSpan").css("color", "red");flag = false;break;case "12":$("#passwordSpan").text("密码可以使用");$("#passwordSpan").css("color", "green");flag = true;break;case "20":$("#rePasswordSpan").text("两次密码输入不一致");$("#rePasswordSpan").css("color", "red");flag = false;break;case "21":$("#rePasswordSpan").text("两次密码输入一致");$("#rePasswordSpan").css("color", "green");flag = true;break;case "30":$("#emailSpan").text("邮箱为空");$("#emailSpan").css("color", "red");flag = false;break;case "31":$("#emailSpan").text("邮箱不符合规范");$("#emailSpan").css("color", "red");flag = false;break;case "32":$("#emailSpan").text("邮箱可以使用");$("#emailSpan").css("color", "green");flag = true;break;case "40":$("#vCodeSpan").text("验证码为空");$("#vCodeSpan").css("color", "red");flag = false;break;case "41":$("#vCodeSpan").text("验证码不正确");$("#vCodeSpan").css("color", "red");flag = false;break;case "42":$("#vCodeSpan").text("验证码正确");$("#vCodeSpan").css("color", "green");flag = true;break;default:break;}}});return flag;}

2 onsubmit校验，如果return false，则不提交；否则，提交

function validate() {var flag1 = ajaxValidate("username");  // 校验usernamevar flag2 = ajaxValidate("password");var flag3 = ajaxValidate("rePassword");var flag4 = ajaxValidate("email");var flag5 = ajaxValidate("vCode");var flag = flag1 && flag2 && flag3 && flag4 && flag5;  // 所有字段必需同时校验成功return flag;}

3 调用js方法的代码

<!-- onsubmit如果返回false，则不提交；否则，提交 -->  <form id="registerForm" method="post" novalidate="novalidate" onsubmit="return validate()"      action="${pageContext.request.contextPath }/user_regist.action">  <!-- onblur调用ajaxValidate方法，传递的field为username -->          <input type="text" id="username" name="username" class="text" onblur="ajaxValidate('username')">           <!-- 错误提示 -->          <span id="usernameSpan"></span></form> 

4 后台根据field对指定字段进行校验，并返回标识符，决定错误字符串

/** * 使用ajax技术进行注册判断 * @return * @throws IOException  */public String registAjax() throws IOException {HttpServletRequest request = ServletActionContext.getRequest();HttpServletResponse response = ServletActionContext.getResponse();response.setContentType("text/html; charset=UTF-8");System.out.println("field:" + field);System.out.println("user: " + user);switch (field) {case "username":User existUser = userService.findByUserName(user.getUsername());if (user.getUsername().trim().equals("")) {response.getWriter().print("00");  // 用户名为空} else if(user.getUsername().trim().length() < 3 || user.getUsername().trim().length() > 10) {response.getWriter().print("01");  // 用户名长度不在3-10} else if (existUser != null) {response.getWriter().print("02");  // 用户名存在} else {response.getWriter().print("03"); // 用户名可以使用}break;case "password":if (user.getPassword().trim().equals("")) {response.getWriter().print("10");  // 密码为空} else if (user.getPassword().trim().length() < 3 || user.getPassword().trim().length() > 10) {response.getWriter().print("11");  // 密码长度不再3-10} else {response.getWriter().print("12");  // 密码可以使用}break;case "rePassword":if (rePassword.trim().equals("") || !user.getPassword().trim().equals(rePassword)) {response.getWriter().print("20");  // 两次密码输入不一致} else {response.getWriter().print("21");  // 两次密码输入一致}break;case "email":// 邮箱校验String check = "^([a-z0-9A-Z]+[-|\\.]?)+[a-z0-9A-Z]@([a-z0-9A-Z]+(-[a-z0-9A-Z]+)?\\.)+[a-zA-Z]{2,}$";Pattern regex = Pattern.compile(check);Matcher matcher = regex.matcher(user.getEmail());if (user.getEmail().trim().equals("")) {response.getWriter().print("30");  // 邮箱为空} else if (!matcher.matches()) {response.getWriter().print("31");  // 邮箱格式不正确} else {response.getWriter().print("32");  // 邮箱可以使用}break;case "vCode":System.out.println("vCode:" + vCode);if (vCode.trim().equals("")) {response.getWriter().print("40");  // 验证码为空} else if (!vCode.equalsIgnoreCase((String) request.getSession().getAttribute("vCode"))) {response.getWriter().print("41");  // 验证码不正确} else {response.getWriter().print("42");  // 验证码可以使用}break;default:break;}return NONE;}