如何通过HTML5 Pattern实现DD.MM.YYYY格式的日期字段验证？

没问题，我帮你把原有的YYYY-MM-DD正则调整为适配DD.MM.YYYY格式的版本，同时完整保留你需要的所有验证规则（19/20开头的年份、合法月份、符合日历逻辑的日期范围）！

最终的正则表达式 #

^(?:(?:0[1-9]|1[0-9]|2[0-9])\.(?:0[1-9]|1[0-2])|30\.(?!02)(?:0[1-9]|1[0-2])|31\.(?:0[13578]|1[02]))\.(?:19|20)[0-9]{2}$

规则拆解（对应你的需求） #

这个正则完全匹配你要的验证逻辑，分三个核心分支处理日期合法性，最后匹配年份：

• 第一个分支：(?:0[1-9]|1[0-9]|2[0-9])\.(?:0[1-9]|1[0-2])
  匹配01-29的任意日期，搭配01-12的合法月份，用.作为分隔符
• 第二个分支：30\.(?!02)(?:0[1-9]|1[0-2])
  匹配30号，但通过(?!02)排除2月30日的无效情况，月份范围仍为01-12
• 第三个分支：31\.(?:0[13578]|1[02])
  匹配31号，仅允许搭配有31天的月份（01、03、05、07、08、10、12）
• 年份部分：\.(?:19|20)[0-9]{2}
  用.分隔，仅匹配1900-2099范围内的四位年份

HTML5使用示例 #

把这个正则直接放到<input>的pattern属性中，再配合title提示用户格式：

<label for="valid-date">日期 (DD.MM.YYYY):</label>
<input 
  type="text" 
  id="valid-date" 
  name="valid-date"
  pattern="^(?:(?:0[1-9]|1[0-9]|2[0-9])\.(?:0[1-9]|1[0-2])|30\.(?!02)(?:0[1-9]|1[0-2])|31\.(?:0[13578]|1[02]))\.(?:19|20)[0-9]{2}$"
  title="请输入符合格式的有效日期，例如：28.02.2024 或 31.10.2023"
  required
>

这个方案完全继承了你原正则的严谨性，同时完美适配DD.MM.YYYY的格式要求，不会出现无效日期的匹配问题。

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