HTML input 的 pattern 属性仅支持 ECMAScript 5.1 正则语法，不支持 ^、$、\d、lookahead 和 Unicode 类；年份校验需分两层：pattern 用 1-2{3} 做格式过滤，JavaScript 用 parseInt 和业务范围（如 1920–2025）做数值校验。
HTML input 的 pattern 属性不支持完整正则语法
HTML 原生 的 pattern 属性只支持 ECMAScript 5.1 的 RegExp 语法，不支持 ^、$（它们会被自动添加）、也不支持 \d（部分浏览器解析不稳定），更不支持 lookahead 或 Unicode 类。直接写 pattern="^\d{4}$" 看似合理，但实际会因隐式锚定和转义问题失效。
实操建议：
- 用
[0-9]替代\d，兼容性更好 - 年份范围要显式限定，比如 1900–2099，避免匹配
0000或9999 - 写成
pattern="[1-2][0-9]{3}"比[0-9]{4}更安全——它排除了以0开头的非法年份（如0123） - 注意：这个正则仍会匹配
1900之前或2099之后的年份（如2999），纯前端 pattern 无法做数值范围校验
用 JavaScript 补充数值范围校验才可靠
仅靠 pattern 无法判断输入是否是「有效年份」，比如 2100 可能超出业务要求，1970 可能是 Unix 时间戳起点但不是合法出生年份。必须用 JS 在提交前或失焦时验证。
实操建议：
- 监听
input或blur事件，取valueAsNumber或parseInt(input.value) - 检查是否为整数、是否在业务区间内（如
1920 ） - 不要只依赖
checkValidity()，它只跑pattern和required，不执行数值逻辑 - 示例关键代码：
if (input.value && !/^[1-2][0-9]{3}$/.test(input.value)) { /* 格式错 */ }<br>const year = parseInt(input.value, 10);<br>if (isNaN(year) || year 2025) { /* 范围错 */ }
date 类型 input 是更优替代方案吗？
用 能规避字符串解析和正则，浏览器会提供原生日期选择器，并自动校验格式与范围（如最小值 min="1920-01-01"）。
但要注意：
- 用户仍可手动输入文本，且某些浏览器（如 Safari 旧版）允许输入无效格式（如
202-13-99），valueAsNumber返回NaN -
input.value总是YYYY-MM-DD字符串，提取年份要用input.value.slice(0,4)或new Date(input.value).getFullYear() - 如果只要年份（不要月日），
type="date"会造成 UX 不一致——用户得点开选一整年，还可能误选错误月份
常见报错和绕过陷阱
开发者常遇到的几个典型问题：
- 写了
pattern="\d{4}"→ 实际需写pattern="[0-9]{4}"，否则部分浏览器忽略或报解析错误 - 设了
min="2000"但没配type="number"→min对text类型 input 完全无效 - 用
onsubmit阻止表单但忘了event.preventDefault()→ 校验失败仍会提交 - 正则写了
[12][0-9]{3}→ 错！这会漏掉1900–1999中以1开头但第二位不是9的年份（如1800本就不该匹配，但1950应该），正确应为[12][0-9]{3}或更准的(19[0-9]{2}|20[0-9]{2})
真正卡住人的地方，往往不是正则怎么写，而是默认以为 pattern 能做数值判断，或者忽略了不同浏览器对 \d 和空字符串的处理差异。年份校验必须分两层：字符串格式用 pattern 快速过滤，数值范围用 JS 精确控制。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
