如何限制输入框前四位年份为2010-2022？需支持如2018-00130格式

核心HTML验证方案 #

直接使用type="text"输入框，配合精准的正则表达式pattern属性，同时保留maxlength控制长度，即可实现需求：

<input type="text" 
       pattern="^20(1[0-9]|2[0-2])-\d+$" 
       maxlength="10" 
       title="请输入格式为YYYY-NNNNN的内容，年份需在2010-2022之间"
       required>

正则规则拆解 #

• ^20(1[0-9]|2[0-2])：严格匹配2010-2022的年份区间，其中1[0-9]对应2010-2019，2[0-2]对应2020-2022
• -：强制匹配年份与数字段之间的连字符
• \d+$：匹配连字符后至少1位数字（如果需要固定数字位数，比如示例中的5位，可修改为\d{5}$）
• 首尾的^和$确保输入内容完全符合规则，无多余字符

额外优化：限制输入字符类型 #

为了避免用户输入字母或其他无效字符，可以添加onkeydown事件过滤输入：

<input type="text" 
       pattern="^20(1[0-9]|2[0-2])-\d+$" 
       maxlength="10" 
       title="请输入格式为YYYY-NNNNN的内容，年份需在2010-2022之间"
       required
       onkeydown="return /[\d-]/.test(event.key)">

这段代码会只允许用户输入数字和减号，进一步降低无效输入的概率。

内容的提问来源于stack exchange，提问作者Justin