JSP 頁面中如何使用 JavaScript 驗證身份證號碼格式

前言

在 Web 開發中，驗證用戶輸入的身份證號碼是常見需求。中國大陸身份證號碼分為 15 位（舊版）和 18 位（新版）兩種格式，且包含校驗碼邏輯。本文將介紹如何在 JSP 頁面中編寫 JavaScript 代碼，實現高效、準確的身份證號碼前端驗證。

常見錯誤：使用 keyup 事件

許多開發者嘗試在 onkeyup 事件中實時校驗，但這存在明顯缺陷：用戶無法一次性輸入完整的 15 或 18 位數字，導致校驗邏輯在輸入過程中頻繁觸發錯誤提示，嚴重影響用戶體驗。

最佳實踐：採用 onblur 事件

建議將驗證邏輯綁定在輸入框的 onblur（失去焦點）事件上。這樣只有當用戶完成輸入並移開焦點時，才會觸發一次完整的格式校驗，既符合用戶操作習慣，又能減少不必要的計算開銷。

核心驗證邏輯

1. 長度校驗：必須為 15 位或 18 位數字。
2. 正則表達式：快速過濾非數字字符及長度不符的輸入。
3. 地址碼、出生日期、校驗碼校驗（進階）：對 18 位身份證進行 GB/T 2260 地址碼、日期合法性及 ISO 7064:1983.MOD 11-2 校驗碼算法驗證。

代碼示例

<input type="text" id="idCard" name="idCard" onblur="validateIdCard(this.value)" />
<script>
function validateIdCard(val) {
    // 1. 基礎正則：15位或18位（最後一位可為X/x）
    var reg = /(^\d{15}$)|(^\d{17}(\d|X|x)$)/;
    if (!reg.test(val)) {
        alert("身份證號碼格式錯誤：必須為15位或18位數字");
        return false;
    }
    // 2. 進階校驗（可選）：出生日期、校驗碼等
    // ... 此處省略詳細算法實現 ...
    return true;
}
</script>

總結

前端驗證僅作為第一道防線，**後端（Java Controller/Service）必須再次嚴格校驗**，防止繞過瀏覽器提交非法數據。合理選擇 onblur 而非 onkeyup，能顯著提升表單交互體驗。