pattern不能可靠验证18位身份证号——它只做基础格式匹配，不校验末位校验码，也不处理15位旧号；常见简化正则为pattern="[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]"。
pattern属性对身份证号的正则表达式怎么写
直接给结论：pattern 不能可靠验证18位身份证号——它只做基础格式匹配，不校验末位校验码，也不处理15位旧号。但若仅需前端快速拦截明显错误（如字母混入、长度不对），可用简化正则。
常见写法是：pattern="[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]"
- 开头
[1-9]\d{5}：6位地址码，首位非0 -
(18|19|20)\d{2}：年份，覆盖1800–2099（实际常用1900–2099） - 月份和日期部分做了基本范围限制，但没校验大小月或闰年
- 末尾
[\dXx]：允许数字或大/小写X，但不计算校验码
为什么用pattern验证身份证号容易出错
浏览器原生pattern只触发HTML5表单验证，且验证时机有限（提交时或调用checkValidity()），关键缺陷有：
- 不支持15位身份证号（老号，无校验位、无年份前两位）
- 不校验第17位奇偶性（性别标识）和第18位校验码（需加权模11算法）
- 正则无法判断“2月30日”这种逻辑错误，比如
19990230会被上面正则接受 - 移动端软键盘可能不触发pattern提示，用户无感知
真正需要校验时该怎么做
前端必须配合JS做完整校验，pattern最多当第一道轻量过滤。推荐用标准校验函数，例如：
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
立即学习“前端免费学习笔记（深入）”；
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;
// 此处插入校验码计算逻辑（查表加权、mod 11）
const wi = [7,9,10,5,8,4,2,1,6,3,7,9,10,5,8,4,2];
const vi = ['1','0','X','9','8','7','6','5','4','3','2'];
let sum = 0;
for (let i = 0; i < 17; i++) sum += id[i] * wi[i];
const mod = sum % 11;
return id[17].toUpperCase() === vi[mod];
}注意：pattern里的正则只是前置条件，真正可信的校验必须走这段JS逻辑。
input标签中pattern和required如何配合使用
单独写pattern不会阻止空值提交，必须加required才强制非空；但要注意顺序和体验：
-
<input type="text" required pattern="...">：空值会报“请填写此字段”，格式错报“请匹配所要求的格式” - 不要用
type="number"——身份证含X，会自动过滤掉，导致输入11010119900307271X只剩数字 - 建议加
inputmode="text"（尤其移动端），避免弹出数字键盘 - 服务端仍必须重复校验——
pattern纯属前端提示，可被绕过
最易被忽略的一点：pattern正则里不能用^和$——浏览器会自动锚定首尾，加了反而失效。
