{{l10n_strings.DRAG_TEXT_HELP}}

{{article.content_lang.display}}

{{l10n_strings.AUTHOR_TOOLTIP_TEXT}}

Изображения. Содержание · Bootstrap. Версия v4.0.0

Документация и примеры приведения изображений к отзывчивому поведению (так, чтобы их размер не выходил за рамки родительского элемента) и добавления к ним «легковесных» стилей – всё посредством классов.

Отзывчивые изображения

Изображения в Bootstrap делаются «отзывчивыми» с помощью . img-fluid. max-width: 100%; и height: auto; применяемых к изображению, которое т.о. масштабируется по родительскому элементу.

<img src="..." alt="Responsive image">

Изображения SVG и IE10

В IE10 SVG-изображения с классом .img-fluid выглядят диспропорционально. Для решения этой проблемы добавьте width: 100% \9; где необходимо. Это решение затрагивает и размеры изображений других форматов, поэтому Bootstrap не применяет его автоматически.

Мини-версии изображения

В дополнение к нашим утилитам бордер-радиуса вы можете использовать класс .img-thumbnail для придания изображению границы 1px.

<img src="..." alt="...">

Выравнивание изображений

Выравнивайте изображения вспомогательными классами выравнивания по стороне или классами выравнивания текста. Блочные изображения block можно центрировать использованием класса утилиты «марджина» the .mx-auto.

<img src="..." alt="...">
<img src="..." alt="...">

<img src="..." alt="...">

<div>
  <img src="..." alt="...">
</div>

Картинка

Если вы используете элемент <picture> для привязки множественных элементов <source> к определенному <img>, добавьте классы .img-* в <img>, а не в <picture>.

​<picture>
  <source srcset="..." type="image/svg+xml">
  <img src="..." alt="...">
</picture>

Валидация форм на стороне клиента — Изучение веб-разработки

Перед отправкой данных на сервер важно убедиться, что все обязательные поля формы заполнены данными в корректном формате. Это называется валидацией на стороне клиента и помогает убедиться, что данные, введённые в каждый элемент формы, соответствуют требованиям. Данная статья проведёт вас через основные концепци и примеры валидации на стороне клиента.

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

Однако, не следует рассматривать валидацию на стороне клиента как достаточную меру безопасности! Любые данные, отправляемые через форму, необходимо дополнительно проверять на безопасность и на стороне сервера, поскольку валидацию на стороне клиента достаточно просто обойти и она может не остановить злоумышленников. Чтобы лучше понимать потенциальные угрозы, рекомендуем ознакомиться с разделом Безопасность вебсайтов; валидация на стороне сервера выходит за рамки этого модуля, но о ней следует помнить.

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

• «Обязательное поле» (Вы не можете оставить поле пустым).
• «Пожалуйста, введите номер телефона в формате xxx-xxxx» (Чтобы данные считались корректными, их необходимо указать в определённом формате).
• «Пожалуйста, введите корректный email-адрес» (вы ввели данные в неправильном формате).
• «Длина пароля должна быть от 8 до 30 символов и включать одну заглавную букву, один символ, и одну цифру.» (Требования к формату данных достаточно конкретные).

Это называется валидацией формы. По мере ввода, браузер и/или сервер проверяют данные, чтобы определить, соответствуют ли они требуемому формату. Валидация, выполняемая в браузере, называется валидацией на стороне клиента, а выполняемая на сервере — валидацией на стороне сервера. В этом разделе мы сосредоточимся на валидации, выполняемой на стороне клиента.

Если формат корректен, приложение позволяет отправить данные на сервер и (обычно) сохранить в базу данных; в противном случае выводится сообщение с описанием того, что нужно исправить, позволяя ввести данные снова.

Мы хотим максимально упростить заполнение веб-форм. Тогда почему мы настаиваем валидации данных? На это есть три основные причины:

• Мы хотим получать правильные данные в правильном формате.  Наши приложения не будут работать должным образом, если данные от пользователей хранятся в неправильном формате, некорректны сами по себе или вовсе пропущены.
• Мы хотим защитить данные пользователей. Принуждение пользователей вводить надёжные пароли облегчает защиту их аккаунтов.
• Мы хотим защитить себя. Существует множество способов, позволяющих злоумышленникам с помощью незащищённых форм навредить приложению (смотрите Безопасность вебсайтов).
  

  Предупреждение:: Никогда не доверяйте данным, передаваемым на сервер клиентской программой. Даже если ваша форма правильно валидируется и не допустит введение потенциально вредоносных данных на стороне клиента, злоумышленники по-прежнему могут изменить сетевой запрос.

Существует два типа валидации на стороне клиента, с которыми вы столкнётесь в Интернете:

• Встроенная валидация форм использует функционал валидации HTML5, который мы неоднократно обсуждали в этом модуле. HTML5-валидация обычно не требует большого количества JavaScript-кода и демонстрирует лучшую производительность, но не настолько настраиваема, как валидация с помощью JavaScript.
• JavaScript-валидация кодируется с помощью JavaScript. Она полностью настраиваема, но требует программирования всей логики (или использования библиотеки).

Одной из самых важных функций элементов форм HTML5 является способность валидировать бóльшую часть пользовательских данных без использования JavaScript. Это выполняется с помощью атрибутов валидации у элементов формы. Многие из них мы уже рассмотрели в этом курсе:

• required: Определяет, что для отправки формы данное поле предварительно должно быть заполнено.
• minlength и maxlength: Задаёт минимальную и максимальную длину текстовых данных (строк)
• min и max: Задаёт минимальное и максимальное значение для поля, расчитанного на числовой тип данных
• type: Определяет тип данных, на который рассчитано поле: число, email-адрес или какой-то другой предустановленный тип
• pattern: С помощью регулярного выражения, определяет шаблон, которому должны соответствовать вводимые данные.

Если данные, введённые в поле формы, соответствуют правилам перечисленных выше атрибутов, они считаются валидными, если нет — не валидными

Когда элемент валиден, справедливы следующие утверждения:

• Элемент соответствует CSS-псевдоклассу :valid, позволяющему стилизовать только валидные элементы.
• Если пользователь пытается отправить данные, браузер отправит форму при условии, что ничто другое (например, JavaScript) не помешает ему это сделать

Когда элемент не валиден, справедливы следующие утверждения:

