HTML Input Pattern

HTML-атрибут pattern используется для указания шаблона ввода для элемента . Он позволяет программисту определить регулярное выражение, которое должно совпадать с введенными данными пользователем.

Примеры:

1. Валидация поля для ввода чисел:

В этом примере мы указали атрибут pattern="[0-9]+", который говорит о том, что пользователь может вводить только цифры от 0 до 9. Если пользователь попытается ввести что-то отличное от цифр, то HTML5 будет отображать сообщение с текстом, указанным в атрибуте title="Введите число". Атрибут required указывает на то, что поле обязательно для заполнения.

2. Валидация поля для ввода email:

В этом примере мы использовали атрибут type="email", который говорит о том, что пользователь должен ввести email адрес. Атрибут pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$" указывает на то, что введенный адрес должен соответствовать определенному регулярному выражению. Если пользователь введет неправильный email адрес, то HTML5 будет отображать сообщение с текстом, указанным в атрибуте title="Введите email адрес". Атрибут required указывает на то, что поле обязательно для заполнения.

3. Валидация поля для ввода пароля:

В этом примере мы использовали атрибут type="password", чтобы скрыть вводимые символы. Атрибут pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}" указывает на то, что введенный пароль должен соответствовать определенному регулярному выражению. В данном случае, пароль должен содержать хотя бы одну цифру, одну прописную и одну заглавную букву, и быть не менее 8 символов. Если пользователь введет пароль, не удовлетворяющий данным требованиям, то HTML5 будет отображать сообщение с текстом, указанным в атрибуте title="Пароль должен содержать хотя бы одну цифру, одну прописную и одну заглавную букву, и быть не менее 8 символов". Атрибут required указывает на то, что поле обязательно для заполнения.

Это лишь несколько примеров использования атрибута pattern. Он очень удобен для валидации вводимых данных на клиентской стороне и позволяет программисту определить точные требования к данным, которые пользователь вводит в форму.