Что не так с моим регулярным выражением для проверки шаблона в моем вводе HTML?

Question

У меня есть поле ввода на моем сайте, и я хочу подтвердить, что это от 4 до 30 буквенно-цифровых или любых других символов._ - (точка, подчеркивание, дефис).

например, они действительны:

• привет-
• goodbye23_.sd

недопустимо:

• boo
• nospecials%
• здесь есть пробел

В моем html-файле есть эта строка:

<input id="handletext" type="text" spellcheck="false" pattern="^[\w-\.]{4,30}$" maxlength="30" />

Я получаю сообщение об ошибке в отладчике при загрузке страницы в последнем Chrome:

Значение атрибута шаблона ^ [\ w -.] {4,30} $ недопустимое регулярное выражение: Uncaught SyntaxError: недопустимое регулярное выражение: /^[\w-.]]4,30 rout$/: недопустимый класс символов.

Есть идеи, что не так с моим шаблоном?

Answer 1

Вы должны экранировать дефис или поставить его в начале / конце класса персонажа, а также убрать экранирующую обратную косую черту из ..Поскольку . не является специальным символом внутри символьного класса, его нельзя экранировать в шаблоне, скомпилированном с модификатором u (и он компилируется с этим флагом в большинстве браузеров, включая Chrome).

Использование

pattern="[\w.-]{4,30}"

Обратите внимание, что вам не нужны ^ и $, якоря автоматически добавляются движком HTML5 .

В Chorme шаблон будет скомпилирован как /^(?:[\w.-]{4,30})$/u регулярное выражение и будет соответствовать строке, состоящей из четырех-тридцати букв ASCII, цифр, _, . или - символов.

Answer 2

pattern="[\w\-\.]{4,30}" работает для меня, так что вы также можете попробовать это.
Дело в том, что вы должны избегать дефиса.