蓝易云cdn:vue常用正则表达式判断身份证格式

在前端表单里校验身份证号，本质是做一个<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>”帮你再精简一版，顺带优化错误文案和边界场景 🔧