HTML怎么做input身份证校验_HTML input身份证号校验方法【教程】-html教程-PHP中文网

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

html怎么做input身份证校验_html input身份证号校验方法【教程】

用 `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 实时校验——每打一个字都算一次校验码，体验卡顿且无必要。

示例关键逻辑：

Wechat HTML Publisher

直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。

下载

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();
}