使用jQuery驗證用戶名是否存在，達到局部刷新的效果

時間 2019-11-16

標籤使用 jquery 驗證用戶名是否存在達到局部刷新效果欄目 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代碼：javascript

MemberAction.javahtml

/**
 *  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;
    }
}