diff options
Diffstat (limited to 'files/ru/learn/forms/form_validation/index.html')
| -rw-r--r-- | files/ru/learn/forms/form_validation/index.html | 50 |
1 files changed, 25 insertions, 25 deletions
diff --git a/files/ru/learn/forms/form_validation/index.html b/files/ru/learn/forms/form_validation/index.html index fcb841f313..4668beaac3 100644 --- a/files/ru/learn/forms/form_validation/index.html +++ b/files/ru/learn/forms/form_validation/index.html @@ -53,41 +53,41 @@ original_slug: Learn/HTML/Forms/Валидация_формы <ul> <li>"Это поле обязательно для заполнения" (вы не можете оставить это поле пустым)</li> - <li>"Пожалуйста введите ваш телефонный номер в формате xxx-xxxx" (вводит три цифры разделенные тире, за ними слеуют четыре цифры)</li> + <li>"Пожалуйста введите ваш телефонный номер в формате xxx-xxxx" (вводит три цифры разделённые тире, за ними слеуют четыре цифры)</li> <li>"Пожалуйста введите настоящий адрес электронной почты" (если ваша запись не в формате"somebody@example.com")</li> <li>"Ваш пароль должен быть от 8 до 30 символов длиной, и содержать одну заглавную букву, один символ, и число"</li> </ul> -<p>Это называется валидация формы — когда вы вводите данные, веб-прилолжение проверяет, что данные корректны. Если данные верны, приложение позволяет данным быть отправленными на сервер и (как правило) быть сохраненными в базе данных; если нет - оно выдает вам сообщение об ошибке, обьясняющее какие исправления необходимо внести. Проверка формы может быть реализована несколькими различными способами.</p> +<p>Это называется валидация формы — когда вы вводите данные, веб-прилолжение проверяет, что данные корректны. Если данные верны, приложение позволяет данным быть отправленными на сервер и (как правило) быть сохранёнными в базе данных; если нет - оно выдаёт вам сообщение об ошибке, обьясняющее какие исправления необходимо внести. Проверка формы может быть реализована несколькими различными способами.</p> <p>Мы хотим сделать заполнение веб-форм максимально простым. Итак, почему мы настаиваем на подтверждении наших форм? Существуют три основные причины:</p> <ul> <li><strong>Мы хотим получить нужные данные в нужном формате</strong> — наши приложения не будут работать должным образом, если данные нашего пользователя хранятся в неправильном формате, если они вводят неправильную информацию или вообще не передают информацию.</li> - <li><strong>Мы хотим защитить учетные записи наших пользователей</strong> — заставляя наших пользователей вводить защищенные пароли, это упрощает защиту информации об их учетной записи.</li> - <li><strong>Мы хотим обезопасить себя</strong> — существует множество способов, которыми злоумышленники могут злоупотреблять незащищенными формами, чтобы повредить приложение, в которое они входят (см. <a href="https://developer.mozilla.org/en-US/docs/Learn/Server-side/First_steps/Website_security">Безопасность веб-сайта</a>).</li> + <li><strong>Мы хотим защитить учётные записи наших пользователей</strong> — заставляя наших пользователей вводить защищённые пароли, это упрощает защиту информации об их учётной записи.</li> + <li><strong>Мы хотим обезопасить себя</strong> — существует множество способов, которыми злоумышленники могут злоупотреблять незащищёнными формами, чтобы повредить приложение, в которое они входят (см. <a href="https://developer.mozilla.org/en-US/docs/Learn/Server-side/First_steps/Website_security">Безопасность веб-сайта</a>).</li> </ul> <h3 id="Различные_типы_валидации_формы">Различные типы валидации формы</h3> -<p>Существует два разных типа проверки формы, с которыми вы столкнетесь в Интернете:</p> +<p>Существует два разных типа проверки формы, с которыми вы столкнётесь в Интернете:</p> <ul> - <li><strong>Проверка на стороне клиента - </strong>это проверка, которая происходит в браузере, прежде чем данные будут отправлены на сервер. Это удобнее, чем проверка на стороне сервера, так как дает мгновенный ответ. Ее можно далее подразделить на: + <li><strong>Проверка на стороне клиента - </strong>это проверка, которая происходит в браузере, прежде чем данные будут отправлены на сервер. Это удобнее, чем проверка на стороне сервера, так как даёт мгновенный ответ. Её можно далее подразделить на: <ul> <li><strong>JavaScript</strong> проверка выполняется с использованием JavaScript. Полностью настраиваемая.</li> <li><strong>Встроенная проверка формы, </strong>используя функции проверки формы HTML5. Для этого обычно не требуется JavaScript. Встроенная проверка формы имеет лучшую производительность, но она не такая настраиваемая, как с использованием JavaScript.</li> </ul> </li> - <li><strong>Проверка на стороне сервера</strong> - это проверка, которая возникает на сервере после отправки данных. Серверный код используется для проверки данных перед их сохранением в базе данных. Если данные не проходят проверку валидности, ответ отправляется обратно клиенту, чтобы сообщить пользователю, какие исправления должны быть сделаны. Проверка на стороне сервера не такая удобная, как проверка на стороне клиента, поскольку она не выдает ошибок до тех пор, пока не будет отправлена вся форма. Тем не менее, проверка на стороне сервера - это последняя линия защиты вашего приложения от неправильных или даже вредоносных данных. Все популярные <a href="/en-US/docs/Learn/Server-side/First_steps/Web_frameworks">серверные фреймворки</a> имеют функции для проверки и очистки данных (что делает их безопасными).</li> + <li><strong>Проверка на стороне сервера</strong> - это проверка, которая возникает на сервере после отправки данных. Серверный код используется для проверки данных перед их сохранением в базе данных. Если данные не проходят проверку валидности, ответ отправляется обратно клиенту, чтобы сообщить пользователю, какие исправления должны быть сделаны. Проверка на стороне сервера не такая удобная, как проверка на стороне клиента, поскольку она не выдаёт ошибок до тех пор, пока не будет отправлена вся форма. Тем не менее, проверка на стороне сервера - это последняя линия защиты вашего приложения от неправильных или даже вредоносных данных. Все популярные <a href="/en-US/docs/Learn/Server-side/First_steps/Web_frameworks">серверные фреймворки</a> имеют функции для проверки и очистки данных (что делает их безопасными).</li> </ul> <p>В реальном мире разработчики склонны использовать комбинацию проверки на стороне клиента и сервера.</p> <h2 id="Использование_встроенной_проверки_формы">Использование встроенной проверки формы</h2> -<p>Одной из особенностей HTML5 является возможность проверки большинства пользовательских данных без использования скриптов. Это делается с помощью <a href="https://developer.mozilla.org/en-US/docs/HTML/HTML5/Constraint_validation">атрибутов проверки элементов формы</a>, которые позволяют вам указывать правила ввода формы, например, нужно ли заполнять значение, минимальная и максимальная длина данных, должно ли это быть число, адрес электронной почты, адрес или что-то еще, и шаблон, которому это должно соответствовать. Если введенные данные соответствуют всем этим правилам, данные считаются валидными; если нет - невалидными.</p> +<p>Одной из особенностей HTML5 является возможность проверки большинства пользовательских данных без использования скриптов. Это делается с помощью <a href="https://developer.mozilla.org/en-US/docs/HTML/HTML5/Constraint_validation">атрибутов проверки элементов формы</a>, которые позволяют вам указывать правила ввода формы, например, нужно ли заполнять значение, минимальная и максимальная длина данных, должно ли это быть число, адрес электронной почты, адрес или что-то ещё, и шаблон, которому это должно соответствовать. Если введённые данные соответствуют всем этим правилам, данные считаются валидными; если нет - невалидными.</p> <p>Когда элемент валидный, следующие утверждения верны:</p> @@ -113,7 +113,7 @@ original_slug: Learn/HTML/Forms/Валидация_формы <p>В этом разделе мы рассмотрим некоторые функции HTML5, которые можно использовать для проверки {{HTMLElement("input")}} элементов.</p> -<p>Начнем с простого примера - input, который позволяет вам выбирать ваш любимый плод между бананом и вишней. Он включает простой текст {{HTMLElement("input")}} соответствующий ярлык (label) и отправку (submit) {{htmlelement("button")}}. Вы можете найти исходный код на GitHub <a href="https://github.com/mdn/learning-area/blob/master/html/forms/form-validation/fruit-start.html">fruit-start.html</a>,и живой пример ниже:</p> +<p>Начнём с простого примера - input, который позволяет вам выбирать ваш любимый плод между бананом и вишней. Он включает простой текст {{HTMLElement("input")}} соответствующий ярлык (label) и отправку (submit) {{htmlelement("button")}}. Вы можете найти исходный код на GitHub <a href="https://github.com/mdn/learning-area/blob/master/html/forms/form-validation/fruit-start.html">fruit-start.html</a>,и живой пример ниже:</p> <pre class="notranslate"><form> <label for="choose">Would you prefer a banana or cherry?</label> @@ -132,7 +132,7 @@ input:valid { <p>{{EmbedLiveSample("Simple_start_file", "100%", 80)}}</p> -<p>Для начала сделаем копию <code>fruit-start.html</code>в новом каталоге на жестком диске.</p> +<p>Для начала сделаем копию <code>fruit-start.html</code>в новом каталоге на жёстком диске.</p> <h3 id="Требуемый_атрибут_required">Требуемый атрибут (required)</h3> @@ -146,7 +146,7 @@ input:valid { <button>Submit</button> </form></pre> -<p>Также обратите внимание на CSS, включенный в файл примера:</p> +<p>Также обратите внимание на CSS, включённый в файл примера:</p> <pre class="notranslate">input:invalid { border: 2px dashed red; @@ -160,7 +160,7 @@ input:valid { border: 2px solid black; }</pre> -<p>В этом случае к input будет применяться ярко-красный пунктирный border, когда он невалидный, и более тонкая черная граница, когда он валидный. Попробуйте новое поведение в приведенном ниже примере:</p> +<p>В этом случае к input будет применяться ярко-красный пунктирный border, когда он невалидный, и более тонкая чёрная граница, когда он валидный. Попробуйте новое поведение в приведённом ниже примере:</p> <p>{{EmbedLiveSample("The_required_attribute", "100%", 80)}}</p> @@ -202,7 +202,7 @@ input:valid { <ul> <li><code>[Ll].*k</code> — Один символ L, в верхнем или нижнем регистре, за ним следует ни одного или несколько символов любого типа за которыми следует <code>k</code> в нижнем регистре.</li> <li><code>[A-Z][A-Za-z' -]+</code> — Один символ верхнего регистра, за которым следует один или несколько символов, которые представляют собой букву верхнего или нижнего регистра, тире, апостроф или пробел. Это можно использовать для проверки названия городов / городов англоязычных стран, которые должны начинаться с заглавной буквы, но не содержать других символов. Примеры из UK включая Manchester, Ashton-under-lyne, и Bishop's Stortford.</li> - <li><code>[0-9]{3}[ -][0-9]{3}[ -][0-9]{4}</code> — Внутренний телефонный номер США — три цифры, затем пробел или тире, затем три цифры,затем пробел или тире, затем четыре цифры. Возможно, вам придется сделать это более сложным, поскольку некоторые люди пишут свой код области в круглых скобках, но это работает для простой демонстрации.</li> + <li><code>[0-9]{3}[ -][0-9]{3}[ -][0-9]{4}</code> — Внутренний телефонный номер США — три цифры, затем пробел или тире, затем три цифры,затем пробел или тире, затем четыре цифры. Возможно, вам придётся сделать это более сложным, поскольку некоторые люди пишут свой код области в круглых скобках, но это работает для простой демонстрации.</li> </ul> <p>В любом случае, давайте реализуем пример - обновим ваш HTML, чтобы добавить атрибут шаблона, например:</p> @@ -230,7 +230,7 @@ input:valid { <p>На этом этапе попробуйте изменить значение внутри атрибута <code>pattern</code> чтобы сопоставить некоторые из примеров, которые вы видели ранее, и посмотрите, как это влияет на значения, которые вы можете ввести, чтобы сделать входное значение валидным. Попробуйте написать свои собственные, и посмотрите, как это работает! Попробуйте сделать их связанными с фруктами, где это возможно, поэтому ваши примеры имеют смысл!</p> <div class="note"> -<p><strong>Примечание:</strong> Некоторые {{HTMLElement("input")}} типы элементов не нуждаются в атрибуте {{htmlattrxref("pattern","input")}} чтобы быть валидными. Указание типа <code>email</code> например, проверяет введенное значение через регулярное выражение, соответствующее хорошо сформированному адресу электронной почты (или списку email адресов, разделенных запятыми, если в нем присутствует атрибут {{htmlattrxref("multiple","input")}} attribute). В качестве еще одного примера, поле с типом <code>url</code> автоматически требует правильно сформированного URL.</p> +<p><strong>Примечание:</strong> Некоторые {{HTMLElement("input")}} типы элементов не нуждаются в атрибуте {{htmlattrxref("pattern","input")}} чтобы быть валидными. Указание типа <code>email</code> например, проверяет введённое значение через регулярное выражение, соответствующее хорошо сформированному адресу электронной почты (или списку email адресов, разделённых запятыми, если в нем присутствует атрибут {{htmlattrxref("multiple","input")}} attribute). В качестве ещё одного примера, поле с типом <code>url</code> автоматически требует правильно сформированного URL.</p> </div> <div class="note"> @@ -263,7 +263,7 @@ input:valid { <ul> <li>Здесь вы увидите, что мы задали полю <code>text</code> <code>minlength</code> <code>maxlength</code> равную 6 — такая же длина, как banana и cherry. Ввод меньшего количества символов будет отображаться как невалидный, а вводить больше в большинстве браузеров невозможно.</li> - <li>Мы также дали полю <code>number</code> <code>min</code> 1 и <code>max</code> 10 - числа введенные вне этого диапазона будут отображаться как невалидные, и вы не сможете использовать стрелки приращения / уменьшения, чтобы переместить значение за пределами этого диапазона.</li> + <li>Мы также дали полю <code>number</code> <code>min</code> 1 и <code>max</code> 10 - числа введённые вне этого диапазона будут отображаться как невалидные, и вы не сможете использовать стрелки приращения / уменьшения, чтобы переместить значение за пределами этого диапазона.</li> </ul> <div class="hidden"> @@ -384,7 +384,7 @@ input:focus:invalid { <h3 id="Индивидуальные_сообщения_об_ошибках">Индивидуальные сообщения об ошибках</h3> -<p>Как видно из приведенных выше примеров, каждый раз, когда пользователь пытается отправить невалидную форму, браузер отображает сообщение об ошибке. Способ отображения этого сообщения зависит от браузера.</p> +<p>Как видно из приведённых выше примеров, каждый раз, когда пользователь пытается отправить невалидную форму, браузер отображает сообщение об ошибке. Способ отображения этого сообщения зависит от браузера.</p> <p>Эти автоматизированные сообщения имеют два недостатка:</p> @@ -447,7 +447,7 @@ email.addEventListener("input", function (event) { <h3 id="API_проверки_валидности_HTML5">API проверки валидности HTML5</h3> -<p>Все больше браузеров теперь поддерживают API проверки ограничений, и он становится надежным. Этот API состоит из набора методов и свойств, доступных для каждого элемента формы.</p> +<p>Все больше браузеров теперь поддерживают API проверки ограничений, и он становится надёжным. Этот API состоит из набора методов и свойств, доступных для каждого элемента формы.</p> <h4 id="Свойства_API_проверки_валидности">Свойства API проверки валидности</h4> @@ -571,7 +571,7 @@ email.addEventListener("input", function (event) { <h5 id="CSS">CSS</h5> -<p>Этот CSS задает стили нашей форме и выводу ошибки, чтобы сделать их визуально более привлекательными.</p> +<p>Этот CSS задаёт стили нашей форме и выводу ошибки, чтобы сделать их визуально более привлекательными.</p> <pre class="brush: css notranslate">/* Это просто, чтобы сделать пример более приятным */ body { @@ -659,7 +659,7 @@ form.addEventListener("submit", function (event) { // сообщение об ошибке. error.innerHTML = "I expect an e-mail, darling!"; error.className = "error active"; - // И мы предотвращаем отправку формы путем отмены события + // И мы предотвращаем отправку формы путём отмены события event.preventDefault(); } }, false);</pre> @@ -668,11 +668,11 @@ form.addEventListener("submit", function (event) { <p>{{EmbedLiveSample("Example_using_the_constraint_validation_API", "100%", 130)}}</p> -<p>API ограничений валидации дает вам мощный инструмент для проверки формы, позволяя вам получить контроль над пользовательским интерфейсом больше и лучше того, что вы можете делать только при помощи HTML и CSS.</p> +<p>API ограничений валидации даёт вам мощный инструмент для проверки формы, позволяя вам получить контроль над пользовательским интерфейсом больше и лучше того, что вы можете делать только при помощи HTML и CSS.</p> <h3 id="Проверка_форм_без_встроенного_API">Проверка форм без встроенного API</h3> -<p>Иногда, например, с устаревшими браузерами или <a href="/en-US/docs/HTML/Forms/How_to_build_custom_form_widgets">пользовательскими виджетами</a>, вы не сможете (или не захотите) использовать API проверки ограничений. В этом случае вы все еще можете использовать JavaScript для проверки вашей формы. Проверка формы - это скорее вопрос пользовательского интерфейса, чем проверка валидности данных.</p> +<p>Иногда, например, с устаревшими браузерами или <a href="/en-US/docs/HTML/Forms/How_to_build_custom_form_widgets">пользовательскими виджетами</a>, вы не сможете (или не захотите) использовать API проверки ограничений. В этом случае вы все ещё можете использовать JavaScript для проверки вашей формы. Проверка формы - это скорее вопрос пользовательского интерфейса, чем проверка валидности данных.</p> <p>Чтобы проверить форму, вы должны задать себе несколько вопросов:</p> @@ -774,13 +774,13 @@ input:focus.invalid { <h5 id="JavaScript_2">JavaScript</h5> -<p>Большие изменения в коде JavaScript, которые должны сделать намного больше тяжелой работы.</p> +<p>Большие изменения в коде JavaScript, которые должны сделать намного больше тяжёлой работы.</p> <pre class="brush: js notranslate">// Существует меньше способов выбрать узел DOM с устаревшими браузерами var form = document.getElementsByTagName('form')[0]; var email = document.getElementById('mail'); -// Ниже приведен трюк для достижения следующего узла Element Element в DOM +// Ниже приведён трюк для достижения следующего узла Element Element в DOM // Это опасно, потому что вы можете легко построить бесконечный цикл. // В современных браузерах вам следует использовать элемент element.nextElementSibling var error = email; @@ -867,9 +867,9 @@ addEvent(form, "submit", function () { </li> </ul> -<h4 id="Удаленная_проверка">Удаленная проверка</h4> +<h4 id="Удалённая_проверка">Удалённая проверка</h4> -<p>В некоторых случаях может быть полезно выполнить некоторую удаленную проверку. Такая проверка необходима, когда данные, введенные пользователем, привязаны к дополнительным данным, хранящимся на стороне сервера вашего приложения. Одним из вариантов использования является регистрационные формы, в которых вы запрашиваете имя пользователя. Чтобы избежать дублирования, разумнее выполнить AJAX запрос для проверки доступности имени пользователя, а не попросить пользователя отправить данные, а затем отправить форму с ошибкой.</p> +<p>В некоторых случаях может быть полезно выполнить некоторую удалённую проверку. Такая проверка необходима, когда данные, введённые пользователем, привязаны к дополнительным данным, хранящимся на стороне сервера вашего приложения. Одним из вариантов использования является регистрационные формы, в которых вы запрашиваете имя пользователя. Чтобы избежать дублирования, разумнее выполнить AJAX запрос для проверки доступности имени пользователя, а не попросить пользователя отправить данные, а затем отправить форму с ошибкой.</p> <p>Выполнение такой проверки требует принятия нескольких мер предосторожности:</p> |