HTML表单pattern属性仅能粗筛身份证格式，无法验证校验码、地区码、出生日期等真实性，必须用JavaScript实现加权计算末位校验码等完整校验逻辑。
HTML 表单里不能直接用正则「校验」身份证号
HTML 的 pattern 属性确实支持正则，但仅用于基础格式提示，**不校验真实性、不验证末位校验码、不区分 15 位/18 位逻辑**。浏览器只做字符串匹配，输个 11010120000101123X 即使校验码算出来是错的，只要格式对，pattern 也认为合法。
pattern 能做的只是粗筛：匹配 15 位或 18 位数字+X
它适合防手误（比如输了字母乱码、少位数），但绝不能替代 JS 校验。常见写法：
<input type="text" pattern="(^\d{15}$)|(^\d{17}(\d|X|x)$)" title="请输入正确的身份证号">说明：
-
^\d{15}$匹配纯 15 位数字（老证，已基本停用，但系统仍需兼容） -
^\d{17}(\d|X|x)$匹配 17 位数字 + 第 18 位是数字或大小写 X - 注意：
pattern默认是全局匹配，不用加^$也能生效，但显式写出更稳妥 - 这个正则不检查出生年份是否合理（比如
9999年）、不校验地区码是否存在、不计算校验码
真正有效的校验必须用 JavaScript 算末位校验码
18 位身份证第 18 位是根据前 17 位加权求和 mod 11 得出的，对应 "10X98765432"。只靠正则永远绕不过这步。
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
立即学习“前端免费学习笔记（深入）”；
实操建议：
- 先用
pattern做前端快速过滤（减少无效提交） - 提交前或失焦时，用 JS 完整校验：长度判断 → 地区码查表（可选）→ 出生日期解析（如
19990101是否合法）→ 加权校验码计算 - 校验码权重数组固定为：
[7,9,10,5,8,4,2,1,6,3,7,9,10,5,8,4,2] - 示例关键逻辑片段：
function checkIdCard(id) {
if (!/^\d{17}[\dXx]$/.test(id)) return false;
const weights = [7,9,10,5,8,4,2,1,6,3,7,9,10,5,8,4,2];
const checks = "10X98765432";
let sum = 0;
for (let i = 0; i < 17; i++) sum += parseInt(id[i]) * weights[i];
return checks[sum % 11] === id[17].toUpperCase();
}15 位身份证别忽略，但优先引导用户升级
15 位是旧编码（无校验码，年份两位），现在银行、政务系统基本不认。JS 校验时可转成 18 位再校验（补 19 年份、插入 00、重算校验码），但要注意：
- 部分 15 位号码补全后可能对应多个 18 位结果（比如年份是
00，不确定是 1900 还是 2000） - 很多业务场景直接拒绝 15 位更安全，避免歧义
- 如果必须支持，转换逻辑要明确写死为
19 + YYMMDD，且仅限历史数据兼容
真正难的不是写正则，而是把校验码算法写对、把边界情况（如 X 大小写、年份越界、闰年 2 月 29 日）都兜住——这些 HTML pattern 一根毛都帮不上。
