React信用卡有效期输入框如何实现输入2位数字后自动加斜杠

需求说明 #

信用卡有效期录入场景需要实现自动格式化交互：用户输入满2位月份数字后，自动在月份与年份之间插入斜杠作为分隔符，例如连续输入0614时，输入框内容自动格式化为06/14。

• 允许用户直接输入连续无分隔的数字串
• 最终格式化输出格式为MM/YY或MM/YYYY

具体实现步骤 #

1. 新增格式化处理函数 #

先实现专门的格式化方法，过滤非数字字符，满足长度条件时自动插入斜杠：

// 有效期输入自动格式化
const formatExpDate = (input) => {
  // 过滤所有非数字字符，避免用户输入字母、特殊符号
  const pureDigits = input.replace(/\D/g, '');
  // 输入长度不足2位时直接返回纯数字，不需要加分隔符
  if (pureDigits.length <= 2) return pureDigits;
  // 长度超过2位时，前2位为月份，拼接斜杠后接剩余年份数字
  return `${pureDigits.slice(0,2)}/${pureDigits.slice(2)}`;
};

2. 改造原有输入变更逻辑 #

在原有校验、状态更新逻辑之前，先对输入值做格式化处理，后续逻辑统一使用格式化后的值：

const expDateOnChange = (event) => {
  // 先对原始输入做格式化
  const formattedVal = formatExpDate(event.target.value);
  // 覆写事件对象的value，后续原有逻辑无需大幅改动
  event.target.value = formattedVal;

  // 原有校验、状态更新逻辑保持不变
  if (expDateValidator(formattedVal)) {
    setExpDateValidationState({ error: false, helperText: '' });
    setPaymentInfo({
      ...paymentInfo,
      expDate: formattedVal === '' ? null : formattedVal,
    });
  } else {
    setExpDateValidationState({
      error: true,
      helperText: 'Please enter your expire date.',
    });
    setPaymentInfo({
      ...paymentInfo,
      expDate: null,
    });
  }
};

const handleExpDateChange = (event) => {
  expDateOnChange(event);
  handleInputChange(event);
};

3. 现有代码适配说明 #

• 你当前使用的校验正则/^(0[1-9]|1[0-2])\/?([0-9]{4}|[0-9]{2})$/已经兼容带斜杠、不带斜杠的输入格式，无需修改即可正常校验格式化后的值
• 输入框设置的maxLength: 5刚好匹配MM/YY格式的长度（2位月份+1位斜杠+2位年份），无需调整

进阶体验优化：如果需要解决自动插入斜杠后光标位置错位的问题，可以在格式化完成后通过input.setSelectionRange手动设置光标位置，基础业务场景下上述代码已经可以满足自动加分隔符的需求。

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