Web开发新手求教：信用卡到期日期验证功能优化方案

Hey there! 作为Web开发新手，你已经迈出了不错的第一步——实现了基础的格式校验。接下来咱们把需要的额外验证都加上，让这个功能更严谨。

修改后的完整代码 #

<label for="expiration-date"> Card Expiration Date </label>
<input type="text" name="exp-date" id="date" placeholder="MM/DD/YYYY" required>
<button type="submit" class="submitbtn" onclick="return checkdate()">Submit</button>

<script>
function checkdate() {
    // 匹配MM-DD/YYYY格式，支持三种分隔符：- / .
    var dateReg = /^\d{2}([./-])\d{2}\1\d{4}$/;
    var dateInput = document.getElementById("date");
    var dateValue = dateInput.value.trim();

    // 1. 基础格式校验
    if (!dateValue.match(dateReg)) {
        alert("请输入正确的日期格式（如：MM/DD/YYYY）");
        return false;
    }

    // 拆分日期各部分：先获取分隔符，再拆分
    var separator = dateValue.match(/([./-])/)[1];
    var [monthStr, dayStr, yearStr] = dateValue.split(separator);
    
    // 转换为数字
    var month = parseInt(monthStr, 10);
    var day = parseInt(dayStr, 10);
    var year = parseInt(yearStr, 10);

    // 2. 校验月份合法性（1-12）
    if (month < 1 || month > 12) {
        alert("月份必须是1-12之间的数字");
        return false;
    }

    // 3. 校验日期合法性：根据月份判断最大天数，考虑闰年
    var maxDays;
    switch(month) {
        case 2:
            // 闰年判断：能被4整除但不能被100整除，或者能被400整除
            maxDays = (year % 4 === 0 && year % 100 !== 0) || (year % 400 === 0) ? 29 : 28;
            break;
        case 4: case 6: case 9: case 11:
            maxDays = 30;
            break;
        default:
            maxDays = 31;
    }
    if (day < 1 || day > maxDays) {
        alert(`该月份的日期范围是1-${maxDays}`);
        return false;
    }

    // 4. 检查日期是否过期：创建输入日期的对象（注意月份是0开始，所以减1）
    var inputDate = new Date(year, month - 1, day);
    // 获取当前日期，去掉时分秒，避免当天的日期被误判为过期
    var currentDate = new Date();
    currentDate.setHours(0, 0, 0, 0);

    if (inputDate < currentDate) {
        alert("该日期已过期，请输入有效的到期日期");
        return false;
    }

    // 所有校验通过
    return true;
}
</script>

新增验证的详细解释 #

• 月份合法性校验：直接判断转换后的月份数字是否在1-12之间，避免出现00、13这类无效值。
• 日期合法性校验：根据不同月份设置最大天数，同时处理闰年的二月（29天），确保输入的日期符合实际日历规则。
• 过期检查：
  • 把输入的日期转换成Date对象（注意JavaScript的月份是0索引，所以要减1）。
  • 创建当前日期对象并清空时分秒，这样当天的日期不会被误判为过期（比如今天是5月15日，输入5月15日是有效的）。
  • 比较两个日期，如果输入日期早于当前日期，则提示过期。

小提示 #

如果是信用卡到期日期，其实很多场景只需要月份和年份（因为信用卡到期日默认是当月最后一天），如果你后续想简化成MM/YYYY格式，只需要调整正则和校验逻辑即可，有问题可以再问哦！

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