如何校验mm/yy格式信用卡有效期 实现过期错误提示

核心校验逻辑 #

你现有代码缺失expDateValidator校验方法，按以下规则实现即可覆盖所有要求：

• 先校验输入格式是否符合mm/yy规范，月份必须为01-12的合法值，年份为2位数字
• 拆分输入的月份、短年份，将2位年份补全为4位（当前流通信用卡有效期均为20xx年段，直接拼接20前缀即可）
• 对比当前年月：输入年份早于当前年直接判定无效；输入年份等于当前年时，月份小于当前月判定无效
• 注意：JS原生Date对象的月份返回值为0-11，对应实际1-12月，取当前月份时需要做+1处理

/**
 * 信用卡有效期校验函数
 * @param {string} value 输入的有效期字符串
 * @returns {boolean} 校验是否通过
 */
const expDateValidator = (value) => {
  // 基础格式正则校验：月份01-12，分隔符为/，后接2位年份
  const formatReg = /^(0[1-9]|1[0-2])\/(\d{2})$/;
  if (!formatReg.test(value?.trim())) return false;

  // 拆分输入的月、年
  const [inputMonth, inputYearShort] = value.split('/');
  const inputMonthNum = parseInt(inputMonth, 10);
  const inputFullYear = parseInt(`20${inputYearShort}`, 10);

  // 获取当前年月信息
  const now = new Date();
  const currentYear = now.getFullYear();
  const currentMonth = now.getMonth() + 1;

  // 年份早于当前年，无效
  if (inputFullYear < currentYear) return false;
  // 年份等于当前年但月份早于当前月，无效（当月月底前均有效，等于当前月为合法值）
  if (inputFullYear === currentYear && inputMonthNum < currentMonth) return false;

  return true;
};

原有代码优化 #

原有状态更新逻辑存在闭包读取旧state的风险，将setErrorList改为函数式更新即可，修改后的事件处理代码如下：

const expDateOnChange = (event) => {
  const inputVal = event.target.value.trim();
  if (expDateValidator(inputVal)) {
    setExpDateValidationState({ error: false, helperText: '' });
    setErrorList(prev => ({ ...prev, expDateValidationStateError: false }));
  } else {
    setExpDateValidationState({ error: true, helperText: t('payment-credit-card.error-messages.exp_date') });
    setErrorList(prev => ({ ...prev, expDateValidationStateError: true }));
  }
};

覆盖场景说明 #

• 格式非法场景：月份为00/13等非01-12值、年份不足/超过2位、分隔符非/都会触发报错
• 过期场景：和给出的示例一致，当前为06/22时输入06/21会判定为无效触发报错
• 临界场景：当前年月为06/24时，输入06/24判定为合法（信用卡有效期到对应月份最后一天），输入05/24判定为无效，输入任意大于24的年份均判定为合法

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