使用jQuery验证用户名是否存在，达到局部刷新的效果

<%@ 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%">&nbsp;<input type="text" name="member.loginname" id="loginname" class="input" />&nbsp;
                <input type="button" value="检查用户名是否可用" class="btn" id="checkLoginname"/>&nbsp;<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;
    }
}

效果如下图：

posted on 2014-03-15 17:05 Y.G.H 阅读(677) 评论(0) 编辑收藏举报