Как сделать валидацию инпута для банковской карты, чтобы каждые 4 цифры стоял пробел?
-
Учебные задания допустимы в качестве вопросов только при условии, что вы пытались решить их самостоятельно перед тем, как задать вопрос. Пожалуйста, отредактируйте вопрос и укажите, что именно вызвало у вас трудности при решении задачи. Например, приведите код, который вы написали, пытаясь решить задачу– EzioMercer16 июл 2022 в 17:06
1 ответ
я протестировал этот код в Firefox, Opera и Chrome, а также снабдил его комментариями, чтобы вам лучше было понятно.
let input = document.querySelector("#bank-card-input"),
numbers = /[0-9]/,
regExp = /[0-9]{4}/
// добавляем слушатель события на инпут
input.addEventListener("input",(ev)=>{
// не позволяем ввести ничего, кроме цифр 0-9, ограничиваем размер поля 19-ю символами
if( ev.inputType === "insertText" && !numbers.test(ev.data) || input.value.length > 19){
input.value = input.value.slice(0, input.value.length - 1)
return
}
// обеспечиваем работу клавиш "backspace","delete"
let value = input.value
if( ev.inputType === "deleteContentBackward" && regExp.test(value.slice(-4)) ){
input.value = input.value.slice(0, input.value.length - 1)
return
}
// добавяем пробел после 4 цифр подряд
if( regExp.test(value.slice(-4)) && value.length < 19){
input.value += " "
}
})
<input type="text" id="bank-card-input">
Это моё собственное решение, возможно оно в чём-то неидеально. Вы также можете использовать другие популярные решения, например следующие библиотеки:
https://github.com/RobinHerbots/Inputmask
https://igorescobar.github.io/jQuery-Mask-Plugin/