From bb22e9dddf7179a809408ad53e5a49488eedf3f1 Mon Sep 17 00:00:00 2001 From: Roma Zvarich Date: Tue, 27 Jul 2021 22:18:48 +0300 Subject: Перевод раздела "Constraint validation" (#1463) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * Start * Finish * Indexes * Update files/ru/web/guide/html/constraint_validation/index.html Co-authored-by: Maxim Postautov <54762420+mpstv@users.noreply.github.com> * Update files/ru/web/guide/html/constraint_validation/index.html Co-authored-by: Maxim Postautov <54762420+mpstv@users.noreply.github.com> * Update files/ru/web/guide/html/constraint_validation/index.html Co-authored-by: Maxim Postautov <54762420+mpstv@users.noreply.github.com> * Update files/ru/web/guide/html/constraint_validation/index.html Co-authored-by: Maxim Postautov <54762420+mpstv@users.noreply.github.com> Co-authored-by: Maxim Postautov <54762420+mpstv@users.noreply.github.com> --- .../guide/html/constraint_validation/index.html | 327 +++++++++++++++++++++ 1 file changed, 327 insertions(+) create mode 100644 files/ru/web/guide/html/constraint_validation/index.html (limited to 'files/ru/web/guide') diff --git a/files/ru/web/guide/html/constraint_validation/index.html b/files/ru/web/guide/html/constraint_validation/index.html new file mode 100644 index 0000000000..20f3d75ae0 --- /dev/null +++ b/files/ru/web/guide/html/constraint_validation/index.html @@ -0,0 +1,327 @@ +--- +title: Валидация ограничений +slug: Web/Guide/HTML/Constraint_validation +tags: + - CSS + - Руководство + - HTML5 + - NeedsContent + - Селекторы +--- +

Создание веб-форм всегда было сложной задачей. Хотя сверстать саму форму достаточно просто, проверить, имеет ли каждое поле валидное значение — сложнее, а информирование пользователя о проблеме может стать настоящей головной болью. HTML5 представил для форм новый механизм: он добавляет элементу {{ HTMLElement("input") }} новые семантические типы и constraint validation, чтобы облегчить проверку содержимого на стороне клиента. С помощью новых атрибутов основные ограничения могут быть проверены без использования JavaScript; более сложные ограничения могут быть проверены с помощью Constraint validation API.

+ +

Базовое введение в эти концепции с примерами можно найти в разделе Валидация форм на стороне клиента.

+ +
Примечание: HTML5-валидация ограничений не отменяет необходимости дополнительной валидации на стороне сервера. Несмотря на то, что ожидается гораздо меньшее не валидных запросов формы, они всё же могут быть отправлены несовместимыми браузерами (например, не поддерживающими HTML5 или JavaScript) или злоумышленниками, которые пытаются взломать ваше веб-приложение. Следовательно, как и в случае с HTML4, вам по-прежнему нужно производить дополнительную валидацию ограничений ввода и на стороне сервера.
+ +

Внутренние и базовые ограничения

+ +

В HTML5 базовые ограничения объявляются двумя способами:

+ + + +

Семантические типы input

+ +

Внутренние ограничения атрибута {{ htmlattrxref("type", "input") }}:

+ + + + + + + + + + + + + + + + + + + + + +
Тип inputОписание ограниченияСвязанное нарушение
<input type="URL">Значение должно быть URL-адресом, как указано в URL Living Standard.Нарушение ограничения TypeMismatch
<input type="email">Значение должно быть синтаксически правильным email-адресом, который обычно имеет формат username@hostname.tld.Нарушение ограничения TypeMismatch
+ +

Для обоих этих типов input, если установлен атрибут {{ htmlattrxref("multiple", "input") }} допускается ввод нескольких разделённых запятыми значений. Если какое-то из значений не удовлетворяет условию, описанному выше, срабатывает нарушение ограничения Type mismatch.

+ +

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

+ + + +

В дополнение к атрибуту type, описанному выше, для описания основных ограничений используются следующие атрибуты:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
АтрибутТипы input, поддерживающие атрибутВозможные значенияОписание ограниченияСвязанное нарушение
patterntext, search, url, tel, email, passwordРегулярное выражение JavaScript (без ECMAScript 5 флагов global, ignoreCase, and multilineЗначение должно соответствовать шаблону.Нарушение ограничения patternMismatch
minrange, numberВалидное числоЗначение в поле должно быть больше или равно значению атрибутаНарушение ограничения rangeUnderflow
date, month, weekВалидная дата
datetime, datetime-local, timeВалидная дата и время
maxrange, numberВалидное числоЗначение в поле должно быть меньше или равно значению атрибутаНарушение ограничения rangeOverflow
date, month, weekВалидная дата
datetime, datetime-local, timeВалидная дата и время
requiredtext, search, url, tel, email, password, date, datetime, datetime-local, month, week, time, number, checkbox, radio, file; а также элементы {{ HTMLElement("select") }} и {{ HTMLElement("textarea") }}Нет, так как это булев атрибут: его наличие означает true, а отсутствие — falseВ поле обязательно должно быть значение (если установлен атрибут)valueMissing constraint violation
stepdateЦелое число днейЕсли для шага не задан литерал any, значением должно быть min + целое число, кратное шагуНарушение ограничения stepMismatch
monthЦелое число месяцев
weekЦелое число недель
datetime, datetime-local, timeЦелое число секунд
range, numberЦелое число
minlengthtext, search, url, tel, email, password; а также элемент {{ HTMLElement("textarea") }}/td> + Целое числоЕсли атрибут не пустой, количество символов (точек кода) содержимого поля не должно быть меньше значения, указанного в атрибуте. Все символы новой строки нормализованы до одного символа (в отличие от CRLF-пар) для {{ HTMLElement("textarea") }}.Нарушение ограничения tooShort
maxlengthtext, search, url, tel, email, password; а также элемент {{ HTMLElement("textarea") }}Целое числоКоличество символов (точек кода) содержимого поля не должно превышать значение, указанное в атрибутеНарушение ограничения tooLong
+ +

Процесс валидации ограничений

+ +

Валидация ограничений выполняется с помощью Constraint Validation API либо на отдельном элементе формы, либо на уровне формы, на самом элементе {{ HTMLElement("form") }}. Способы валидации:

+ + + +

Вызов метода checkValidity() называется статической валидацией ограничений, а вызов метода reportValidity() или отправка формы называется интерактивной валидацией ограничений.

+ +
Примечание: + + +
+ +

Сложные ограничения с помощью Constraint Validation API

+ +

С помощью JavaScript и Constraint Validation API можно реализовать более сложные ограничения, например, ограничения, касающиеся сразу нескольких полей или ограничения, включающие сложные вычисления.

+ +

По сути, идея заключается в том, чтобы при наступлении определённого события поля формы (например, onchange) запускать JavaScript, чтобы определить, нарушено ограничение, и затем с помощью метода field.setCustomValidity(), задать результат валидации: пустая строка означает, что ограничение соблюдается, а любая другая строка означает, что есть ошибка и эта строка является сообщением об ошибке, которое нужно показать пользователю.

+ +

Ограничение, объединяющее несколько полей: Валидация почтового индекса

+ +

Формат почтового индекса в разных странах отличается. Мало того, что в большинстве стран может быть дополнительный префикс с кодом страны (например, D — в Германии, F — во Франции или Швейцарии), в некоторых странах, почтовые индексы содержат фиксированное количеством цифр; другие, например, Великобритания, имеют ещё более сложную структуру, допускающую в определённых местах ещё и наличие букв.

+ +
+

Примечание: Далее представлена не полная библиотека валидации почтового индекса, а скорее демонстрация ключевых концепций.

+
+ +

В качестве примера мы добавим скрипт, выполняющий валидацию органичений простой формы:

+ +
<form>
+    <label for="ZIP">ZIP : </label>
+    <input type="text" id="ZIP">
+    <label for="Country">Country : </label>
+    <select id="Country">
+      <option value="ch">Switzerland</option>
+      <option value="fr">France</option>
+      <option value="de">Germany</option>
+      <option value="nl">The Netherlands</option>
+    </select>
+    <input type="submit" value="Validate">
+</form>
+ +

Получим следующую форму:

+ +

{{EmbedLiveSample("Constraint_combining_several_fields_Postal_code_validation")}}

+ +

Сначала запишем функцию, проверяющую само ограничение:

+ +
function checkZIP() {
+  // Для каждой страны определяем шаблон, которому должен следовать почтовый индекс
+  var constraints = {
+    ch : [ '^(CH-)?\\d{4}$', "Switzerland ZIPs must have exactly 4 digits: e.g. CH-1950 or 1950" ],
+    fr : [ '^(F-)?\\d{5}$' , "France ZIPs must have exactly 5 digits: e.g. F-75012 or 75012" ],
+    de : [ '^(D-)?\\d{5}$' , "Germany ZIPs must have exactly 5 digits: e.g. D-12345 or 12345" ],
+    nl : [ '^(NL-)?\\d{4}\\s*([A-RT-Z][A-Z]|S[BCE-RT-Z])$',
+                    "Nederland ZIPs must have exactly 4 digits, followed by 2 letters except SA, SD and SS" ]
+  };
+
+  // Прочитать id страны
+  var country = document.getElementById("Country").value;
+
+  // Получить поле NPA
+  var ZIPField = document.getElementById("ZIP");
+
+  // Создать валидатор ограничения
+  var constraint = new RegExp(constraints[country][0], "");
+    console.log(constraint);
+
+  // Валидировать индекс
+  if (constraint.test(ZIPField.value)) {
+    // Индекс соответствует ограничению, мы используем ConstraintAPI, чтобы сообщить об этом
+    ZIPField.setCustomValidity("");
+  }
+  else {
+    // Индекс не соответствует ограничению , мы используем ConstraintAPI, чтобы
+    // показать сообщение, описывающее формат, требуемый для данной страны
+    ZIPField.setCustomValidity(constraints[country][1]);
+  }
+}
+
+ +

Затем мы связываем его с событием onchange для {{ HTMLElement("select") }} и с событием oninput для {{ HTMLElement("input") }}:

+ +
window.onload = function () {
+    document.getElementById("Country").onchange = checkZIP;
+    document.getElementById("ZIP").oninput = checkZIP;
+}
+ +

Вы можете посмотреть живой пример валидации индекса.

+ +

Ограничение размера загружаемого файла

+ +

Ещё одним распространённым ограничением является лимит размера загружаемых файлов. Данная проверка на стороне клиента перед отправкой на сервер требует сочетания Constraint Validation API и особенно метода field.setCustomValidity() с другим JavaScript API, в данном случае — File API.

+ +

Вот часть HTML:

+ +
<label for="FS">Select a file smaller than 75 kB : </label>
+<input type="file" id="FS">
+ +

Она отображает:

+ +

{{EmbedLiveSample("Limiting_the_size_of_a_file_before_its_upload")}}

+ +

JavaScript считывает выбранный файл, с помощью метода File.size() получает его размер, сравнивает его с лимитом и вызывает Constraint Validation API, чтобы сообщить браузеру о нарушении:

+ +
function checkFileSize() {
+  var FS = document.getElementById("FS");
+  var files = FS.files;
+
+  // Если выбран хотя бы один файл
+  if (files.length > 0) {
+     if (files[0].size > 75 * 1024) { // Проверить ограничение
+       FS.setCustomValidity("Размер файла не должен превышать 75 kB");
+       return;
+     }
+  }
+  // Если нарушения ограничений нет
+  FS.setCustomValidity("");
+}
+ +

Наконец мы связываем метод с нужным событием:

+ +
window.onload = function () {
+  document.getElementById("FS").onchange = checkFileSize;
+}
+ +

Живой пример валидации ограничения размера файла.

+ +

Визуальное оформление нарушения ограничений

+ +

Помимо установки ограничений, веб-разработчики хотят управлять тем, какие сообщения показываются пользователям и как они оформлены.

+ +

Управление внешним видом элементов

+ +

Изменять внешний вид элементов можно с помощью CSS-псевдоклассов.

+ +

CSS-псевдоклассы :required и :optional

+ +

Псевдоклассы {{cssxref(':required')}} и {{cssxref(':optional')}} позволяют писать селекторы, соответствующие элементам формы, которые имеют или не имеют атрибут {{ htmlattrxref("required") }}

+ +

CSS-псевдокласс :placeholder-shown

+ +

Смотрите {{cssxref(':placeholder-shown')}}

+ +

CSS-псевдоклассы :valid и :invalid

+ +

Псевдоклассы {{cssxref(':valid')}} и {{cssxref(':invalid')}} используются для представления элементов <input>, содержимое которых является валидным или не валидным соответственно. Эти классы позволяют пользователю оформлять валидные или не валидные элементы формы, чтобы облегчить определение элементов, которые имеют корректный или некорректный формат.

+ +

Управление текстом нарушения ограничений

+ +

Следующее может помочь с управлением текстом нарушения ограничений:

+ + -- cgit v1.2.3-54-g00ecf