Как сделать валидацию инпута для банковской карты

Как сделать валидацию инпута для банковской карты, чтобы каждые 4 цифры стоял пробел?введите сюда описание изображения


Ответы (1 шт):

Автор решения: BabyFrontent.ru Admin

я протестировал этот код в 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/

→ Ссылка