表單失去焦點驗證：AJAX 呼叫後端 Action 實現即時檢查

需求：輸入框 onblur 時即時驗證（如用戶名唯一性），不刷新頁面，提示訊息顯示於輸入框下方。

前端實作 (jQuery)

<input type="text" id="username" name="username" onblur="checkUsername()" />
<span id="usernameMsg" style="color:red;"></span>

<script>
function checkUsername() {
    const val = $('#username').val().trim();
    if (!val) { $('#usernameMsg').text('用戶名不能為空'); return; }

    $.get('/checkUsername', { username: val }, function(resp) {
        if (resp.exists) {
            $('#usernameMsg').text('用戶名已存在');
        } else {
            $('#usernameMsg').text('用戶名可用').css('color', 'green');
        }
    }, 'json');
}
</script>

後端 Spring MVC Action

@GetMapping("/checkUsername")
@ResponseBody
public Map checkUsername(@RequestParam String username) {
    boolean exists = userService.existsByUsername(username);
    return Map.of("exists", exists);
}

進階：通用驗證框架整合

• Hibernate Validator (JSR 380)：後端 Bean 驗證，配合 @Unique 自定義註解查資料庫。
• Spring Validation + BindingResult：表單提交時統一驗證，錯誤訊息自動綁定欄位。
• 前端插件：jquery-validation + remote 規則，自動處理 AJAX 驗證與訊息顯示。

安全提醒

前端驗證僅為使用者體驗，**後端必須再次驗證**，防止繞過前端直接發送請求。