Как написать буквенно-цифровой шаблон в HTML5?

Question

У меня есть поле названия должности в форме, где я хочу разрешить ответ, который содержит только буквы и цифры, где требуется хотя бы одна буква, а любые цифры необязательны.Я использую следующий шаблон в своем входном теге:

pattern="\w*[a-zA-Z]\w*"

Этот шаблон проверяет тестеры RegEx, которые я пытался использовать, но когда я предоставлю ответ в форме «Менеджер 2», он будетне дай мне продолжить.Есть ли что-то другое в том, как браузеры интерпретируют

Answer 1

Если вы используете атрибут формы в форме, подразумеваются ^ и $, поэтому они будут соответствовать всему значению.Ваш шаблон \w*[a-zA-Z]\w* соответствует как минимум одному символу az, но не пробелу.

Если вы хотите соответствовать Manager 2, вы можете использовать свой шаблон, за которым следует группа, которая повторяется 0+ раз, совпадая с пробелом и 1+ символы слова.

\w*[a-zA-Z]\w*(?: \w+)*

См. демонстрационную версию regex

Обратите внимание, что \w также соответствует подчеркиванию.

Немного более широкий шаблон дляразрешить несколько пробелов, а также в конце:

^\w*[a-zA-Z][ \w]*

Regex demo

Answer 2

Ваше оригинальное выражение просто отлично и отсутствует пробел. Здесь мы можем начать с простого шаблона, может быть, что-то похожего на:

[A-Za-z\s0-9]+

Если бы это было необходимо, мы могли бы добавить группу захвата вокруг нее, чтобы сохранить наши данные в $1:

([A-Za-z\s0-9]+)

RegEx

Если это выражение нежелательно, его можно изменить или изменить в regex101.com .

RegEx Circuit

jex.im визуализирует регулярные выражения:

Демо

const regex = /([A-Za-z\s0-9]+)/gm;
const str = `Manager 2`;
let m;

while ((m = regex.exec(str)) !== null) {
    // This is necessary to avoid infinite loops with zero-width matches
    if (m.index === regex.lastIndex) {
        regex.lastIndex++;
    }
    
    // The result can be accessed through the `m`-variable.
    m.forEach((match, groupIndex) => {
        console.log(`Found match, group ${groupIndex}: ${match}`);
    });
}

DOMO