• Элемент соответствует CSS-псевдоклассу :invalid или, в зависимости от ошибки, другим псевдоклассам (например, :out-of-range), которые позволяют применять определённые стили к элементам, не являющимся валидными.
• Если пользователь пытается отправить данные, браузер заблокирует форму и выведет сообщение об ошибке.

В этом разделе мы протестируем некоторые из атрибутов, которые обсуждали выше.

Простой начальный файл

Давайте начнём с простого примера: поле, позволяющее указать своё предпочтение — банан или вишня. Этот пример включает обычное текстовое поле <input>, связанный с ним элемент <label> и кнопку отправки формы <button>. Исходный код можно найти на GitHub по адресу fruit-start.html, а ниже приведён рабочий пример.

<form>
  <label for="choose">Would you prefer a banana or cherry?</label>
  <input name="i_like">
  <button>Submit</button>
</form>

input:invalid {
  border: 2px dashed red;
}

input:valid {
  border: 2px solid black;
}

Для начала скопируйте файл fruit-start.html в новую папку на вашем жёстком диске.

Атрибут required

Самым простым в HTML5-валидации является атрибут required. Добавьте его к элементу, чтобы сделать заполнение обязательным. Элемент с данным атрибутом соответствует CSS-псевдоклассу :required, а если поле ввода пустое, вместо отправки формы отобразится сообщение об ошибке. Пока поле пустое, оно также будет соответствовать CSS-псевдоклассу :invalid.

Добавьте к полю атрибут required, как показано ниже.

<form>
  <label for="choose">Would you prefer a banana or cherry? (required)</label>
  <input name="i_like" required>
  <button>Submit</button>
</form>

Обратите внимание на CSS, который включён в файл примера:

input:invalid {
  border: 2px dashed red;
}

input:invalid:required {
  background-image: linear-gradient(to right, pink, lightgreen);
}

input:valid {
  border: 2px solid black;
}

Данный CSS задаёт полю красную пунктирную рамку, когда оно не валидно, а когда валидно — сплошную чёрную. Мы также добавили фоновый градиент для обязательных не валидных полей. Проверьте новое поведение в примере ниже:

Попробуйте отправить форму без введения значения. Обратите внимание, что не валидное поле получает фокус, появляется сообщение об ошибке («Заполните это поле») и блокируется отправка формы.

Наличие атрибута required у любого элемента, который его поддерживает, означает, что элемент соответствует CSS-псевдоклассу :required, независимо от того, имеет он значение или нет. Если элемент <input> не содержит значение, он будет соответствовать псевдоклассу :invalid.

Примечание: Для повышения удобства взаимодействия указывайте пользователям, какие поля являются обязательными. К тому же, этого требует руководство по обеспечению доступности WCAG. Требуйте обязательного ввода только тех данных, которые вам действительно нужны: например, так ли важно знать пол или должность пользователя?

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

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

Регулярные выражения достаточно сложны и мы не подем подробно рассматривать эту тему в данной статье. Ниже приведены несколько примеров, чтобы дать вам представление о том, как они работают.

• a — Соответствует одному символу a (не b, не aa, и так далее).
• abc — Соответствует символу a, за которой следует b, за которой следует c.
• ab?c — Соответствует символу a, за которым опционально может следовать b, за которым следует c. ( ac или abc)
• ab*c — Соответствует символу a, за которым опционально может следовать любое количество символов b, за которыми следует c. ( ac , abc, abbbbbc, и так далее).
• a|b — Соответствует символу a или b.
• abc|xyz — Соответствует в точности abc или в точности xyz (но не abcxyz или a или y, и так далее).

Есть еще много возможностей, которые мы не упомянули. Полный список со множеством примеров можно найти в документации по Регулярным выражениям

Давайте рассмотрим пример. Добавьте в атрибут pattern следующий шаблон:

<form>
  <label for="choose">Would you prefer a banana or a cherry?</label>
  <input name="i_like" required pattern="[Bb]anana|[Cc]herry">
  <button>Submit</button>
</form>

Это даёт нам следующее обновление — опробуйте его:

В этом примере элемент <input> принимает одно из четырёх возможных значений: строку «banana», «Banana», «cherry», или «Cherry». Регулярные выражения чувствительны к регистру, но с помощью шаблона «Aa», вложенного в квадратные скобки, мы сделали поддержку написания слова как с большой, так и с маленькой буквы.

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

Если не пустое значение элемента <input> не соответствует шаблону регулярного выражения, input будет соответствовать псевдоклассу :invalid.

Примечание: Некоторым типам элементов <input> для валидации с помощью регулярного выражения не требуется атрибут pattern. Например, поле с типом email валидирует значение по шаблону одного email-адреса или, если присутствует атрибут multiple, шаблону списка email-адресов, разделённых запятыми.

Ограничение длины вводимых значений

Можно ограничить максимально допустимое количество символов для текстовых полей <input> или <textarea> (en-US) используя атрибуты minlength и maxlength. Поле будет не валидным, если количество символов его содержимого будет меньше minlength или больше maxlength.

Зачастую браузеры не позволяют пользователям вводить в текстовое поле значение, длина которого превышает максимально допустимую. Можно существенно повысить удобство использования, если помимо ограничения в атрибуте maxlength добавить доступный индикатор, отображающий текущее и максимально допустимое количество символов, что даст пользователю возможность уместить содержимое в заданные рамки. Хорошим примером является окно написания твита в Twitter. Для реализации такого функционала можно использовать JavaScript, включая решения, использующие maxlength.

Ограничение допустимых значений

В полях, предназначеннх для ввода чисел (например, <input type="number">), диапазон допустимых значений можно определить с помощью атрибутов min и max. Если поле содержит значение за пределами данного диапазона, оно будет не валидным.

Давайте рассмотрим другой пример. Создайте новую копию файла fruit-start.html.

Содержимое элемента <body> замените на:

<form>
  <div>
    <label for="choose">Would you prefer a banana or a cherry?</label>
    <input type="text" name="i_like" required minlength="6" maxlength="6">
  </div>
  <div>
    <label for="number">How many would you like?</label>
    <input type="number" name="amount" value="1" min="1" max="10">
  </div>
  <div>
    <button>Submit</button>
  </div>
</form>

