Struts 2.1.6 實戰教程 (5)：註冊模組整合 jQuery 即時驗證帳號唯一性

前言

本篇示範註冊頁面整合 jQuery：使用者輸入帳號時即時發送 AJAX 請求驗證長度與唯一性，後端回傳純文字提示，前端動態顯示並控制提交按鈕狀態。

資料庫與 Model 層

建表 SQL (MySQL)

CREATE TABLE user (
    ID INT AUTO_INCREMENT PRIMARY KEY,
    LOGIN_NAME VARCHAR(25),
    PASSWORD VARCHAR(25)
);

User POJO

public class User {
    private int id;
    private String loginName, password;
    // getter/setter 省略
}

iBatis 映射 (User.xml)

<sqlMap namespace="User">
  <typeAlias alias="User" type="cn.simple.pojo.User"/>
  <resultMap id="UserResult" class="User">
    <result property="id" column="ID"/>
    <result property="loginName" column="LOGIN_NAME"/>
    <result property="password" column="PASSWORD"/>
  </resultMap>
  <select id="selectUserByLoginName" parameterClass="String" resultClass="User">
    SELECT ID as id, LOGIN_NAME as loginName, PASSWORD as password FROM user WHERE LOGIN_NAME=#loginName#
  </select>
  <insert id="insertUser" parameterClass="User">
    INSERT INTO user (LOGIN_NAME, PASSWORD) VALUES (#loginName#, #password#)
  </insert>
</sqlMap>

記得在 SqlMapConfig.xml 加入 <sqlMap resource="cn/simple/pojo/User.xml"/>。

UserManager 業務邏輯

public class UserManager {
    private static SqlMapClient sqlMapper;
    static { /* 初始化 sqlMapper */ }
    public static User selectUserByLoginName(String loginName) throws SQLException {
        return (User) sqlMapper.queryForObject("selectUserByLoginName", loginName);
    }
    public static void insertUser(User user) throws SQLException {
        sqlMapper.insert("insertUser", user);
    }
}

Action 類 (RegisterAction.java)

@Results({
  @Result(name="success", location="register-success.jsp"),
  @Result(name="input", location="registerform.jsp")
})
public class RegisterAction extends ActionSupport {
    private User user;
    private String loginName1; // AJAX 驗證用參數

    public String execute() throws Exception {
        UserManager.insertUser(user);
        return SUCCESS;
    }

    // AJAX 即時驗證帳號
    public void isExistLoginName() throws Exception {
        if (loginName1.length() < 4 || loginName1.length() > 8) {
            sendMsg("用戶名長度應在4-8之間!");
        } else if (UserManager.selectUserByLoginName(loginName1) != null) {
            sendMsg("用戶名" + loginName1 + "已存在！");
        } else {
            sendMsg("success");
        }
    }

    public void sendMsg(String content) throws IOException {
        ServletActionContext.getResponse().setCharacterEncoding("UTF-8");
        ServletActionContext.getResponse().getWriter().write(content);
    }
    // getter/setter 省略
}

前端頁面 (registerform.jsp)

<script src="js/jquery-1.3.2.min.js"></script>
<script>
$(function(){
    var state = false; // 全域提交狀態
    $("#loginName").keyup(function(){
        var loginName = $(this).val();
        $.get("register!isExistLoginName.action", {loginName1: loginName}, callback);
    });
    function callback(msg){
        if ("success" == msg) {
            $("#result").html(""); state = true;
        } else {
            $("#result").html(msg); state = false;
        }
    }
    $("form").submit(function(){ return state; });
});
</script>

<form action="register.action" method="post">
  帳號<input type="text" id="loginName" name="user.loginName"/>
  <span id="result" style="color:red;"></span><br/>
  密碼<input type="password" id="password" name="user.password"><br/>
  <input type="submit" value="註冊"/>
</form>

關鍵流程

1. 使用者在帳號欄輸入 → keyup 事件觸發
2. jQuery $.get() 送至 register!isExistLoginName.action?loginName1=xxx
3. Action 驗證長度、查資料庫 → 回傳純文字 (success 或錯誤訊息)
4. 前端 callback 更新 #result 顯示區、設定 state
5. 表單提交時 return state 決定是否送出

測試結果

• 長度 <4 或 >8：顯示「用戶名長度應在4-8之間!」，不可提交
• 長度合法但已存在：顯示「用戶名xxx已存在！」，不可提交
• 長度合法且未存在：顯示空白，可提交，導向成功頁

學習建議

1. 精讀 jQuery 1.3 API 中文版，掌握選擇器、事件、AJAX 核心方法
2. 嘗試將驗證邏輯封裝為 jQuery 外掛，複用於多表單
3. 下一篇將引入 JSON 格式傳輸，實現更結構化的前後端交互