HTML怎样做input身份证校验_HTML input身份证号校验方法【教程】

作者：袖梨 2026-06-05

HTML原生pattern仅支持正则匹配，无法校验身份证号等含算法逻辑的字段；必须用JavaScript在blur时执行加权求和+mod11校验，且后端须重复验证。

用 `pattern` 做前端简单校验，但别信它能防错

HTML 原生 pattern 只能做正则匹配，对身份证号这种有算法校验逻辑的字段，pattern 顶多拦住明显乱输的（比如纯字母、位数不对），但无法验证最后一位校验码是否正确。浏览器不会执行加权求和 + mod 11 这套逻辑。

常见错误是写成：<input pattern="^d{17}[dXx]$"> —— 这连 15 位旧号码都不支持，更别说校验码了。

18 位身份证必须满足：前 17 位全数字，第 18 位是 0-9 或 X（大小写都允许）
必须校验第 18 位：用加权因子 [7,9,10,5,8,4,2,1,6,3,7,9,10,5,8,4,2] 与前 17 位相乘求和，再对 11 取模，结果对应校验码表 ['1','0','X','9','8','7','6','5','4','3','2']
pattern 只建议作为辅助提示，比如：pattern="^d{17}[dXx]$" 配合 title="请输入18位身份证号"，降低用户误输概率

用 `onblur` 或 `addEventListener('blur')` 触发 JS 校验

真实校验必须靠 JavaScript，在用户离开输入框时执行。不要用 oninput 实时校验——每打一个字都算一次校验码，体验卡顿且无必要。

示例关键逻辑：

立即学习“前端免费学习笔记（深入）”；

function validateIdCard(id) {  const reg = /^[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]$/;  if (!reg.test(id)) return false;  const factor = [7,9,10,5,8,4,2,1,6,3,7,9,10,5,8,4,2];  const checkCode = ['1','0','X','9','8','7','6','5','4','3','2'];  const sum = id.slice(0, 17).split('').reduce((acc, cur, i) => acc + parseInt(cur) * factor[i], 0);  return checkCode[sum % 11].toUpperCase() === id[17].toUpperCase();}