React Material UI信用卡输入框卡号格式化与长度限制咨询

核心规则 #

不同卡种对应规则如下：

• 美国运通（AMERICAN_EXPRESS）：总长度15位，分段格式为「4位 6位 5位」
• VISA/万事达/Discover/JCB/大莱卡：总长度16位，分段格式为「4位 4位 4位 4位」

实现逻辑 #

整体调整分4步：

1. 提前定义卡种对应的长度、格式化规则，避免硬编码判断
2. 输入时先过滤所有非数字字符，基于纯数字识别卡类型
3. 按当前识别到的卡类型截断超长输入，从根源限制输入长度
4. 按对应分段规则给纯数字加空格，将格式化后的值绑定到输入框实现实时分段效果，同时单独存储无格式纯数字用于提交、校验

可直接复用的代码 #

首先抽离卡种公共规则，可直接放在组件外部或组件内常量区域：

const CARD_RULES = {
  AMERICAN_EXPRESS: {
    maxLength: 15,
    format: (val) => val.replace(/^(\d{4})(\d{0,6})(\d{0,5}).*/, '$1 $2 $3').trim()
  },
  DEFAULT: {
    maxLength: 16,
    format: (val) => val.replace(/(\d{4})(?=\d)/g, '$1 ').trim()
  }
}

修改后的onChange方法：

const onChange = (e) => {
  const { name, value } = e.target
  // 非卡号字段走原有逻辑
  if (name !== 'cardnumber') {
    setInput(prev => ({...prev, [name]: value}))
    return
  }

  // 提取纯数字
  const cleanValue = value.replace(/\D/g, '')
  let detectedCard = null

  const regexPattern = {
    MASTERCARD: /^5[1-5][0-9]{1,}|^2[2-7][0-9]{1,}$/,
    VISA: /^4[0-9]{2,}$/,
    AMERICAN_EXPRESS: /^3[47][0-9]{5,}$/,
    DISCOVER: /^6(?:011|5[0-9]{2})[0-9]{3,}$/,
    DINERS_CLUB: /^3(?:0[0-5]|[68][0-9])[0-9]{4,}$/,
    JCB: /^(?:2131|1800|35[0-9]{3})[0-9]{3,}$/
  };

  // 识别卡类型（即原逻辑中的value2）
  for (const card in regexPattern) {
    if (cleanValue.match(regexPattern[card])) {
      detectedCard = card
      break
    }
  }

  // 匹配对应规则，截断超长输入
  const currentRule = detectedCard === 'AMERICAN_EXPRESS' ? CARD_RULES.AMERICAN_EXPRESS : CARD_RULES.DEFAULT
  const truncatedValue = cleanValue.slice(0, currentRule.maxLength)
  // 生成分段格式的展示值
  const formattedValue = currentRule.format(truncatedValue)

  // 更新state
  setInput(prev => ({
    ...prev,
    cardnumber: formattedValue, // 输入框绑定该值，实时展示分段效果
    cardnumberRaw: truncatedValue, // 无格式纯数字，提交表单/校验时使用
    cardType: detectedCard // 存储识别到的卡类型，可用于展示卡种图标等场景
  }))
};

TextField组件调整（仅补充了优化属性，原有props保留即可）：

<TextField
  name="cardnumber"
  label="Card number"
  error={errors.cardnumber}
  value={input.cardnumber || ''}
  onChange={onChange}
  helperText={errors.cardnumber && "Invalid card number"}
  className={classes.cardHolderNumberInputs}
  inputProps={{
    inputMode: 'numeric', // 移动端自动唤起数字键盘
    autoComplete: 'cc-number' // 支持浏览器自动填充信用卡号
  }}
/>

注意事项 #

• 表单提交时请使用input.cardnumberRaw字段，该字段为无空格纯数字，长度符合对应卡种要求，不会包含格式字符
• 美国运通卡输入时会自动按4-6-5分段，输入到15位后无法继续输入，完全符合要求
• 其余卡种自动按4位一组分段，最多输入16位
• 后续如果需要支持14位大莱卡等特殊卡种，只需在CARD_RULES中新增对应配置即可，无需修改核心逻辑

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