Валидация форм на стороне клиента

Начать. Это бесплатно
или регистрация c помощью Вашего email-адреса
Валидация форм на стороне клиента создатель Mind Map: Валидация форм на  стороне клиента

1. Валидация, выполняемая в браузере, называется валидацией на стороне клиента, а выполняемая на сервере — валидацией на стороне сервера.

1.1. Валидация на стороне клиента — это первичная проверка введённых данных, которая существенно улучшает удобство взаимодействия с интерфейсом; обнаружение некорректных данных на стороне клиента позволяет пользователю немедленно их исправить.

1.2. Типы валидации на стороне клиента

1.2.1. Встроенная валидация форм

1.2.2. JavaScript-валидация

2. Причины настройки валидации данных

2.1. Мы хотим получать правильные данные в правильном формате

2.2. Мы хотим защитить данные пользователей

2.3. Мы хотим защитить себя

3. Валидация с помощью регулярного выражения

3.1. Регулярное выражение (regex) — это шаблон, который может быть использован для сопоставления набора символов в текстовой строке, поэтому они идеально подходят для валидации формы и используются для множества других целей в JavaScript.

4. Как я могу помочь пользователю исправить не валидные данные?Как я могу помочь пользователю исправить не валидные данные?Как я могу помочь пользователю исправить не валидные данные?Как я могу помочь пользователю исправить не валидные данные?

4.1. атрибуты валидации у элементов формы

4.1.1. required

4.1.2. minlength и maxlength

4.1.3. min и max

4.1.4. type

4.1.5. pattern

4.2. В некоторых случаях, например, при необходимости поддержки устаревших браузеров или кастомных элементов формы, вы не сможете или не захотите использовать Constraint Validation API.

4.2.1. Для создания своего валидатора формы, задайте себе несколько вопросов:

4.2.1.1. Какую тип валидации я должен выполнить?

4.2.1.2. Что мне нужно делать, если форма не проходит валидацию?

4.2.1.3. Как я могу помочь пользователю исправить не валидные данные?

5. Валидация форм с помощью JavaScript

5.1. Если нужно управлять внешним видом и нужно управлять внешним видом встроенных сообщений об ошибке или работать с устаревшими браузерами, которые не поддерживают встроенную валидацию форм HTML, вам следует использовать JavaScript

5.2. Constraint Validation API

5.2.1. Большинство браузеров поддерживают Constraint Validation API, который состоит из набора свойств и методов, доступных на DOM-интерфейсах следующих элементов форм:

5.2.1.1. HTMLButtonElement (представляет элемент <button>)

5.2.1.2. HTMLFieldSetElement (представляет элемент <fieldset>)

5.2.1.3. HTMLInputElement (представляет элемент <input>)

5.2.1.4. HTMLOutputElement (представляет элемент <output>)

5.2.1.5. HTMLSelectElement (представляет элемент <select>)

5.2.1.6. HTMLTextAreaElement (представляет элемент <textarea>)

6. Проверка форм без встроенного API