如何验证month输入框的完整有效日期，避免按键触发表单提交？

问题场景 #

现有如下代码，使用type="month"的输入框实现日期选择，绑定了change事件触发表单提交。但支持键盘输入时，每次按键都会触发提交，希望仅当输入**完整有效的日期格式（如2024-10、1993-10，排除0202-10这类无效格式）**时才提交表单。

原代码：

<input class="submit-form-on-change" type="month" name="@Model.DatePickerFormKey" value="@Model.InitialValue?.ToString("yyyy-MM")">

<script>
    document.addEventListener('DOMContentLoaded', function () {
        document.getElementById('user-filter-content').querySelectorAll('.submit-form-on-change').forEach(function (element) {
            element.addEventListener('change', function () {
                this.form.submit();
            });
        });
    }, false);
</script>

修改方案 #

通过正则验证输入格式，只有当输入值匹配yyyy-MM的有效格式（年份为19xx或20xx，月份01-12）时，才触发表单提交。提供两种适配不同场景的方案：

方案1：仅在change事件中验证格式后提交

适合依赖输入框失去焦点或选择日期的场景，避免输入过程中误提交：

<input class="submit-form-on-change" type="month" name="@Model.DatePickerFormKey" value="@Model.InitialValue?.ToString("yyyy-MM")">

<script>
    document.addEventListener('DOMContentLoaded', function () {
        // 匹配19xx或20xx年份、01-12月份的有效格式
        const validMonthRegex = /^(?:19|20)\d{2}-(0[1-9]|1[012])$/;
        
        document.getElementById('user-filter-content').querySelectorAll('.submit-form-on-change').forEach(function (element) {
            element.addEventListener('change', function () {
                // 验证输入值是否符合有效格式
                if (validMonthRegex.test(this.value.trim())) {
                    this.form.submit();
                }
                // 不符合格式则不提交，可根据需求添加用户提示
            });
        });
    }, false);
</script>

方案2：结合input事件+防抖（优化实时输入体验）

如果希望用户输入完成后自动提交，而非等待失去焦点，用防抖函数延迟验证，避免每次按键触发：

<input class="submit-form-on-change" type="month" name="@Model.DatePickerFormKey" value="@Model.InitialValue?.ToString("yyyy-MM")">

<script>
    document.addEventListener('DOMContentLoaded', function () {
        const validMonthRegex = /^(?:19|20)\d{2}-(0[1-9]|1[012])$/;
        
        // 防抖函数：延迟执行逻辑，避免频繁触发
        function debounce(func, delay = 500) {
            let timeoutId;
            return function(...args) {
                clearTimeout(timeoutId);
                timeoutId = setTimeout(() => func.apply(this, args), delay);
            };
        }
        
        document.getElementById('user-filter-content').querySelectorAll('.submit-form-on-change').forEach(function (element) {
            const handleInput = debounce(function() {
                if (validMonthRegex.test(this.value.trim())) {
                    this.form.submit();
                }
            });
            
            element.addEventListener('input', handleInput);
            // 保留change事件兼容日期选择器操作
            element.addEventListener('change', function() {
                if (validMonthRegex.test(this.value.trim())) {
                    this.form.submit();
                }
            });
        });
    }, false);
</script>

关键说明 #

• 正则表达式/^(?:19|20)\d{2}-(0[1-9]|1[012])$/的作用：
  • (?:19|20)\d{2}：限制年份为1900-2099之间的四位数字，直接排除0202这类前导零的无效年份
  • (0[1-9]|1[012])：限制月份为01-12的两位有效数字，避免00或13这类无效值
• 两种方案可根据实际交互需求选择，方案1更严谨，方案2更贴合实时输入的流畅体验。

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