HTML5日期输入验证方案咨询：按月份动态限制日期范围

好问题！直接靠纯HTML5的pattern属性是没法实现这种动态验证的——因为pattern是静态定义的，页面加载后就固定了，没办法根据月份输入框的变化自动调整日期的正则规则。不过我们可以结合一点点JavaScript（或者利用你代码里的AngularJS特性）来实现这个需求，下面给你两种可行的方案：

方案一：原生JavaScript动态修改pattern #

给月份和日期输入框添加标识，监听月份的变化事件，动态更新日期输入框的pattern属性：

Year <select id="yearSelect" ng-options="x for x in ['2018']" required> </select> 
Month: <input id="monthInput" pattern="[0-1][0-9]" maxlength="2" required>
Day: <input id="dayInput" pattern="[0-3][0-9]" maxlength="2" required title="请输入有效日期">

<script>
const monthInput = document.getElementById('monthInput');
const dayInput = document.getElementById('dayInput');

// 预定义不同月份对应的日期正则规则
const dayPatternMap = {
  '01': '^0[1-9]|[12][0-9]|3[01]$', // 1月：01-31
  '02': '^0[1-9]|1[0-9]|2[0-8]$', // 2018年2月：01-28
  '03': '^0[1-9]|[12][0-9]|3[01]$',
  '04': '^0[1-9]|[12][0-9]|30$', // 4月：01-30
  '05': '^0[1-9]|[12][0-9]|3[01]$',
  '06': '^0[1-9]|[12][0-9]|30$',
  '07': '^0[1-9]|[12][0-9]|3[01]$',
  '08': '^0[1-9]|[12][0-9]|3[01]$',
  '09': '^0[1-9]|[12][0-9]|30$',
  '10': '^0[1-9]|[12][0-9]|3[01]$',
  '11': '^0[1-9]|[12][0-9]|30$',
  '12': '^0[1-9]|[12][0-9]|3[01]$'
};

// 监听月份的输入和变化事件
monthInput.addEventListener('input', updateDayValidation);
monthInput.addEventListener('change', updateDayValidation);

function updateDayValidation() {
  // 把月份补成两位数字（比如"1"变成"01"）
  const currentMonth = monthInput.value.padStart(2, '0');
  if (dayPatternMap[currentMonth]) {
    // 更新日期输入框的pattern
    dayInput.pattern = dayPatternMap[currentMonth];
    // 更新提示文本，让用户清楚当前允许的日期范围
    switch(currentMonth) {
      case '02':
        dayInput.title = '2018年2月仅支持输入01-28';
        break;
      case '04': case '06': case '09': case '11':
        dayInput.title = '该月份仅支持输入01-30';
        break;
      default:
        dayInput.title = '该月份仅支持输入01-31';
    }
    // 手动触发验证，确保规则修改后立即生效
    dayInput.reportValidity();
  }
}
</script>

方案二：利用AngularJS的ng-pattern实现动态绑定 #

你的代码里用到了ng-options，说明是AngularJS项目，我们可以用ng-pattern指令绑定一个动态计算的规则，自动根据月份调整验证逻辑：

<div ng-app="dateValidationApp" ng-controller="DateCtrl">
  Year <select ng-model="selectedYear" ng-options="x for x in ['2018']" required> </select> 
  Month: <input ng-model="selectedMonth" pattern="[0-1][0-9]" maxlength="2" required>
  Day: <input ng-model="selectedDay" ng-pattern="getDayPattern()" maxlength="2" required title="{{getDayHint()}}">
</div>

<script>
angular.module('dateValidationApp', [])
.controller('DateCtrl', function($scope) {
  $scope.selectedYear = '2018';

  // 根据当前月份返回对应的正则规则
  $scope.getDayPattern = function() {
    const month = ($scope.selectedMonth || '').padStart(2, '0');
    switch(month) {
      case '02':
        return /^0[1-9]|1[0-9]|2[0-8]$/;
      case '04': case '06': case '09': case '11':
        return /^0[1-9]|[12][0-9]|30$/;
      default:
        return /^0[1-9]|[12][0-9]|3[01]$/;
    }
  };

  // 返回对应的提示文本
  $scope.getDayHint = function() {
    const month = ($scope.selectedMonth || '').padStart(2, '0');
    if (month === '02') {
      return '2018年2月仅支持输入01-28';
    } else if (['04','06','09','11'].includes(month)) {
      return '该月份仅支持输入01-30';
    } else {
      return '该月份仅支持输入01-31';
    }
  };
});
</script>

总结 #

纯静态的HTML5 pattern属性无法实现这种依赖其他输入的动态验证，但通过JavaScript动态修改属性，或者利用AngularJS这类框架的动态绑定能力，就能完美实现你想要的日期验证逻辑。

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