当输入过期日期时，自动斜杠

有一个信用卡组件。它要求用户输入信用卡信息。但是，当用户输入信用卡到期日期时，我希望在日期和月份之间自动添加一个斜杠。我搜索截止日期条目为"自动斜杠"，当输入2位数字时。但是我还没有成功。

i can write;0614

我想要的格式;06/14

我怎么解决它?

const [expDateValidationState, setExpDateValidationState] = useState({
error: false,
helperText: '',
});
const expDateOnChange = (event) => {
if (expDateValidator(event.target.value)) {
setExpDateValidationState({ error: false, helperText: '' });
setPaymentInfo({
...paymentInfo,
expDate: event.target.value === '' ? null : event.target.value,
});
} else {
setExpDateValidationState({
error: true,
helperText: 'Please enter your expire date.',
});
setPaymentInfo({
...paymentInfo,
expDate: null,
});
}
const handleExpDateChange = (event) => {
expDateOnChange(event);
handleInputChange(event);
};

验证器

export const expDateValidator = (expDate) => {
const expDateRegex = /^(0[1-9]|1[0-2])/?([0-9]{4}|[0-9]{2})$/;
return expDateRegex.test(expDate);
};

<AS.TextField
placeholder="aa/YY"
inputProps={{ maxLength: 5 }}
onChange={handleExpDateChange}
error={expDateValidationState.error}
helperText={expDateValidationState.helperText}
name="expDate"
value={paymentInfo.expDate}
/>

试试这个

const expDateOnChange = (event) => { if (expDateValidator(event.target.value)) { setExpDateValidationState({ error: false, helperText: '' }); let value = event.target.value; if (value.length===2) value += "/" setPaymentInfo({ ...paymentInfo, expDate: event.target.value === '' ? null : value, }); } else { setExpDateValidationState({ error: true, helperText: 'Please enter your expire date.', }); setPaymentInfo({ ...paymentInfo, expDate: null, }); }

当我更改一些数据时，我通常将其置于状态。如果您还将数据保持在该状态，则可以将handleExpDateChange修改为如下内容:

const [expirationDate, setExpirationDate] = useState(); const handleExpDateChange = (event) => { if (event.target?.value?.length === 2 && expirationDate.length < 3) { setExpirationDate(event.target.value + '/') } else { setExpirationDate(event.target.value) } }
如果你使用三元表达式或任何其他方式，这可以简化，但这只是非常简单的，我想到的第一件事。希望对大家有所帮助。

相关内容

最新更新

热门标签：