JavaScript 文本框輸入空格過濾與資料庫儲存最佳實踐

問題背景

在 Web 開發中，常遇到需限制輸入框不允許純空格，但使用者可能輸入「空格 + 文字」的情況。若直接存入資料庫，前導空格會佔用儲存空間，並可能影響查詢效能與資料一致性。

核心解決方案

1. 伺服器端處理（最推薦）

無論前端如何驗證，伺服器端務必再次清理資料，確保資料完整性。以 PHP 為例：

$clean = trim($_POST['input']); // 移除首尾空白
$clean = preg_replace('/\s+/', ' ', $clean); // 將多重空白合併為單一空格

2. 客戶端即時攔截（輔助）

使用 JavaScript 在提交前或輸入時過濾，提升使用者體驗：

// 提交前處理
document.getElementById('myForm').addEventListener('submit', function(e) {
  const input = document.getElementById('a');
  input.value = input.value.replace(/^\s+|\s+$/g, ''); // 去首尾空格
  input.value = input.value.replace(/\s+/g, ' '); // 合併中間空格
});

// 或即時輸入過濾（僅允許非空格開頭）
document.getElementById('a').addEventListener('input', function() {
  this.value = this.value.replace(/^\s+/, '');
});

為何伺服器端驗證不可或缺？

• 使用者可禁用 JavaScript 繞過前端檢查
• 惡意請求可直接發送至 API 端點
• 資料庫層面的乾淨資料能避免後續查詢、索引、比對的異常

效能影響分析

資料庫中儲存含前導空格的字串，會導致：

1. 索引膨脹：B+ 樹節點儲存更多無效字元
2. 查詢誤差：`WHERE name = 'John'` 無法匹配 `' John'`
3. 排序異常：空格 ASCII 碼小於字母，影響順序

最佳實踐總結

採用「前端即時提示 + 提交前處理 + 伺服器端強制清理」三層防護，確保資料乾淨、效能最優。