Валідація форм. Атрибут pattern в HTML5

27

Від автора: вітаю вас, друзі. У попередній статті ми досить легко і просто реалізували найпростіший механізм валідації полів форми, використовуючи типи полів email і url. Однак таким чином ми можемо перевірити тільки обмежений набір форматів даних. Як же бути? Все просто — використовуємо атрибут HTML5 — pfttern. Приступимо.

Вихідні файли поточної статті ви можете завантажити за посиланням.

Отже, візьмемо код з попереднього уроку. В формі у нас є поле для введення телефону, що має тип tel:

Але на відміну від полів типу email, наприклад, поле телефону не валидируется браузером і користувач може ввести замість телефону, що завгодно. В принципі, таке положення речей цілком закономірно. Браузер не знає, який формат номера нам потрібен, оскільки формати можуть бути різними.

Як вже зазначалося вище, в такій ситуації нам допоможе атрибут pattern. За допомогою нього ми можемо перевірити формат не тільки телефонного номера, але і абсолютно будь-які дані. Все що нам потрібно, щоб скористатися атрибутом, це знання мови регулярних виразів. До речі, познайомитися з регулярними виразами ви можете в нашому курсі.

Отже, давайте складемо шаблон регулярного виразу, який буде пропускати тільки телефони, скажімо, наступного формату: (XXX) XXX-XX-XX (про це форматі обов’язково повідомити користувача в описі поля).

І перевіримо, чи спрацює наш шаблон:

Працює! Якщо ввести рядок, що не відповідає заданому шаблону, браузер повідомить про це. Точно таким же чином ми можемо перевіряти будь-які дані, оскільки регулярні вирази дозволяють дуже гнучко організувати перевірку на відповідність потрібного формату даних.

Наприклад, в якості імені я хочу дозволити тільки літери та прогалини, нічого крім. Це просто:

Тепер якщо спробувати ввести в якості імені щось, відповідне формату, отримаємо попередження:

Чудово, чи не так? На цьому дану статтю можна завершувати. Додатково по даній темі ви можете подивитися цей урок. На цьому все. Удачі!