Добавить условие, чтобы принимать только символы и цифры в javascript

Question

У меня есть код javascript, который форматирует в поле ввода следующий формат: xxxx-xxxx-xxxx-xxxx

Я хочу также, чтобы в дополнение к форматированию было добавлено условие для приема букв и цифр / ^ [a-zA-Z0-9] $ / как это сделать внутри функции?

это мой ввод:

  <div>{{ form_widget(form.lien, {'attr':{'class': 'form-control' ,'placeholder' :' Format xxxx-xxxx-xxxx-xxxx' ,'maxlength' : '19','onkeypress':'keyPressLien(event,"'~form.lien.vars.id~'");'   }}) }}</div>

это функция javascript:

   function keyPressLien(e, id) {
            var phone = document.getElementById(id);

            var regex = /^[a-zA-Z0-9]$/;

            if (e.key !== "Backspace") {
                if (phone.value.length === 4) {
                    phone.value = phone.value + '-';
                }
                if (phone.value.length === 9) {
                    phone.value = phone.value + '-';
                }
                if (phone.value.length === 14) {
                    phone.value = phone.value + '-';
                }

            }
        }

Answer 1

Шаблон, который вы описали xxxx-xxxx-xxxx-xxxx, можно найти точно с помощью регулярного выражения:

(\w{4}-){3}(\w{4})

если вы хотите расширить это на любое количество шаблонов 'xxxx-', а затем окончательно завершить 'xxxx', вы можете заменить '{3}' после первой группировки на '+'

(\w{4}-)+(\w{4})

, но это также может найти совпадение с группировками, в которых по четырем буквенно-цифровым символам по обе стороны от дефиса есть, поэтому, если вы знаете, что вам нужно ровно 16 буквенно-цифровых символов с дефисами через каждые 4 символа, используйте первый.

Вы можете использовать функцию CTRL + F в Notepad ++ вместе с шпаргалкой регулярных выражений для разработки более сложных строк регулярных выражений для точного сопоставления входных данных. Убедитесь, что вы оставили достаточно комментариев, чтобы напомнить себе или другому разработчику о том, что должна делать ваша строка регулярного выражения!

Answer 2

Просто чтобы упомянуть, вам не нужно использовать JS. Вы можете установить регулярное выражение непосредственно в input по атрибуту pattern. Пример:

<input type="text" name="phone" pattern="[a-zA-Z0-9]" title="Phone number">

Обратите внимание, что pattern принимается только тогда, когда type="text", а не number или что-либо еще. Для получения дополнительной информации об использовании pattern, проверьте this .