Как проверить email, телефон или формат поля

Короткий ответ

Укажите полю подходящий type — браузер сам проверит формат при отправке:

<form>
  <input type="email" placeholder="Email" required>
  <button>Send</button>
</form>

Введите anna без собачки и нажмите «Send» — форма не отправится. Тип url так же проверяет адреса сайтов.

Свой формат через pattern

Для остального есть pattern — регулярное выражение, которому должно соответствовать всё значение целиком. В title опишите формат словами: браузер покажет его в подсказке:

<form>
  <input name="zip" pattern="[0-9]{5}" title="Five digits" placeholder="ZIP code" required>
  <button>Send</button>
</form>

Длина и числа

minlength и maxlength ограничивают длину текста, а у полей type="number" и дат есть min, max и step:

<input type="password" minlength="8" placeholder="At least 8 characters">
<input type="number" min="1" max="10" value="1">

Телефон

У type="tel" нет встроенной проверки: номера в разных странах записывают по-разному. Зато на телефоне он открывает цифровую клавиатуру. Если формат известен, добавьте pattern, например \+[0-9]{11}.

Частая ошибка

Ставят pattern полю без required и ждут, что пустое поле не пройдёт. Шаблон проверяет только введённое значение: пустое поле считается правильным, и форма отправляется. Ещё одна ловушка — pattern у поля type="number": там он не действует, для чисел нужны min, max и step.

<form>
  <input pattern="[0-9]{5}" placeholder="Leave me empty">
  <button>Send</button>
</form>