輸入框失焦觸發 AJAX 實時驗證用戶名是否存在：前後端完整實現

核心思路

input 失焦 (blur 事件) → 發送 AJAX 請求後端 → 後端查詢數據庫 → 返回結果 → 前端顯示提示

前端實現 (原生 JS + Fetch)

<input type="text" id="username" placeholder="請輸入用戶名">
<span id="msg" style="color: red; font-size: 12px;"></span>

<script>
document.getElementById('username').addEventListener('blur', function() {
    const username = this.value.trim();
    const msgEl = document.getElementById('msg');
    
    if (!username) {
        msgEl.textContent = '用戶名不能為空';
        return;
    }
    
    // 防抖：避免頻繁請求（可選）
    clearTimeout(this.debounceTimer);
    this.debounceTimer = setTimeout(() => {
        fetch('/api/check-username', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({ username })
        })
        .then(res => res.json())
        .then(data => {
            if (data.exists) {
                msgEl.textContent = '用戶名已存在';
                msgEl.style.color = 'red';
            } else {
                msgEl.textContent = '用戶名可用';
                msgEl.style.color = 'green';
            }
        })
        .catch(err => {
            msgEl.textContent = '檢測失敗，請重試';
            msgEl.style.color = 'red';
            console.error(err);
        });
    }, 300); // 300ms 防抖
});
</script>

jQuery 版（兼容舊項目）

$('#username').on('blur', function() {
    const $this = $(this);
    const username = $this.val().trim();
    const $msg = $('#msg');
    
    if (!username) return $msg.text('用戶名不能為空').css('color', 'red');
    
    clearTimeout($this.data('timer'));
    $this.data('timer', setTimeout(() => {
        $.post('/api/check-username', { username }, function(data) {
            if (data.exists) {
                $msg.text('用戶名已存在').css('color', 'red');
            } else {
                $msg.text('用戶名可用').css('color', 'green');
            }
        }, 'json').fail(() => {
            $msg.text('檢測失敗').css('color', 'red');
        });
    }, 300));
});

後端實現

Spring Boot Controller

@RestController
@RequestMapping("/api")
public class UserController {
    
    @Autowired
    private UserRepository userRepository; // JPA Repository
    
    @PostMapping("/check-username")
    public Map<String, Object> checkUsername(@RequestBody Map<String, String> param) {
        String username = param.get("username");
        boolean exists = userRepository.existsByUsername(username);
        return Map.of("exists", exists);
    }
}

MyBatis Mapper

@Mapper
public interface UserMapper {
    @Select("SELECT COUNT(1) FROM users WHERE username = #{username}")
    int countByUsername(String username);
}

// Service
public boolean existsByUsername(String username) {
    return userMapper.countByUsername(username) > 0;
}

進階優化

完整流程圖

用戶輸入用戶名
      ↓
失焦 (blur) / 輸入防抖 (input)
      ↓
前端發送 AJAX POST /api/check-username {username}
      ↓
後端接收 → 查詢數據庫 (SELECT COUNT... WHERE username=?)
      ↓
返回 JSON {exists: true/false}
      ↓
前端解析 → 更新提示文本顏色/圖標
      ↓
用戶修正或繼續填寫

總結

• ✅ **觸發事件**：blur (失焦) 或 input (實時) + 防抖
• ✅ **通信**：fetch / axios / $.post 發送 JSON
• ✅ **後端**：唯一索引 + COUNT(1) / EXISTS 高效查詢
• ✅ **體驗**：綠/紅提示 + 圖標 + 禁用提交按鈕

1. 上一篇文章： Android Log.d() 在 Logcat 中不顯示：標籤過濾、日志級別、緩衝區大小排查指南
2. 下一篇文章： JavaScript 異步編程：回調函數模式解決 AJAX 返回值 undefined 問題

程式設計疑難解答

BackTrack 5 安裝卡住的常見原因與解決思路

舊版滲透測試發行版安裝故障排查指南 BackTrack 5（

Java 多態與方法重載解析：a2.show(b) 輸出 "b and a" 原理

程式碼結構 class A { String show(D

C 語言求素數和邏輯錯誤：變量初始化位置導致結果歸零

問題代碼片段 while (condition) {

Oracle SQL實現「不滿足條件」插入：NOT EXISTS 與 LEFT JOIN 兩種寫法

場景 將 t2 中不存在於 t1 的記錄（按 a,b 兩列匹