主卡格式验证

Question

我需要为我的输入自动创建每个4个数字的空间。这是我的代码：

const [deposit, setDeposit] = useState('');
const [withdrawal, setWithdrawal] = useState('');
const [cardNumber, setCardNumber] = useState('');
const inputValidation = event => {
const onlyNumbers = /^[0-9\b]+$/;
const creditNumberCorrectFormat = '';
if (event.target.value === '' || onlyNumbers.test(event.target.value)) {
    if (event.target.name === 'cardNumber') {
        setCardNumber(event.target.value);
    } else {
        setDeposit(event.target.value);
        setWithdrawal(event.target.value);
    }
}

在这里，我只能键入数字。我需要以这种格式输入卡号1111 2222 3333 4444。自动创建空间，每个4个数字

Answer 1

您可以使用React Number Format，它是数字输入的一个很好的组件，并且它们已经对信用卡号码提供了屏蔽支持，请在此处查看

<NumberFormat format="#### #### #### ####" mask="_"/>

Answer 2

您正在寻找这样的正则表达式：

const input = document.querySelector('#input');
const output = document.querySelector('#output');

input.addEventListener('input', (evt) => {
  const { value } = evt.target;
  const formattedValue = value.replace(/\s?/g, '').replace(/(\d{4})/g, '$1 ').trim();
  
  output.value = formattedValue;
});

<label>Input:</label><input id='input' type='number' />
<label>Output:</label><input id='output' readonly />