0

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

1
  • Учебные задания допустимы в качестве вопросов только при условии, что вы пытались решить их самостоятельно перед тем, как задать вопрос. Пожалуйста, отредактируйте вопрос и укажите, что именно вызвало у вас трудности при решении задачи. Например, приведите код, который вы написали, пытаясь решить задачу
    – EzioMercer
    16 июл 2022 в 17:06

1 ответ 1

3

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

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.