• Здесь мы в полю с типом text атрибутам minlength и maxlength, задали одинаковое значение 6, что соответствует количеству символов в словах banana и cherry.
• В поле с типом number атрибуту min мы задали значение 1, а атрибуту max значение 10. При вводе чисел за пределами данного диапазона, поле будет становиться не валидным; с помощью стрелок увеличения/уменьшения пользователи не смогут выйти за границы диапазона. Текущее поле не является обязательным для заполнения, поэтому даже после очистки будет оставаться валидным.

Демонстрационный пример:

Примечание: <input type="number"> (и другие типы, такие как range и date) могут также принимать атрибут step, который задаёт шаг увеличения или уменьшения значения при использовании кнопок вверх и вниз. В примере выше мы явно не указывали атрибут step, поэтому он получает значение по умолчанию, равное 1. Это значит, что дробные числа, такие как 3.2, будут не валидными.

Полный пример

Ниже представлен полный пример, демонстрирующий использование встроенного функционала валидации. Сначала немного HTML:

<form>
  <p>
    <fieldset>
      <legend>Do you have a driver's license?<abbr title="This field is mandatory" aria-label="required">*</abbr></legend>
      
      <input type="radio" required name="driver" value="yes"><label for="r1">Yes</label>
      <input type="radio" required name="driver" value="no"><label for="r2">No</label>
    </fieldset>
  </p>
  <p>
    <label for="n1">How old are you?</label>
    
    <input type="number" min="12" max="120" step="1" name="age"
           pattern="\d+">
  </p>
  <p>
    <label for="t1">What's your favorite fruit?<abbr title="This field is mandatory" aria-label="required">*</abbr></label>
    <input type="text" name="fruit" list="l1" required
           pattern="[Bb]anana|[Cc]herry|[Aa]pple|[Ss]trawberry|[Ll]emon|[Oo]range">
    <datalist>
      <option>Banana</option>
      <option>Cherry</option>
      <option>Apple</option>
      <option>Strawberry</option>
      <option>Lemon</option>
      <option>Orange</option>
    </datalist>
  </p>
  <p>
    <label for="t2">What's your e-mail address?</label>
    <input type="email" name="email">
  </p>
  <p>
    <label for="t3">Leave a short message</label>
    <textarea name="msg" maxlength="140" rows="5"></textarea>
  </p>
  <p>
    <button>Submit</button>
  </p>
</form>

И немного CSS для стилизации HTML:

form {
  font: 1em sans-serif;
  max-width: 320px;
}

p > label {
  display: block;
}

input[type="text"],
input[type="email"],
input[type="number"],
textarea,
fieldset {
  width : 100%;
  border: 1px solid #333;
  box-sizing: border-box;
}

input:invalid {
  box-shadow: 0 0 5px 1px red;
}

input:focus:invalid {
  box-shadow: none;
}

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

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

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

Constraint Validation API

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

Для перечисленных выше элементов Constraint Validation API делает доступными следующие свойства.

• validationMessage: Возвращает локализованное сообщение, описывающее ограничения валидации (если таковые имеются), которым не удовлетворяет определённый элемент. Если элемент не участвует в валидации (willValidate установлено в false) или значение элемента удовлетворяет установленным ограничениям (является валидным), будет возвращена пустая строка.
• validity: Возвращает объект ValidityState, который содержит несколько свойств, описывающих состояние валидности элемента. Подробное описание всех свойств доступности можно найти на странице справочника ValidityState; ниже приведён список наиболее используемых:
  • patternMismatch: Возвращает true, если значение не соответствует шаблону, указанному в атрибуте pattern, и false если соответствует. Если true, элемент соответствует CSS-псевдоклассу :invalid.
  • tooLong: Возвращает true, если значение длиннее максимальной длины, указанной в атрибуте maxlength, и false если оно короче или равно ей. Если true, элемент соответствует CSS-псевдоклассу :invalid.
  • tooShort: Возвращает true, если значение короче минимальной длины, указанной в атрибуте minlength, и false если оно длинее или равно ей. Если true, элемент соответствует CSS-псевдоклассу :invalid.
  • rangeOverflow: Возвращает true, если значение больше указанного в атрибуте max максимума, и false если меньше или равно ему. Если true, элемент соответствует CSS-псевдоклассам :invalid и :out-of-range
  • rangeUnderflow: Возвращает true, если значение меньше указанного в атрибуте min, и false если больше или равно ему. Если true, элемент соответствует CSS-псевдоклассу :invalid и :out-of-range.
  • typeMismatch: Возвращает true, если значение не соответствует требуемому синтаксису (когда для type задано значение email или url), и false если синтаксис корректный. Если true, элемент соответствует CSS-псевдоклассу :invalid.
  • valid: Возвращает true, если элемент соответствует всем ограничениям валидации — следовательно, считается валидным, и false если не соответствует какому-то ограничению. Если true, элемент соответствует CSS-псевдоклассу :valid; иначе :invalid.
  • valueMissing: Возвращает true, если у элемента есть атрибут required, но не введено значенение, иначе возвращает false. Если true, элемент соответствует CSS-псевдоклассу :invalid.
• willValidate: Возвращает true, если элемент будет участвовать в валидации при отправке формы; иначе возвращает false.

Также для перечисленных выше элементов Constraint Validation API делает доступными следующие методы.

• checkValidity(): Возвращает true, если значение элемента проходит валидацию, иначе возвращает false. Если элемент не валиден, данный метод также запускает на нём событие invalid.
• setCustomValidity(message): Позволяет добавить в элемент кастомное сообщение об ошибке; при этом элемент будет считаться не валидным и отобразится указанная ошибка. Это позволяет использовать JavaScript-код, чтобы представить ошибку валидации иначе, чем это предусмотрено стандартными средствами валидации HTML5. При сообщении об ошибке данное кастомное сообщение показывается пользователю.

Реализация кастомного сообщения об ошибке

Как вы видели в примерах HTML5-валидации выше, каждый раз, когда пользователь пытается отправить не валидную форму, браузер отображает сообщение об ошибке. Способ отображения сообщения зависит от браузера.

У этих автоматических сообщений есть два недостатка:

• Не существует стандартного способа их стилизации с помощью CSS.
• Они зависят от локали браузера, из-за чего страница может быть на одном языке, а сообщение об ошибке — на другом, как показано на следующем скриншоте браузера Firefox.

Настройка таких сообщений об ошибках является одной из наиболее распространённых причин использования Constraint Validation API. Давайте рассмотрим простой пример, как это делается.

