如何创建匹配有效月日范围的mm/dd格式正则表达式？

嘿，我来帮你搞定这个日期输入的范围限制需求！你现有的输入框已经搞定了格式匹配，但要加上月份和日期的数值范围约束，咱们可以从增强正则规则和实时JS验证两方面入手，既保证提交时的校验，也给用户即时反馈。

第一步：优化HTML的pattern属性 #

先把你的pattern替换成更精准的正则，直接匹配合法的月份（01-12）和日期（01-31）：

<input 
  type="tel" 
  autocomplete="off" 
  autocorrect="off" 
  name="myInput" 
  autocapitalize="none" 
  spellcheck="false" 
  pattern="(0[1-9]|1[0-2])/(0[1-9]|[12][0-9]|3[01])" 
  maxlength="5" 
  placeholder="MM/DD"
  required
>

正则说明： #

• (0[1-9]|1[0-2])：匹配01-09或者10-12的合法月份
• /(0[1-9]|[12][0-9]|3[01])：匹配01-09、10-29、30-31的合法日期

加上required属性可以确保用户不能留空提交，浏览器会在提交时自动校验格式和范围，你也可以通过title属性自定义浏览器默认提示文本，比如title="Please enter a month (01-12) and a day (01-31)"。

第二步：添加实时JavaScript验证（可选但推荐） #

纯HTML的校验只有在提交时才触发，为了给用户更友好的即时反馈，咱们可以加一段JS监听输入事件，实时检查输入是否合法：

const dateInput = document.querySelector('input[name="myInput"]');
const errorMsg = document.createElement('div');
errorMsg.style.color = 'red';
dateInput.parentNode.appendChild(errorMsg);

// 定义校验正则
const dateRegex = /^(0[1-9]|1[0-2])\/(0[1-9]|[12][0-9]|3[01])$/;

dateInput.addEventListener('input', function() {
  const value = this.value.replace(/\D/g, ''); // 提取输入中的纯数字
  let formattedValue = '';
  
  // 保持自动添加"/"的输入掩码逻辑
  if (value.length > 2) {
    formattedValue = value.slice(0, 2) + '/' + value.slice(2, 4);
  } else {
    formattedValue = value;
  }
  this.value = formattedValue;

  // 实时校验并提示
  if (this.value.length === 5) {
    if (!dateRegex.test(this.value)) {
      errorMsg.textContent = 'Please enter a month (01-12) and a day (01-31)';
    } else {
      errorMsg.textContent = '';
    }
  } else {
    errorMsg.textContent = '';
  }
});

// 提交时的最终兜底校验
document.querySelector('form').addEventListener('submit', function(e) {
  if (!dateRegex.test(dateInput.value)) {
    e.preventDefault();
    errorMsg.textContent = 'Please enter a valid MM/DD date';
  }
});

这段代码做了几件事：

• 保留了你需要的自动添加/的输入掩码逻辑
• 当输入满5个字符时，实时验证格式和范围，显示你想要的错误提示
• 提交时再做一次兜底校验，防止绕过前端验证的情况

额外提示 #

如果你的输入掩码是用第三方库实现的（比如Inputmask.js），只需要确保正则规则和库的掩码格式兼容就行，核心的范围校验逻辑是一致的。

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