Проверка пользовательских шаблонов HTML5

Question

Я пытаюсь создать проверку для ввода с 3 буквами в начале строки, затем запятой, затем пробелом и затем несколькими словами.

Например: Coz, Вы гений

Я использую этот шаблон для этой цели, pattern="^[a-zA-Z]{3}[,]{1}[a-zA-Z]{30}" также пробовал этот шаблон ^[a-zA-Z]{3}[, ][a-zA-Z\s]

Ниже приведен мой javascript для пользовательской проверки.

    var data = document.getElementById('sentence');
        data.addEventListener('invalid', function (e) {
            //console.log(data.validity);
            if (data.validity.patternMismatch) {
                e.target.setCustomValidity("Please choose from dropdown");
            } else if (!data.validity.valid) {
                e.target.setCustomValidity("This is not a valid sentence");
            }
            data.addEventListener('input', function (e) {
                e.target.setCustomValidity('');
            });
        }, false);

Я думаю, что мне не хватаетшаблон для пробела после запятой и пробела в словах.

Answer 1

Я не думаю, что атрибут шаблона браузера полностью поддерживает регулярное выражение, но ваше регулярное выражение должно быть ближе к ^[A-Za-z]{3},\s(\w+\s?)+.

Ссылка ниже делает большую работу по объяснению регулярного выражения, но здесь есть разбивка,

^[A-Za-z]{3} начинаются с 3 символов

,\s, за которыми следуют запятая и пробел

(\w+\s?)+, за которыми следует группа слова, а затем необязательный пробел,+ означает, что группа слов пространства должна появляться один или несколько раз.

EG

regex101.com / r / HOURbf / 1