验证主卡格式

如何解决验证主卡格式

我需要为每个输入自动创建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个数字自动创建的空间

解决方法

您可以使用React Number Format，它是Number Inputs的重要组成部分，并且它们已经具有信用卡号的屏蔽支持，请看here

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

,

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

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 />