如何在React Native中无第三方库实现MM/YY格式信用卡有效期输入掩码

1 修正自动填充配置错误 #

你原来的iOS端自动填充配置写错了，会导致无法触发系统的信用卡有效期自动填充：

• iOS端textContentType应该改为creditCardExpiration，而不是creditCardNumber
• 安卓端autoCompleteType="cc-exp"配置正确
• 原maxLength={7}不需要，MM/YY格式总长度为5，改为maxLength={5}即可

2 实现MM/YY格式化函数 #

formatMMY函数逻辑如下，覆盖输入校验、自动补斜杠、删除适配、自动填充长格式兼容场景：

const formatMMY = (input: string): string => {
  // 第一步：过滤所有非数字字符，兼容自动填充带的特殊符号
  const pureNumbers = input.replace(/\D/g, '');

  // 空输入直接返回
  if (pureNumbers.length === 0) return '';

  // 兼容自动填充的6位长格式（MMYYYY），自动截取年份后两位
  const validNumbers = pureNumbers.length === 6 
    ? pureNumbers.slice(0, 2) + pureNumbers.slice(4) 
    : pureNumbers;

  // 处理月份合法性校验
  let monthPart = validNumbers.slice(0, 2);
  if (monthPart.length === 1) {
    // 第一位输入大于1，自动补0生成合法月份，比如输入3→03
    if (parseInt(monthPart) > 1) {
      monthPart = `0${monthPart}`;
    }
  } else if (monthPart.length === 2) {
    // 月份超过12或者为0，强制限制为12
    const monthNum = parseInt(monthPart);
    if (monthNum > 12 || monthNum === 0) {
      monthPart = '12';
    }
  }

  // 拼接年份部分
  const yearPart = validNumbers.slice(2, 4);

  // 长度超过2位自动插入斜杠
  return yearPart.length ? `${monthPart}/${yearPart}` : monthPart;
};

3 修正后完整组件代码 #

import { useState } from 'react';
import { Platform } from 'react-native';
// 替换为你的Input组件实际引入路径
import Input from './Input';

interface InputCreditCardExpirationDateProps {
  placeholder?: string;
  label?: string;
  darkMode?: boolean;
  onChangeText: (text: string) => void;
}

const InputCreditCardExpirationDate = ({
  placeholder,
  label,
  darkMode,
  onChangeText
}: InputCreditCardExpirationDateProps) => {
  const [value, setValue] = useState<string>('');

  const formatMMY = (input: string): string => {
    const pureNumbers = input.replace(/\D/g, '');
    if (pureNumbers.length === 0) return '';
    const validNumbers = pureNumbers.length === 6 
      ? pureNumbers.slice(0, 2) + pureNumbers.slice(4) 
      : pureNumbers;
    let monthPart = validNumbers.slice(0, 2);
    if (monthPart.length === 1) {
      if (parseInt(monthPart) > 1) {
        monthPart = `0${monthPart}`;
      }
    } else if (monthPart.length === 2) {
      const monthNum = parseInt(monthPart);
      if (monthNum > 12 || monthNum === 0) {
        monthPart = '12';
      }
    }
    const yearPart = validNumbers.slice(2, 4);
    return yearPart.length ? `${monthPart}/${yearPart}` : monthPart;
  };

  const onChange = (text: string): void => {
    const formattedText = formatMMY(text);
    setValue(formattedText);
    onChangeText(formattedText);
  };

  return (
    <Input
      value={value}
      placeholder={placeholder || 'Expires'}
      label={label ? label : 'Expires'}
      keyboardType="numeric"
      onChangeText={onChange}
      autoCompleteType={Platform.OS === 'android' ? 'cc-exp' : undefined}
      textContentType={Platform.OS === 'ios' ? 'creditCardExpiration' : undefined}
      maxLength={5}
      darkMode={darkMode || false}
    />
  );
};

export default InputCreditCardExpirationDate;

4 可选优化 #

如果需要更严格的校验，可以在函数中补充年份合法性判断：比如取当前年份的后两位，输入的年份小于当前年后两位的话视为过期，自行补充逻辑即可。

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