求助：实现keyup事件下dd-mm-yyyy格式日期的正则验证

问题说明 #

现有代码仅能对yyyy-mm-dd格式的日期输入做实时校验，需要修改为支持dd-mm-yyyy格式的实时输入验证，要求在输入框keyup事件中实时校验输入内容，不符合规则的输入自动回退，并通过背景色给出视觉提示。

解决方案 #

核心是调整正则表达式以匹配dd-mm-yyyy的结构，同时保留原有的实时校验与输入回退逻辑：

完整代码

HTML部分

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<input id="date" style="font-size: 20px" maxlength="10" type="text" />

JavaScript部分

$("#date").on("keyup", function() {
    // 匹配dd-mm-yyyy格式的正则，支持输入过程中的部分合法状态
    let valid = /^\d{0,2}$|^\d{2}-?$|^\d{2}-(?:0?[1-9]|1[012])-?$|^\d{2}-(?:0?[1-9]|1[012])-(?:0?[1-9]|[12]\d|3[01])?$/.test(this.value);
    let input = this.value;
    
    if (!valid) {
        // 回退到上一个合法输入
        this.value = input.substring(0, input.length - 1);
        this.style.backgroundColor = '#EEA39C';
    }
    // 延迟恢复正常背景色
    setTimeout(() => { this.style.backgroundColor = '#88DD85'; }, 700);
});

正则表达式说明 #

• ^\d{0,2}$：允许输入0-2位数字（日期的前两位，如1、23）
• ^\d{2}-?$：允许输入两位日期后可选的短横线（如23-）
• ^\d{2}-(?:0?[1-9]|1[012])-?$：匹配日期+短横线+合法月份（01-12，支持省略前导零如23-9-）
• ^\d{2}-(?:0?[1-9]|1[012])-(?:0?[1-9]|[12]\d|3[01])?$：匹配完整或部分完成的dd-mm-yyyy格式（如23-9-2024、23-12-3）

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