JS Input 只輸入數字與 RegExp 表單驗證實作教學：過濾與限制技巧

JS Input 限制只能輸入數字：RegExp 表單驗證與過濾空白技巧

在前端實作表單（Form）時，處理 Input RegExp 表單驗證 並限制欄位「只輸入數字」是非常高頻的基礎需求。上回我們介紹了 JS 正規表達式：Email、電話、密碼等常用表單驗證範例，本篇將進一步針對使用者在真實操作時常見的「複製貼上夾帶空白」、「誤觸英文字母」與「數值超過上下限」等情境，一步步實作完整的數字驗證函式與 <input> 事件綁定。

⚡ 快速跳轉（依實務情境選擇）：

• 數字驗證方法比較
• 基礎 RegExp 寫法
• 處理空白與誤觸字母
• 完整實作範本（整數與小數）

數字驗證方法比較 {#數字驗證方法比較}

在處理 Input 數字限制時，常見的技術方案各有優劣，以下為核心規格對照：

方案	優點	適用情境
RegExp 過濾	精準控制內容，可即時剔除非法字元	即時輸入過濾、表單提交前驗證
parseInt 轉型	內建語法，處理邏輯極簡	僅需單純數值轉換，不需保留輸入過程
HTML inputmode	提升行動裝置體驗，彈出數字鍵盤	所有涉及數字輸入的表單欄位

一、 基礎 RegExp 寫法 {#基礎-regexp-寫法}

要驗證輸入的值是否全部由阿拉伯數字組成，最直覺的做法是撰寫一個函式，使用正規表達式 /^\d+$/ 來測試輸入值：

// 判斷是否全部為數字
function inputNumber(v) {
  // 宣告 RegExp：從開頭 (^) 到結尾 ($) 皆為 1 個以上的數字 (\d+)
  const regex = /^\d+$/;
  return regex.test(v);
}

console.log(inputNumber(123));   // 執行結果: true
console.log(inputNumber('123')); // 執行結果: true

二、 處理空白與誤觸字母 {#處理空白與誤觸字母}

在真實操作場景中，使用者輸入的值很有可能出現「複製貼上夾帶空白」或「誤觸英文字母」。若直接報錯會影響體驗，建議透過以下邏輯處理：

1. 解決含有空白的 Input 表單輸入

使用 replace(/\s+/g, '') 移除所有空白，或利用 parseInt() 自動忽略開頭空白的特性進行處理。

let s = ' 123 abc ';
// 移除所有空白
s = s.replace(/\s+/g, '');
console.log(s); // 執行結果: "123abc"

2. 解決 Input 表單輸入夾帶非數字字元

在即時輸入框（oninput）中，使用 replace(/\D+/g, '')（\D 代表非數字字元），可直接剔除英文字母與符號。

const iv = 'eee123asdf45';
// 直接濾除所有非數字字元，保留純數字
const cleanDigits = iv.replace(/\D+/g, '');
console.log(cleanDigits); // 執行結果: "12345"

三、 完整實作範本（整數與小數） {#完整實作範本}

以下提供兩個生產環境常用的範本，分別對應「純整數」與「允許小數點」的輸入需求。

範本 1：限制只能輸入整數

此範本包含範圍限制與中文輸入法（IME）防護。

function verifyInteger(rawValue, min = 0, max = 3000) {
  // 移除所有非數字字元
  const digitsOnly = String(rawValue ?? '').replace(/\D+/g, '');
  if (!/^\d+$/.test(digitsOnly)) return min;

  const num = parseInt(digitsOnly, 10);
  return Math.min(max, Math.max(min, num));
}

// 綁定事件範例
inputEl.addEventListener('input', (e) => {
  if (e.isComposing) return;
  e.target.value = verifyInteger(e.target.value);
});

範本 2：允許輸入小數點

若需處理價格或重量，需調整正規表達式以保留小數點。

function verifyDecimal(rawValue) {
  // 保留數字與第一個小數點，移除其他非法字元
  let val = rawValue.replace(/[^0-9.]/g, '');
  
  // 確保只有一個小數點
  const parts = val.split('.');
  if (parts.length > 2) {
    val = parts[0] + '.' + parts.slice(1).join('');
  }
  return val;
}

// 使用方式
inputEl.addEventListener('input', (e) => {
  e.target.value = verifyDecimal(e.target.value);
});

延伸閱讀

• JS 正規表達式：Email、電話、密碼等常用表單驗證範例
• JS 如何去除字串前後空白、空格與換行 (trim / replace)
• JS 數字加逗號 / 轉換千分位顯示（toLocaleString 與正規表達式）

參考資料與延伸閱讀

• MDN Web Docs：RegExp 正規表達式語法與元字元參考
• MDN Web Docs：HTML input 元素與 inputmode 屬性規範
• MDN Web Docs：String.prototype.replace() 方法說明
• MDN Web Docs：InputEvent: isComposing 屬性（處理 IME 中文輸入法）
• ECMAScript 語言規範：parseInt 函式定義
• 延伸閱讀：JavaScript 表單驗證：如何用 RegExp 限制 input 只能輸入數字並過濾空白
• 延伸閱讀：JS RegExp 規則運算式：Email 手機密碼驗證範本與 JS 表單比對機制教學