Шаблон регулярного выражения HTML5 для проверки текстового поля: разрешать только алфавит, пробелы и некоторые символы

Question

Я создаю форму в формате html и для ввода текста хочу иметь проверку регулярного выражения, которая позволяет пользователю вводить только буквы алфавита, цифры и определенные символы;

/ - forward slash

- - hyphen

. - period (full stop)

& - ampersand

  - spaces

Я пробовал этот шаблон, но безрезультатно:

[a-zA-Z0-9\/\-\.\&\ ]

Мой HTML-код:

<input type="text" id="payment_reference" name="payment_reference" maxlength="18" value="' . $payment_reference_default . '" pattern="[a-zA-Z0-9\/\-\.\&\ ]" required>

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

Answer 1

Вам необходимо удалить экранирование от каждого не специального символа , потому что в FF (и Chrome) регулярное выражение HTML5 скомпилировано с модификатором u, и оно накладывает большее ограничение на шаблон.Чтобы включить сопоставление 1 или более разрешенных символов, добавьте + после класса символов:

pattern="[a-zA-Z0-9/.& -]+"

Обратите внимание, что все специальные символы в вашем шаблоне, кроме -, не являются специальными внутри класса символов.Следовательно, только - может быть экранировано, но обычно помещают его в начало / конец класса символов, чтобы избежать переэкранирования.

input:valid {
  color: black;
}
input:invalid {
  color: red;
}

<form name="form1"> 
 <input pattern="[a-zA-Z0-9/.& -]+" title="Please enter the data in correct format." />
 <input type="Submit"/> 
</form>

Answer 2

Вам необходимо правильно экранировать символ.

- Я не буду избегать его здесь, потому что когда вы используете его как первый или последний символ в классе символов, вам не нужно экранировать

[a-zA-Z0-9\/.&\s-]

Демо