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