用户注册实现方案一

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

代码：

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");  // 校验username
	var 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" οnsubmit="return validate()"  
    action="${pageContext.request.contextPath }/user_regist.action">  
	<!-- onblur调用ajaxValidate方法，传递的field为username -->  
        <input type="text" id="username" name="username" class="text" οnblur="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;
}