Начнём с простого HTML (Не стесняйтесь поместить это в пустой HTML-файл. Вы можете взять за основу свежую копию fruit-start. html, если хотите):

<form>
  <label for="mail">I would like you to provide me with an e-mail address:</label>
  <input type="email" name="mail">
  <button>Submit</button>
</form>

Добавьте на страницу следующий JavaScript:

const email = document.getElementById("mail");

email.addEventListener("input", function (event) {
  if (email.validity.typeMismatch) {
    email.setCustomValidity("I am expecting an e-mail address!");
  } else {
    email.setCustomValidity("");
  }
});

Здесь мы сохраняем ссылку на поле email, а затем добавляем к нему обработчик события, который запускает код обработчика каждый раз, когда в поле меняется значение.

В коде обработчика мы проверяем, возвращает ли свойство поля email validity.typeMismatch значение true, что значит, что содержащееся значение не соответствует шаблону корректного email-адреса. Если возвращается true, мы вызываем метод setCustomValidity() с кастомным сообщением. Это делает поле не валидным, поэтому попытка отправить форму приводит к ошибке и отображается кастомное сообщение об ошибке.

Если свойство validity.typeMismatch возвращает false, мы вызываем метод setCustomValidity() с пустой строкой. Это делает поле валидным, поэтому форма может быть успешно отправлена.

Попробовать пример можно ниже:

Более подробный пример

Теперь, когда мы разобрали простой пример, давайте посмотрим, как можно использовать данный API для создания более сложной валидацию.

Во-первых, HTML. Опять же, не стесняйтесь писать его вместе с нами:

<form novalidate>
  <p>
    <label for="mail">
      <span>Please enter an email address:</span>
      <input type="email" name="mail" required minlength="8">
      <span aria-live="polite"></span>
    </label>
  </p>
  <button>Submit</button>
</form>

Эта простая форма использует атрибут novalidate, который отключает автоматическую валидацию браузером; это позволяет нашему скрипту взять управление валидацией на себя. Однако, это не отменяет поддержку Constraint Validation API или псевдоклассов, таких как :valid или ему подобных. Это значит, что хотя браузер автоматически и не проверяет валидность формы перед отправкой данных, вы можете сделать это самостоятельно и соответствующим образом стилизовать форму.

Объектом валидации является обязательный для заполнения <input type="email">, длина которого не должна быть меньше 8 символов. Давайте напишем код, проверяющий эти критерии, и покажем кастомное сообщение об ошибке в случае несоблюдения какого-то из них.

Мы хотим показывать сообщение об ошибке внутри элемента <span>. Данному элементу задан атрибут aria-live, чтобы гарантировать, что наше кастомное сообщение об ошибке будет доступно всем, включая пользователей скринридеров.

Примечание: Ключевым моментом здесь является то, что добавление к форме атрибута novalidate отключает отображение встроенных сообщений об ошибке и позволяет вместо этого добавлять в DOM кастомные сообщения.

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

body {
  font: 1em sans-serif;
  width: 200px;
  padding: 0;
  margin : 0 auto;
}

p * {
  display: block;
}

input[type=email]{
  -webkit-appearance: none;
  appearance: none;

  width: 100%;
  border: 1px solid #333;
  margin: 0;

  font-family: inherit;
  font-size: 90%;

  box-sizing: border-box;
}


input:invalid{
  border-color: #900;
  background-color: #FDD;
}

input:focus:invalid {
  outline: none;
}


.error {
  width  : 100%;
  padding: 0;

  font-size: 80%;
  color: white;
  background-color: #900;
  border-radius: 0 0 5px 5px;

  box-sizing: border-box;
}

.error.active {
  padding: 0.3em;
}

Теперь давайте рассмотрим JavaScript, который реализует кастомную валидацию.

const form  = document.getElementsByTagName('form')[0];

const email = document.getElementById('mail');
const emailError = document. querySelector('#mail + span.error');

email.addEventListener('input', function (event) {
  
  

  if (email.validity.valid) {
    
    
    emailError.textContent = ''; 
    emailError.className = 'error'; 
  } else {
    
    showError();
  }
});

form.addEventListener('submit', function (event) {
  

  if(!email.validity.valid) {
    
    showError();
    
    event.preventDefault();
  }
});

function showError() {
  if(email.validity.valueMissing) {
    
    
    emailError.textContent = 'You need to enter an e-mail address.';
  } else if(email.validity.typeMismatch) {
    
    
    emailError.textContent = 'Entered value needs to be an e-mail address.';
  } else if(email.validity.tooShort) {
    
    
    emailError.textContent = `Email should be at least ${ email.minLength } characters; you entered ${ email.value.length }.`;
  }

  
  emailError.className = 'error active';
}

Комментарии объясняют логику хорошо, но кратко:

• При каждом изменении значения поля, мы производим его валидацию. Если данные валидны, удаляем ранее отображаемые сообщения об ошибках. Если данные не валдны, запускаем showError(), чтобы показать соответствующую ошибку.
• При каждой попытке отправить форму, мы снова производим валидацию. Если данные валидны, позволяем отправку формы. Если данные не валидны, запускам showError(), чтобы показать соответствующее сообщение об ошибке, а также предотвращаем отправку формы с помощью preventDefault().
• Функция showError() использует различные свойства объекта validity поля ввода, чтобы определить тип ошибки и отобразить соответсвущее сообщение.

Рабочий пример:

Constraint Validation API явяется мощным инструментом валидации форм, позволяющим получить контроль над пользовательским интерфейсом, существенно превосходящий возможности HTML и CSS.

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

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

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

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

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

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

Это явно вопрос пользовательского интерфейса. Вы должны решить, как в этом случае будет себя вести форма. Будет ли она в любом случае отправлять данные? Нужно ли выделять поля, содержащие ошибки? Нужно ли отображать сообщения об ошибках?

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

Чтобы снизить степень разочарования пользователя, очень важно предоставить как можно больше полезной информации, чтобы помочь исправить данные, которые он ввёл неправильно. Нужно предложить правильные варианты, чтобы дать понять, какие данные вы ожидаете от него получить, а также сообщение, чётко описывающее ошибку. Если вы хотите подробнее ознакомиться с требованиями к пользовательскому интрефейсу при валидации форм, предлагаем прочитать следующие статьи:

Пример без использования Constraint Validation API

