Проверка формы HTML5

Раньше мы создавали форму на странице, а затем настраивали JavaScript для события OnSubmit, чтобы затем проверять значения так, как мы хотим, чтобы они были. Наиболее распространенным запросом будет проверка того, что все обязательные поля не пусты.

if(document.getElementById('username').value == '')
{
    alert('Username can not be empty.');
}

Если у вас есть форма с большим количеством полей ввода, тогда ваш JavaScript может быстро стать огромным, все с проверками на то, что поле формы является обязательным полем . Или вам нужно будет проверить, что введенное значение является числом, адресом электронной почты, номером телефона и т. Д. Здесь HTML5 вступает в свои права, HTML5 поставляется с некоторыми новыми атрибутами, которые вы можете использовать для выполнения этих типов проверок без необходимость писать любой JavaScript.

Есть 3 новых атрибута, о которых вам нужно знать в проверке формы HTML5 атрибут type , pattern и require .

Тип атрибута

Атрибут type — это то, что вы обычно используете, чтобы определить, что поле формы — это текстовое поле, флажок или переключатель.

<input type="text" />
<input type="checkbox" />
<input type="radio" />

С HTML5 он поставляется с кучей новых значений типов, которые принесут проверку формы.

• цвет
• Дата
• Дата и время
• Дата и время-местный
• электронное письмо
• месяц
• число
• спектр
• поиск
• телефон
• время
• URL
• неделю

Тип ввода цвета

Тип ввода цвета добавит в форму палитру цветов, позволяя пользователю выбрать цвет, который добавит значение HEX к входу.

<input type="color" />

Нет улучшений проверки, которые идут с этим типом ввода, он просто добавит палитру цветов на страницу.

Тип ввода даты

Тип ввода даты позволит вам добавить в форму выбора даты.

<input type="date" />

Проверка, которую вы получите с этим полем, может вводить только цифры в поле ввода.

Тип ввода электронной почты

Тип ввода электронной почты добавит новое текстовое поле в браузер.

<input type="email" />

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

Тип ввода месяца

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

<input type="month" />

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

Тип ввода номера

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

<input type="number" />

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

Тип входа диапазона

Тип ввода диапазона добавит в браузер новый ползунок, позволяющий выбирать из диапазона чисел.

<input type="range" min="1" max="10" />

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

Тип входа поиска

Тип ввода поиска добавляет в браузер текстовое поле, которое позволяет добавить поле поиска на страницу.

<input type="search" />

Вы не получаете никаких новых функций проверки с этим типом ввода.

Тип ввода времени

Тип ввода времени позволит вам добавить в форму указатель времени.

<input type="time" />

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

Тип ввода URL

Тип ввода URL добавит в браузер текстовое поле, обеспечивающее ввод URL.

<input type="url" />

Проверка, которую вы получаете с этим, заключается в том, что при отправке формы браузер проверяет, является ли это значение URL-адресом.

Тип ввода недели

Тип ввода недели добавляет в браузер средство выбора даты, которое позволяет пользователю выбрать неделю года.

<input type="week" />

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

Атрибут шаблона

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

Только буквы

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

<input type="text" pattern="[a-zA-Z]+" title="Only enter letters" />

HEX значения

Чтобы убедиться, что поле ввода принимает только значения HEX, вы можете использовать атрибут pattern с регулярным выражением.

<input type="text" pattern="^#+([a-fA-F0-9]{6}|[a-fA-F0-9]{3})$" title="HEX Values" />

Обязательный атрибут

Обязательный атрибут — это тот атрибут, который вы, скорее всего, будете использовать чаще всего. Этот атрибут гарантирует, что это поле ввода не является пустым, поместив его в элемент textbox, проверит значение события submit и, если значение будет пустым, появится сообщение об ошибке.

Этот атрибут — то, что вы будете использовать, чтобы заменить пример кода JavaScript в начале урока.

<input type="text" required="true" />

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