1 of 16

Валідація та збереження даних форм

За навчальною програмою 2018 року

Урок 26

10

(11)

2 of 16

Актуалізація опорних знань і життєвого досвіду

Розділ 4 § 26

Пропоную визначити свої асоціації до слова «валідація»

10�(11)

3 of 16

Валідація та збереження�даних форм

Розділ 4 § 26

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

10�(11)

4 of 16

Валідація та збереження�даних форм

Розділ 4 § 26

Способи валідації даних форм:

Спеціалізовані типи вводу

Обов'язкові Поля

Обмеження

Стайлінг

Підказки

Шаблони

10�(11)

5 of 16

Валідація та збереження�даних форм

Розділ 4 § 26

Спеціалізовані типи вводу

Типи вводу можуть бути використані для створення полів вводу, які будуть приймати тільки певний тип даних.

Якщо браузер не підтримує цей тип вводу, це поле буде вести себе, як звичайне поле для введення тексту. Також корисно знати, що деякі поля (наприклад, email і tel) викликають відкриття спеціалізованої клавіатури у мобільних пристроїв.

10�(11)

6 of 16

Валідація та збереження�даних форм

Розділ 4 § 26

Обов'язкові Поля

Найпростішою функцією перевірки HTML для використання є required атрибут. Якщо ви хочете зробити введення обов'язковим, ви можете помітити елемент, використовуючи цей атрибут. Якщо цей атрибут встановлений, форма не буде відправлятися (і буде відображатися повідомлення про помилку.

10�(11)

7 of 16

Валідація та збереження�даних форм

Розділ 4 § 26

Обмеження

Ми можемо встановити деякі основні обмеження, такі як максимальна довжина, мінімальні і максимальні значення для числових полів. Щоб обмежити довжину поля введення і textareas, використовуйте атрибут maxlength. Це означатиме, що забороняється введення значення, яке є більшим зазначеного в maxlength. Якщо користувач намагатиметься вставити з буферу рядок більший зазначеного, то форма просто обріже його.

10�(11)

8 of 16

Валідація та збереження�даних форм

Розділ 4 § 26

Обмеження

Поле <input type="number"> використовує мах та min атрибути, щоб створити діапазон можливих значень (в нашому прикладі ми зробили мінімальний допустимий вік 18).

10�(11)

9 of 16

Валідація та збереження�даних форм

Розділ 4 § 26

Стайлінг

CSS3 псевдо-класи дозволяють нам стилювати будь-які поля форми в залежності від її стану.

У нашому демо ми об'єднали в valid та invalid селектори з псевдо-класом focus, щоб змінювати колір поля форми на червоний або зелений, якщо користувач вибирає їх і починає заповнювати.

10�(11)

10 of 16

Валідація та збереження�даних форм

Розділ 4 § 26

Підказки

Ви, напевно, помітили, що при спробі відправити форму з невірно заповненими полями, з'являється спливаюче вікно. Встановивши атрибут title наших полів, ми можемо додавати підказки про те, які дані очікуються.

10�(11)

11 of 16

Валідація та збереження�даних форм

Розділ 4 § 26

Шаблони

Атрибут pattern дозволяє розробникам задавати регулярний вираз, яким браузер буде регулювати введення даних користувачем, перш ніж дозволити відправку даних.

Тепер, з можливістю фільтрувати вхідні значення, форма в нашому прикладі приймає тільки повні адреси електронної пошти. Ось як це можна використовувати:

10�(11)

12 of 16

Актуалізація опорних знань і життєвого досвіду

Розділ 4 § 26

Перевірка форми не вимагає складного JavaScript, але вона вимагає ретельного вивчення користувача. Завжди пам'ятайте, щоб допомогти вашому користувачеві виправити дані, які вони надають. Для цього обов'язково виконайте наступні дії:

Відображати явні повідомлення про помилки.

Будьте правдоподібні щодо формату введення.

Вкажіть, де саме відбувається помилка (особливо на великих формах).

10�(11)

13 of 16

Запитання для рефлексії

Розділ 4 § 26

Яких знань і вмінь я набув на уроці?

Над чим мені потрібно ще попрацювати?

Про які успіхи на уроці слід розповісти батькам?

Про що хотілося б дізнатися ще?

10�(11)

14 of 16

Домашнє завдання

Розділ 4 § 26

Продовжити пізнавально-дослідницьку діяльність з питань створення форм

10�(11)

15 of 16

Працюємо за комп’ютером

Розділ 4 § 26

10�(11)

16 of 16

Дякую за увагу!

За навчальною програмою 2018 року

Урок 26

10

(11)