Чтобы проиллюстрировать это дальше приводится упрощённая версия предыдущего примера, которая работает с устаревшими браузерами.

HTML почти тот такой же; мы только удалили функционал валидации HTML5.

<form>
  <p>
    <label for="mail">
        <span>Please enter an email address:</span>
        <input type="text" name="mail">
        <span aria-live="polite"></span>
    </label>
  </p>
  
  <button type="submit">Submit</button>
</form>

CSS также не требует особых изменений; мы только заменили CSS-псевдокласс :invalid на реальный класс и не использовали селектор по атрибутам, так как он не работает в Internet Explorer 6.

body {
  font: 1em sans-serif;
  width: 200px;
  padding: 0;
  margin : 0 auto;
}

form {
  max-width: 200px;
}

p * {
  display: block;
}

input. _`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/;



function addEvent(element, event, callback) {
  let previousEventCallBack = element["on"+event];
  element["on"+event] = function (e) {
    const output = callback(e);

    
    
    if (output === false) return false;

    if (typeof previousEventCallBack === 'function') {
      output = previousEventCallBack(e);
      if(output === false) return false;
    }
  }
};




addEvent(window, "load", function () {
  
  
  const test = email.value.length === 0 || emailRegExp.test(email.value);

  email.className = test ? "valid" : "invalid";
});


addEvent(email, "input", function () {
  const test = email.value.length === 0 || emailRegExp.test(email.value);
  if (test) {
    email.className = "valid";
    error.textContent = "";
    error.className = "error";
  } else {
    email.className = "invalid";
  }
});


addEvent(form, "submit", function () {
  const test = email.value.length === 0 || emailRegExp.test(email.value);

  if (!test) {
    email. className = "invalid";
    error.textContent = "I expect an e-mail, darling!";
    error.className = "error active";

    
    return false;
  } else {
    email.className = "valid";
    error.textContent = "";
    error.className = "error";
  }
});

Результат выглядит следующим образом:

Как вы можете видеть, сделать собственную валидацию не так уж и сложно. Сложность состоит лишь в том, чтобы сделать его кроссплатформенным и работающим с любой формой, которую можно создать. Для проверки формы доступно множество библиотек, например Validate.js.

Вы дошли до конца этой статьи, но можете ли вы вспомнить самую важную информацию? Вы можете найти дополнительные тесты, чтобы убедиться, что вы сохранили эту информацию, прежде чем двигаться дальше — Test your skills: Form validation.

Для проверки формы на стороне клиента иногда требуется JavaScript, если вы хотите настроить стилизацию и сообщения об ошибках, но это всегда требует от вас внимательного отношения к пользователю. Всегда помните о необходимости помогать пользователям исправлять данные, которые они вводят. Для этого обязательно нужно:

• Отображать явные сообщения об ошибках.
• Снисходительно относиться к формату ввода.
• Указывать, где именно возникла ошибка. Особенно в больших формах.

После того, как вы убедились, что форма заполнена правильно, ее можно отправлять. Дальше мы рассмотрим отправку данных формы.

Продвинутые темы

Как сделать обтекание картинки текстом?

Задача

Добавить изображение на страницу так, чтобы оно обтекалось рядом лежащим текстом.

Решение

Обтекание картинки текстом обычно используется для компактного размещения материала и связывания между собой иллюстраций и текста. Само обтекание создаётся с помощью стилевого свойства float, добавляемого к селектору IMG. Значение left выравнивает изображение по левому краю, right — по правому. Обтекание при этом происходит по другим, свободным сторонам.

Пример 1. Обтекание картинок

HTML5CSS 2.1IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Обтекание</title>
  <style>
   .leftimg {
    float:left; /* Выравнивание по левому краю */
    margin: 7px 7px 7px 0; /* Отступы вокруг картинки */
   }
   .rightimg  {
    float: right; /* Выравнивание по правому краю  */ 
    margin: 7px 0 7px 7px; /* Отступы вокруг картинки */
   }
  </style>
 </head>
 <body>
  <h3>Доклад лейтенанта Бокатуева</h3>
  <p><img src="images/1.jpg" alt="Лейтенант Бокатуев">
     Вчера во время проведения разведоперации наша группа подверглась нападению неизвестного 
     противника в камуфляжной форме Алиенов.  В результате эффективной обороны и стремительной 
     контратаки многочисленная группа боевиков была смята и отброшена. Среди личного состава 
     потерь нет. Бойцы разведгруппы проявили недюжие навыки владения оружием. Особо отличился 
     в бою взводный Кудряшев&nbsp;М.А., грамотно использовавший человеческие ресурсы 
     своего взвода. В результате операции были захвачены элементы внеземной культуры, которые 
     переданы аналитической группе.</p>
     <h3>Пресс-релиз аналитической группы</h3>
  <p><img src="images/2.jpg" alt="Учёные, находящиеся в состоянии аффекта">
     В наших секретных лабораториях в рамках проекта &laquo;Пандора&raquo; разрабатывалось
     психотропное оружие. В результате неудачного эксперимента большинство ученых, работавших 
     над прибором, подверглись воздействию психотропного излучения, и они, находясь в состоянии 
     аффекта, растащили прототип по деталям. Возможно, наши ученые до сих пор находятся в 
     состоянии аффекта. </p>
 </body>
</html>

Результат данного примера показан на рис. 1.

Рис. 1. Текст с иллюстрациями

Использование свойства float заставляет текст плотно прилегать к изображению. Поэтому в примере введёно универсальное свойство margin, которое добавляет отступы между картинкой и текстом. Это свойство одновременно задаёт отступ сверху, справа, снизу и слева от фотографий.

Как сделать скриншот с компьютера или ноутбука: 10 простых способов

Чтобы не мучиться в поисках фотоаппарата, не подбирать освещение и не настраивать резкость, не ретушировать полученное фото 2 часа, можно сделать скриншот на ноуте. Он пригодится, чтобы создать шпаргалку, отправить переписку другу или сохранить напоминание. Подробнее о том, зачем нужен скрин, как его сделать и отредактировать, читайте в статье.

Что такое скриншот и зачем их делать?

Скриншот (с англ. screenshot) – это мгновенный снимок изображения на экране ноутбука или компьютера. Можно заскринить весь экран, одно активное окно или его часть. Это пригодится, чтобы решить системную проблему с ПК, сохранить и отправить напоминание. Подробнее о том, зачем делать скрины, узнайте из следующего списка.

6 причин, чтобы научиться делать скриншот на ноутбуке или ПК

1. Баги. Решать проблему с ПК по телефону – это долго и трудно, особенно если не разбираться в программе и пытаться объяснить сисадмину причину. Еще труднее рассказать бабушке, куда нужно нажать, чтобы набрать текст. Гораздо проще сделать и отправить фото, чтобы оценить неполадки удаленно.
2. Сохранить веб-страницу. Не придется заново искать текст при динамической структуре сайта, прокладывать маршрут в онлайн-картах.

Интересно почитать: Почему тормозит ноутбук: 7 вариантов ускорения работы

3. Создать иллюстрацию. Чтобы не тратить уйму времени на выбор освещения и ретушь при съемке, можно мгновенно проиллюстрировать текст в блоге или сообщении. Это удобно при создании инфографики, мастер-классов и рецептов.
4. Переписки и списки. Если смешно пошутил в переписке, так и тянет отправить шутку другу или запостить ее на странице в фейсбуке: мгновенный снимок пригодится. Муж снова забыл список продуктов? Скриншот выручит.
5. Защищенный файл: исправить текст в таком фото проблематично, поэтому скрины используются как доказательство, например, отчет по денежному переводу онлайн. Если отчет нужен, но конфиденциальные данные публиковать не хочется, замажьте их в фоторедакторе, например, в Corel Draw.

6. Сохранить настройки программы. Этот пункт похож на сохранение веб-страниц. Особенно полезен для тех, кто только начал учиться пользоваться программой. Чтобы не ошибиться во время использования, а потом судорожно не вспоминать, “как же было до этого”, и не искать в интернете, достаточно “запечатлеть” вариант по умолчанию.

Руководство по созданию скрина на ноутбуке с Windows: 3 метода

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

Сочетания клавиш и Paint

Чтобы снять изображение экрана на мониторе компьютера полностью, нажмите кнопку PrtSc (PrintScreen): снимок переместится в буфер обмена. Если требуется создать скрин активного окна на ноуте или компе, применяйте комбинацию Alt+PrtSc. В некоторых лэптопах требуется нажать сочетание Fn+PrtSc – для съемки целиком, и Fn+Alt+PrtSc – для используемого окна.

Чтобы картинка сохранилась, откройте стандартный Paint и нажмите Ctrl+V (вставить) на клавиатуре. Или кликните правой клавишей тачпада/мышки и выберете в открывшемся меню опцию “вставить” (для англоязычной версии ОС – “paste”). Для Windows версий XP или Vista найдите в меню “Правка → Вставить”. Для ОС Windows 7 и выше, жмите “Вставить” вверху, как показано на картинке.

Почитайте интересный материал: Обзор операционной системы Microsoft Windows 10: новые грани

В классическом приложении Paint отредактируйте картинку: сотрите ластиком ненужные части рисунка, вставьте текст в изображение. Заливка фона поможет сделать текст четче. После редактуры сохраните готовую картинку с нужным форматом.

Примечание: Для операционных систем Windows 8 и 10 вместо Fn+PrtSc используйте комбинацию Win + PrtScn, чтобы сфотографировать весь экран: картинка сохранится в библиотеке изображений автоматически.

Важно! До того, как фото вставлено в редактор, не копируйте другие элементы, иначе снимок не сохранится.

Помните: на полноразмерной клавиатуре (с цифровым блоком) клавиша PrtSc вынесена отдельно, на стандартной (без цифрового блока) кнопка PrtSc обычно находится на клавишах F11, Ins (Insert).

“Ножницы” в Windows

«Родной» инструмент Windows поможет как заскринить весь экран, так и любую его часть. Большинство пользователей предпочитает это приложение привычному сочетанию кнопок на клавиатуре, поскольку здесь можно создать изображение любой формы, а также отредактировать картинку.

• Найдите утилиту через “Пуск”: в поисковую строку введите “ножницы” и кликните по названию приложения.
• В открывшемся окне приложения выберете опцию “Создать”, чтобы появилось опциональное меню.
• Кликните на одну из представленных опций, чтобы выбрать формат выделения и создать скрин. В этом случае допустимы вариации формы скрина: она может быть прямоугольной, произвольной, на целый экран. Картинка откроется в окне программы.
• Воспользовавшись инструментом “Перо” – подпишите изображение, выбрав “Маркер” – выделите текст, если необходимо.
• С помощью “резинки” сотрите ненужные области рисунка.
• Нажав кнопку “Сохранить как”, выберете место и формат изображения. В этом приложении можно создавать рисунки в JPG, GIF и PNG.

Примечание: чтобы отправлять скрины без проблем, выбирайте формат JPG или PNG. Такие картинки достаточно легкие, чтобы отправлять их на e-mail. Кроме того, эти форматы универсальны, поэтому считываются любым редактором или просмотрщиком фотографий, например, Adobe Photoshop.

Кнопки Windows + H

Такая комбинация пригодится, чтобы сразу отправить скрин на электронную почту или сохранить его в облачном хранилище. После нажатия клавиш появится картинка и панель, отображающая список приложений. Выбирайте, что нужно сделать: отправить фотку по e-mail, сохранить в облако Google Disk, Dropbox, OneNote или другой сервис. Помимо экспорта в облачное хранилище, можно сразу открыть доступ к файлу.

Читайте также: Как запустить Bluetooth на ноутбуке с Windows

Как сделать скриншот экрана на компьютере с Mac OS

Сделать printscreen на MacBook просто: выбирайте один из 6 предложенных вариантов.

1. Одновременно нажмите cmd+ctrl+shift+3, чтобы скопировать снимок. Откройте приложение для графики и редактирования фото, которая вам нравится и вставьте изображение с помощью команды cmd+v. Отредактируйте, если нужно, и сохраните в требуемом формате.
2. Нажмите cmd+shift+3, и рисунок в формате PNG появится на рабочем столе. Названием картинки служит дата и время съемки. Этот способ быстрее первого.

3. Введите команду cmd+shift+4 – картинка части экрана сразу сохранится на рабочем столе. Преимущество этого способа в том, что не придется обрезать изображение, а значит, оно не потеряет качество. Недостаток же такого варианта в том, что нельзя создать принтскрин на ноутбуке или компе слишком маленькой части, например, значка папки. В этом случае изображение растянется.

Читайте также: Обновленная Mac OS High Sierra уже доступна

4. Чтобы заскринить используемое окно, примените cmd+shift+4+пробел.

Полезно знать. Чтобы отредактировать скрин экрана, воспользуйтесь сочетанием cmd+shift+4+”дополнительная клавиша”. Так, добавьте дополнительный shift, чтобы растянуть картинку по одной стороне. Сначала выделите пустую часть, а уже потом нажимайте дополнительную кнопку. Мышкой растяните картинку. Добавляйте option, чтобы растянуть изображение по всему периметру.

Читайте также: Почему MAC?

Сторонние программы для создания скриншотов

Чтобы создавать скрины еще быстрее и увеличить возможности редактирования, скачайте специальное приложение. Мы подобрали 3 варианта бесплатных и удобных скриншотеров.

• Gyazo (gyazo.com) – скриншотер, который снимает выделенные области и сохраняет их в облачном сервере. Пользователь может получить доступ к фото с любого девайса: компьютера, смартфона, лэптопа или планшета. К тому же можно поделиться ссылкой с другом или коллегой. Учитывайте, при бесплатном аккаунте в облачном менеджере Gyazo снимки хранятся в течение месяца. В платной версии – неограниченный доступ и дополнительные редакторские функции.

• Microsoft Snip (microsoft.com) позволяет снимать активные окна, весь экран и его фрагменты. Но все не так просто: приложение позволяет создать видеозапись процесса внесения правок. К тому же этот менеджер обеспечивает запись видео со звуком, позволяет добавлять голосовые комментарии к роликам. Это уже не просто скриншотер, а целая мультимедийная программа, используемая для создания презентаций и видеороликов.

• FastStone Capture (faststone. org) – простая и удобная утилита, которая позволяет захватить весь экран, его часть или отдельный элемент. При запуске появляется небольшое окошко, где можно выбрать необходимую опцию. После открывается редактор для ретуши со следующими функциями: изменение размера, формата, коррекцией цветов. Приложение также позволяет отправить фото на электронную почту.

Читайте также: Топ 8 программ для раздачи Wi-Fi с ноутбука

Фото экрана выручит, когда нужно отправить переписку, отчет о финансовой операции, удаленно исправить системные ошибки. Любая операционная система позволяет сделать, отретушировать и отправить скрин с помощью сочетания клавиш или предустановленных классических утилит. Для этих целей существуют и сторонние приложения с удобным интерфейсом и расширенными функциями редактирования, о которых вы узнали из нашего материала.
Смотрите видео: Как сделать скриншот экрана на ноутбуке?

Визуализация ТЗ — диаграммы, схемы, картинки | Жизнь — это движение! А тестирование

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

Как же сделать ТЗ понятнее? Можно улучшить текст — вместо скупого текста составить вариант использования. А можно использовать визуализацию. То есть добавить в требования картинки, диаграммы, таблицы…

Причем сделать это может не только аналитик, но и любой член команды. Тестировщикам особенно полезно визуализировать ТЗ, потому что это помогает сразу увидеть проблемные места и уточнить их ещё до реализации. Раннее тестирование и всё такое.

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

1. Вариант использования

2. Decision Table (таблицы решений)

3. State & Transition Diagram (схема состояний и переходов)

Но значит ли это, что таблица или S&T — единственный способ визуализации? Разумеется, нет! Можно рисовать вообще всё, что вам вздумается. Главное — чтобы картинка помогала лучше понять требование или тест (да, при описании тестов визуализация тоже помогает!).

И сегодня я покажу разные примеры визуализации из своей практики, или работ моих студентов. Может, что-то из этого приглянётся и вам!

Как рисовать картинку

Берем требование и представляем в графическом виде. Всё!

Главное отличие от S&T в том, что нам необязательно рисовать именно объект. Мы рисуем всё, что захотим. Всё, что поможет сделать ТЗ более читабельным, да хоть интерфейс в виде карты! Или блок-схема, или что-то ещё.

Примеры

Карта сценариев

Функционал взаимодействия с конкретной книгой (взято из работ моих студентов):

Это карта сценариев, а не S&T, но он этого она не менее полезная!

Загрузка инкремента

Блок-схема про то, «как это работает под капотом». На одном из проектов мы сделали довольно хитрую схему импорта данных из буферной таблицы. Для пользователей написан вариант использования, и там всё просто:

• Исходная система выгрузила данные в буферные таблицы.

• В таблице increment добавила номер выгруженного инкремента — это будет флаг для нашей системы начинать забор данных.

А на нашей стороне надо проверить таблицу инкрементов, попробовать выбрать новый инкремент, создать новые карточки, обновить существующие… Если смотреть через админку, это три разные задачи:

1. Подготовка данных

2. Загрузка

3. Очистка буфера

Каждая задача выполняет внутри кода несколько действий. А мне надо подготовить набор автотестов на каждый этап. Значит, надо разобраться, что там происходит. Я сначала долго тупила над «пользовательской» докой, пытаясь понять, как оно устроено внутри, а потом пошла к разработчику и попросила объяснить «для блондинок».

Это было продуктивное общение! Пока он объяснял, я рисовала на бумажке схему и задавала по ней вопросы. После нескольких вопросов разработчик признал, что я молодец, он про «вот это и то» не думал. Не зря рисовала! Без рисунка я бы просто не удержала всё в голове, и не обнаружила проблемные зоны.

По итогам обсуждения я создала в вики раздел «Техническая сторона сценариев, алгоритмы» и переписала туда все со своего листочка, полученный алгоритм и рисунок (в visio накидала):

1. null => 1. Выбираем все записи из таблицы INCREMENTS, где import_status is null и устанавливаем им значение import_status = 1.

2. Удаляем неактуальные записи из буферных таблиц (физ лица и телефонов).

3. Грузим физиков по условию in (id_increment, для которого import_status in 1).

4. Грузим телефоны по условию in (import_status in 1).

5. Создаем связи телефон — физик или телефон — юрик (тип контрагента смотрим по таблице staging).

6. Удаляем физиков из буфера, если не было ошибок на этапе загрузки.

7. Удаляем те телефоны, у которых есть связи (проверяем наличие record_id физика/юрика в staging).

8. 1 => 2. Выбираем все записи из таблицы INCREMENTS, где import_status = 1 и устанавливаем им значение import_status = 2.

Согласитесь, при наличии такой картинки тесты на каждый раздел писать намного проще! Я четко вижу, что задача подготовки выполняет три действия. Значит, тестируем каждое!

null => 1. Выбираем все записи из таблицы INCREMENTS, где import_status is null и устанавливаем им значение import_status = 1.

↓

Добавляем запись с пустым import_status — проверяем, что статус изменился на 1.

А если исходно был статус 1?

А если исходно другой статус?

Так, дальше идет вызов oracle-процедуры. На схеме записано, как она называется — ищем по названию в коде, изучаем, что она делает. И готовим тестовые данные, как позитивные, так и негативные.

Что у нас дальше? …

И так по каждому пункту. Потом, когда к проекту подключались другие люди и тоже не могли понять, как тестировать задачу, я давала ссылку на эту страничку в конфлюенсе. И все сразу вставало на свои места!

Так что я продолжила традицию. Если есть какой-то сложный алгоритм — думала, как его можно зарисовать (блок-схема, диаграмма, кружочки и стрелочки, что угодно!), а потом заносила в раздел с техническими подробностями.

Тесты в PowerPoint!

Метод рисунка работает не только с ТЗ, но и с тестами!

Тестировала оракловые вьюшки (view). Фактически это просто табличка с нужными мне колонками. Как любой отчет в интерфейсе. Cтроится отчет по определенному диапазону времени. Если сущность менялась в этом диапазоне — она попадет во view. Если нет — то увы.

На входе у меня есть текущее состояние базы — когда объект был создан, а когда закрыт. И параметры диапазона:

Я набросала все интересные мне тесты в блокноте — это быстрее всего. Допустим, объект создали 5 числа, а удалили 10. Какие интервалы между ними мне надо посмотреть?

Рисунки помогают мне быстро охватить картину покрытия тестами. Так, вот только создание попадает в диапазон — есть. А оба события сразу — есть. А между ними? Есть. А… И так далее. Накидаешь идей за пару минут мозгового штурма, и можно с ними работать. Переносить в код и описывать на вики.

По мере разработки тестов я вычеркиваю их зеленым маркером — если меня отвлекут, то, вернувшись к работе, я всегда легко пойму, какие тесты уже сделала, а какие еще осталось. Не потеряю мысль. А цвет «прозрачный», вычеркивание не мешает читать.

Но с переносом в вики проблема — если описывать текстом, получается унылая фигня. В блокнот взгляд кидаешь — все понятно. Это покрыл, это покрыл, это покрыл. В вики смотришь… И нужно мысленно в уме рисовать, чтобы увидеть общую картину. Неудобненько. В таких случаях я добавляю к описанию рисунки.

Обычно я рисую в yEd. Но черточки и текст отдельно там сделать проблематично. Тут не подходит. Хм… Paint? Открыла его, нарисовала кривую «прямую». Тоже неудобно, хочется, чтобы симпатичненько смотрелось, а мышкой я прямые линии буду полчаса рисовать. Visio покупать надо… О, PowerPoint!

Открыла, попробовала. Поставила исходные засечки «создан 5, закрыт 10». Добавила прямоугольник на задний план — идеально! Просто перетаскиваешь прямоугольник, то сужая, то расширяя его, и делаешь скриншоты. А как наглядно получается:

Добавим картинки в описание тестов на конфлюенсе (вики):

Красота!

Вы только представьте себе всю унылость описания, не будь картинок. Вот задали тебе вопрос, как поведет себя система, если диапазон такой-то. Навскидку не помнишь? Посмотри в тестах! Открываешь описание и пытаешься вкурить, где подходящий тебе случай. А так открыл, пробежался глазами по картинкам и быстренько все нашел.

Есть картинки и посложнее. Когда событий будет поболее, чем просто «создали один объект и его же закрыли». Тут мне было удобнее рисовать время по вертикальной оси:

Вот тут то меня PowerPoint и выручил! Если делать зарисовки от руки, то на каждый тест надо повторять основу, а потом обводить кружочком нужный диапазон. Получится долго. А без визуализации «что я уже сделала» мне тяжело. А в программе вжух-вжух поперемещал желтый прямоугольничек, заскринил каждую вариацию — и готово! Даже круче блокнотика и ручки 🙂

Плюсы подхода

Визуализация! 

1. Позволяет увидеть, что мы упустили

2. Помогает там, где много входных условий

Двойной профит визуализации: пока вы рисуете, то видите все слабые зоны ТЗ. А ещё делаете его более наглядным. Теперь каждый, кто будет читать ТЗ после вас, сразу всё поймет!

Минусы подхода

Картинку должен кто-то поддерживать, и это кто-то явно вы.

Но всегда можно нарисовать ее одноразово!

Инструменты для рисования

1. Бумага и ручка!!

2. Маркер и доска

3. Xmind (freemind, etc)

4. Microsoft Visio

5. PowerPoint

6. Draw.io

7. YeD

8. …

Если задача простая — используйте бумагу и ручку. Будет быстрее.

Если задача сложнее — возьмите инструмент. Любой, хоть paint. Ведь фишка не в инструменте — он лишь помогает вам сформировать мысль. Чем проще инструмент, тем лучше. Чем проще рисунок, тем круче. Вы ведь не Мону Лизу рисуете, а только набросок, который помогает понять тест.

Итого

Рисунок — мощнейший инструмент визуализации. Если вам сложно что-то понять, зарисуйте это! Это может быть сложный участок ТЗ или чек-лист тестов. Пробуйте, экспериментируйте — это время обязательно окупится. Причем сразу же, ведь, пока рисуешь, приходит вдохновение «проверить еще вот тут»!

См также (напоминаю ссылочки):

Как составлять вариант использования — ещё один вариант оформления требований.

Decision Table — что это и как применять — и ещё один вариант, рисуем таблички.

State & Transition Diagramm (схема состояний и переходов) — и ещё ))

PS — это выдержка из моей книги для начинающих тестировщиков, написана в помощь студентам моей школы для тестировщиков

Цитаты К.С. Льюиса Проблема боли

Amazon.com: Элегантные вывески Мемориал в рамке для домашних животных больше не рядом с нами, но навсегда в наших сердцах: товары для домашних животных

Amazon’s Choice выделяет высоко оцененные продукты по хорошей цене, доступные для немедленной отправки.