Vue 3 中表单校验怎么验证身份证号码的有效性-Vue.js-PHP中文网

vue 3校验身份证需四层逻辑：格式长度（18/15位）、地区码（gb/t 2260省级白名单）、出生日期（合法日期+闰年校验）、校验码（gb 11643权重模11比对），缺一不可。

vue 3 中表单校验怎么验证身份证号码的有效性

Vue 3 中验证身份证号码有效性，不能只靠正则判断位数和字符，必须覆盖格式、地区码、出生日期、校验码四层逻辑，否则容易放过伪造号或漏判真实号。

基础格式与长度校验

先筛掉明显非法输入：18位是主流，15位已基本停用但部分老系统仍需兼容。正则要区分年份范围和月份日期边界，避免宽松匹配（比如允许2月30日）：

18位推荐正则：/^[1-9]\d{5}(18|19|20)\d{2}(0[1-9]|1[0-2])(0[1-9]|[12]\d|3[01])\d{3}[\dXx]$/
匹配后还需检查年份是否合理（如不接受1800年以前或2100年以后）
15位可先转为18位再统一校验，或单独用/^\d{15}$/加出生年月补零逻辑处理

行政区划码（前6位）校验

前两位代表省/直辖市/自治区，必须在国家标准《GB/T 2260》有效范围内。不能简单写死几百个码，建议引入轻量级地址码白名单数组（如只含省级代码），或调用封装好的校验函数：

常见有效开头：11（北京）、31（上海）、44（广东）、51（四川）等
无效示例：00、99、77 等非实际分配的编码
可在工具函数中预置const validProvinces = ['11', '12', '13', ..., '65']做快速比对

出生日期与顺序码逻辑校验

第7–14位（18位证）需解析为合法日期，且要考虑闰年、大小月、2月天数等细节；第17位隐含性别信息，虽不参与有效性判定，但可辅助交叉验证：

check-vue-style

检查 .vue 单文件组件的 CSS 规范问题并给出提示，适用于样式检查、CSS审查和 Vue 页面质量巡检。

下载

提取id.substring(6, 14)，尝试构造new Date(year, month - 1, day)，再反查是否与输入一致
避免直接用Date.parse——它会自动修正非法日期（如“2000-02-30”变成3月1日）
可额外检查：出生年份不大于当前年减1，不小于1900年

18位校验码计算与比对

这是最易出错的一环。必须严格按国标 GB 11643-1999 计算权重和模11余数，再对照校验码表：

权重数组：[7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5, 8, 4, 2]
前17位逐位乘权求和，sum % 11得余数
余数 0→'1'，1→'0'，2→'X'（大小写均接受），10→'2'，其余依次对应数字
最后一位若为X或x，需转大写后比对

Element Plus 表单集成写法（Vue 3 + Composition API）

在rules中定义异步或同步校验器，绑定到el-form-item prop="idCard"：

const rules = {
  idCard: [
    {
      required: true,
      message: '请输入身份证号码',
      trigger: 'blur'
    },
    {
      validator: (rule, value, callback) => {
        if (!value) return callback()
        if (isValidIDCard(value)) {
          callback()
        } else {
          callback(new Error('身份证号码不合法'))
        }
      },
      trigger: 'blur'
    }
  ]
}

其中isValidIDCard是你封装的四层校验函数，返回布尔值，不抛错、不依赖外部状态。