使用JavaScript实现MM/YY格式信用卡到期日期自动补斜杠

嘿，刚好我之前做过类似的信用卡日期输入处理，这就帮你把原有的出生日期脚本改造成适合MM/YY格式的版本！

首先给你完整的适配代码，你可以直接替换到表单里使用：

$(function() {
  const expInput = document.getElementById('ccexp');
  
  // 检查输入值是否符合规则，针对月份和年份分别处理
  function checkValue(str, max, isMonth) {
    // 月份特殊验证：必须是01-12区间
    if (isMonth) {
      if (str === '00') {
        str = '01';
      } else if (parseInt(str) > 12) {
        str = '12';
      }
    }
    // 年份可选限制：不早于当前年份的后两位（可按需删除）
    else {
      const currentYear = new Date().getFullYear() % 100;
      if (parseInt(str) < currentYear) {
        str = currentYear.toString();
      }
    }
    return str;
  }

  expInput.addEventListener('input', function(e) {
    let input = e.target.value.replace(/\D/g, ''); // 只保留数字输入
    let formattedValue = '';

    if (input.length >= 2) {
      let month = input.substring(0, 2);
      month = checkValue(month, 12, true);
      formattedValue += month + '/';
      
      if (input.length > 2) {
        let year = input.substring(2, 4);
        year = checkValue(year, 99, false);
        formattedValue += year;
      }
    } else {
      formattedValue = input;
    }

    // 限制最终输入长度为MM/YY的5位格式
    e.target.value = formattedValue.substring(0, 5);
  });

  // 处理退格时的格式修复
  expInput.addEventListener('keydown', function(e) {
    if (e.key === 'Backspace' && e.target.value.length === 3) {
      e.target.value = e.target.value.substring(0, 2);
    }
  });
});

关键修改点拆解 #

• 输入内容过滤：用replace(/\D/g, '')直接清除所有非数字字符，确保用户只能输入数字，贴合信用卡日期的输入逻辑。
• 月份专属验证：新增isMonth参数，专门处理月份的规则——必须在01-12之间，输入00会自动修正为01，输入超过12的数字会调整为12。
• 可选年份限制：我加了一个可选逻辑，确保用户输入的年份不早于当前年份的后两位（比如2024年就不能输入23及以下），如果不需要这个限制，直接删掉这部分代码即可。
• 自动补斜杠：当用户输入到第2位数字时自动插入斜杠，后续仅允许输入两位年份数字，最终限制总长度为5位（刚好是MM/YY的格式长度）。
• 退格操作适配：处理用户删除斜杠的场景，当光标在斜杠位置按退格时，自动删除斜杠并保留前两位月份数字，避免格式混乱。

另外，配合HTML属性能进一步提升用户体验：

<input type="text" id="ccexp" placeholder="MM/YY" maxlength="5" inputmode="numeric">

• maxlength="5"：强制限制输入总长度，避免用户输入过多内容
• inputmode="numeric"：在移动端会弹出数字键盘，让输入更顺畅

这样改完后，你的信用卡到期日期输入框就会和出生日期输入框一样自动格式化，同时完美贴合MM/YY的专属规则啦！

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