JavaScript 手機號碼實時校驗：正則 + 事件綁定實戰

需求

輸入框僅允許輸入數字，長度固定 11 位，失焦時校驗格式。

核心代碼

<script>
    // 正則：開頭到結尾均為數字，恰好 11 位
    var phoneReg = /^[\d]{11}$/;

    function checkPhone(input) {
        if (!phoneReg.test(input.value)) {
            alert('只允許輸入 11 位數字');
            input.select(); // 選中文本便於重新輸入
        }
    }
</script>

<input id="phoneNum" name="phoneNum" type="text" 
       value="${phoneNum}" maxlength="11"
       onkeyup="this.value=this.value.replace(/\D/g,'')" 
       onafterpaste="this.value=this.value.replace(/\D/g,'')" 
       onblur="checkPhone(this)" />

關鍵點解析

1. onkeyup/onafterpaste 過濾非數字：replace(/\D/g,'') 實時剔除非數字字符，保證輸入框始終純數字。
2. maxlength="11"：原生限制最大長度，防止超長輸入。
3. onblur 觸發正則校驗：失焦時統一驗證長度與格式，體驗優於輸入時逐字校驗。
4. input.select()：校驗失敗時全選文本，用戶可直接覆蓋重輸。

進階建議

• 生產環境建議增加「手機號歸屬地段號」校驗（如 ^1[3-9]\d{9}$）。
• 使用 input[type="tel"] 觸發移動端數字鍵盤。
• 結合 HTML5 pattern 屬性實現原生表單驗證，減少 JS 代碼。