<%@ page pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html><head><meta content="text/html; charset=UTF-8" http-equiv="Content-Type" />
<title>使用jQuery验证用户名是否存在，达到局部刷新的效果</title>
<script src="${basePath}/js/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
//聚焦时触发的事件
$("#loginname").focus(function(){
$("#msg").html("");
});
//点击按钮时触发事件
$("#checkLoginname").click(function(){
var loginname=$("#loginname").val().replace(/\s/g,‘‘);//去除头尾空格
if(loginname==‘‘){
$("#msg").html("用户名不能为空!");
$("#loginname").val("");
return false;
}
if(loginname.length>20){
$("#msg").html("用户名超过长度!");
return false;
}
//使用jQuery提交，回调函数function(data)里返回相应信息:data
$.post("${basePath}/checkloginname.htm?d="+new Date().getTime(), {"member.loginname":loginname}, function(data){
$("#msg").html(data);
});
return false;
});
});
</script>
</head>
<body>
<form method="post" action="${basePath}/registe.htm" id="registeForm" class="validateForm">
<tr>
<td width="30%" align="right">用户名：</td>
<td width="70%"> <input type="text" name="member.loginname" id="loginname" class="input" />
<input type="button" value="检查用户名是否可用" class="btn" id="checkLoginname"/> <span id="msg" style="color:red"></span></td>
</tr>
</form>
</body>
</html>
后台action代码：
MemberAction.java
/** * ClassName: MemberAction.java*/ package com.tjitcast.bbs.web.action.front; import org.apache.struts2.convention.annotation.Action; import org.apache.struts2.convention.annotation.Namespace; import org.apache.struts2.convention.annotation.ParentPackage; import org.springframework.context.annotation.Scope; import org.springframework.stereotype.Controller; import com.tjitcast.bbs.domain.Member; /** * 检查会员是否存在的Action类 * * @author yjd */ @Controller("front.memberAction") @Scope("prototype") @Namespace("/") @ParentPackage("struts-default") public class MemberAction extends BaseAction { private static final long serialVersionUID = -4631080996625964833L; private Member member; /** * 检查用户名是否已经存在 */ @Action(value = "checkloginname") public void checkLoginname() { Member temp = memberService.get(member.getLoginname()); if (temp != null) { renderText("用户名已存在，请更换！"); } else { renderText("恭喜你，这个用户名可用!"); } } public void renderText(String text) { HttpServletResponse response = getResponse(); response.setContentType("text/plain;charset=UTF-8"); try { response.getWriter().write(text); response.getWriter().flush(); } catch (IOException e) { throw new IllegalArgumentException(e); // 把受检异常转换为非受检异常 } } public Member getMember() { return member; } public void setMember(Member member) { this.member = member; } }
效果如下图：
使用jQuery验证用户名是否存在，达到局部刷新的效果,布布扣,bubuko.com
原文：http://www.cnblogs.com/vip-ygh/p/3602236.html