在前端表單裏校驗身份證號，本質是做一個<span style="color:red">格式過濾</span>，避免明顯錯誤的數據進入後台或數據庫。下面結合 Vue 場景，把常用正則寫法、進階校驗思路，一次説清楚 ✅

一、身份證格式校驗的核心思路

當前主流使用的是<span style="color:red">18 位居民身份證</span>，結構如下：

• 前 6 位：<span style="color:red">行政區劃代碼</span>
• 中間 8 位：<span style="color:red">出生日期</span>（YYYYMMDD）
• 接着 3 位：<span style="color:red">順序碼</span>（奇數男，偶數女）
• 最後一位：<span style="color:red">校驗碼</span>（0–9 或 X）

在 Vue 中，我們通常分兩層做校驗：

1. 用<span style="color:red">正則表達式</span>先做格式過濾。
2. 如有需要，再用<span style="color:red">校驗碼算法</span>做二次驗證 🔐

二、Vue 常用身份證正則（推薦寫法）

1. 18 位身份證常用正則

// 簡單且實用的 18 位身份證格式校驗正則
const idCardReg = /^[1-9]\d{5}(18|19|20)\d{2}(0[1-9]|1[0-2])(0[1-9]|[12]\d|3[01])\d{3}(\d|X|x)$/;

代碼解釋（逐段拆解）

• ^[1-9]

  • 以 1–9 開頭，避免出現 0 開頭的地址碼。

• \d{5}

  • 接 5 位數字，加上前面 1 位，共 6 位地址碼。

• (18|19|20)\d{2}

  • 出生年份以 18xx、19xx、20xx 開頭，\d{2} 表示後兩位年份。
  • 約束年份在 1800–2099 之間，更貼近實際業務。

• (0[1-9]|1[0-2])

  • 合法月份：01–12。

• (0[1-9]|[12]\d|3[01])

  • 合法日期：01–31，這裏只做天數範圍校驗，不細分大小月和閏年。

• \d{3}

  • 順序碼 3 位數字。

• (\d|X|x)

  • 最後一位可以是 0–9 或 X（大小寫都支持）。

• $

  • 限制整個字符串完全匹配，避免前後多餘字符。

這個正則適合 90% 以上的前端表單場景，簡單、清晰、易維護 👍

三、在 Vue 中使用：表單 + 校驗函數

1. Vue 方法封裝校驗函數

export default {
  data() {
    return {
      formData: {
        idCard: ''
      },
      idCardError: ''
    };
  },
  methods: {
    validateIdCard(id) {
      const idCardReg = /^[1-9]\d{5}(18|19|20)\d{2}(0[1-9]|1[0-2])(0[1-9]|[12]\d|3[01])\d{3}(\d|X|x)$/;
      if (!id) {
        return '身份證號不能為空';
      }
      if (!idCardReg.test(id)) {
        return '身份證號格式不正確';
      }
      return '';
    },
    handleBlurIdCard() {
      this.idCardError = this.validateIdCard(this.formData.idCard);
    }
  }
};

代碼解釋

• data()

  • formData.idCard：綁定身份證輸入框的值。
  • idCardError：存放校驗失敗時的錯誤信息，方便在頁面上直接展示。

• validateIdCard(id)

  • 內部定義了前面提到的 <span style="color:red">idCardReg</span> 正則。
  • 先判斷是否為空，為空直接返回“不能為空”的提示。
  • 再用 idCardReg.test(id) 判斷格式是否合法，失敗返回“格式不正確”。
  • 返回 '' 表示校驗通過。

• handleBlurIdCard()

  • 建議在 input 的 @blur（失去焦點）事件中調用。
  • 把校驗結果寫入 idCardError，界面可以用 v-if="idCardError" 控制錯誤提示展示。

四、進階：在 Vue 模板中綁定校驗

<template>
  <div>
    <label>身份證號：</label>
    <input
      v-model="formData.idCard"
      @blur="handleBlurIdCard"
      placeholder="請輸入18位身份證號"
    />
    <p v-if="idCardError" style="color:red;">{{ idCardError }}</p>
  </div>
</template>

模板解釋

• v-model="formData.idCard"

  • 實現輸入框與數據的<span style="color:red">雙向綁定</span>。

• @blur="handleBlurIdCard"

  • 在用户輸入完離開輸入框時進行校驗，體驗比較友好 😄

• v-if="idCardError"

  • 當存在錯誤信息時顯示 <p> 標籤，用紅色文字直接提示用户問題所在。

五、身份證校驗碼算法（可選的更嚴謹校驗）

如果你希望進一步判斷身份證號的<span style="color:red">校驗位</span>是否正確，可以在正則通過之後，再做一次“加權求和 + 模 11”校驗。

1. 簡要數學公式

設前 17 位數字為 A₁…A₁₇，對應的權重為 W₁…W₁₇，則：

S = (A₁×W₁ + A₂×W₂ + ... + A₁₇×W₁₇) mod 11

根據結果 S 查表，得到對應的校驗碼，與第 18 位比對是否一致。

正則負責“長得像”，校驗碼算法負責“是不是”。兩者配合，整體可靠性更高 🔍

六、Vue 身份證校驗整體流程表（Markdown / Vditor 可直接用）

| 步驟 | 階段                     | 關鍵點                                             | 説明 |
| ---- | ------------------------ | -------------------------------------------------- | ---- |
| 1    | 用户輸入                 | 用户在表單中輸入身份證號                          | 僅完成原始輸入，不做額外處理 |
| 2    | 觸發校驗                 | `@blur` 或提交時觸發 `validateIdCard`             | 建議失焦 + 提交雙層校驗 |
| 3    | 正則格式檢查             | 使用 `idCardReg.test(id)`                         | 過濾明顯錯誤，例如長度不對、日期不合法等 |
| 4    | 返回提示信息             | 返回錯誤文案或空字符串                            | 空字符串表示校驗通過 |
| 5    | 前端展示錯誤             | `v-if="idCardError"` 顯示紅色錯誤提示             | 直觀告知用户問題所在 |
| 6    | 可選：校驗碼算法驗證     | 僅在正則通過後做權重求和 + 校驗位對比             | 更嚴格控制重要業務場景，如實名認證 |
| 7    | 最終提交到後台           | 僅在所有校驗通過後允許提交                        | 減少無效請求和髒數據 |

七、補充：15 位老身份證簡單兼容（如業務需要）

如果你的系統需要兼容<span style="color:red">15 位老身份證</span>，可以額外加一個正則進行判斷：

const idCard15Reg = /^[1-9]\d{7}\d{2}(0[1-9]|1[0-2])(0[1-9]|[12]\d|3[01])\d{3}$/;

代碼解釋

• ^[1-9]\d{7}

  • 地址碼共 8 位。

• \d{2}

  • 年份後兩位（例如 85 表示 1985 年，需要在業務邏輯裏自己轉成完整年份）。
• 後面的月份、日期、順序碼含義與 18 位類似，只是沒有校驗位。

業務上如果只是內部老數據展示，直接允許通過即可；如果是新錄入，建議統一使用 18 位證件號，控制數據口徑。

整體來看，在 Vue 中校驗身份證，重點就是：

• 前端用<span style="color:red">正則</span>把明顯錯的攔掉；
• 關鍵業務再疊加<span style="color:red">校驗碼算法</span>；
• 提示信息寫清楚、寫明白，減少用户反覆試錯。

如果你願意，把現有項目裏用的校驗代碼貼出來，我可以幫你按“<span style="color:red">藍易雲前端規範</span>”幫你再精簡一版，順帶優化錯誤文案和邊界場景 🔧