Я собираюсь создать серию с проверкой формы с использованием HTML, Javascript и Angular.

Это часть — я использую только HTML.

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

Несколько сообщений проверки:

  1. Это поле обязательно к заполнению.
  2. Пожалуйста, введите действительный адрес электронной почты.
  3. Ваш пароль должен быть от 8 до 10.

Типы

Проверка на стороне клиента: Performed by web browser before input has been sent to web server

Проверка на стороне сервера: Performed by web server after input has been received.

Итак, эта серия охватывает только проверка на стороне клиента.

Давайте начнем…

В HTML проверка формы достигается с помощью нескольких атрибутов, таких как.

тип — Ограничение типа данных с помощью type атрибут на входе.
type=»email» — принимает только электронную почту. Необходимо указать шаблон для проверки электронной почты.
type=»password» — введенные символы станут точками, как и положено паролю.
Таких типов более 20. Которые напрямую ограничивают и подсказывают, что вводить. Это: кнопка, телефон, текст, дата, время, дата и время, цвет, файл, скрытый, изображение, месяц и т. д.

требуется — Поле ввода должно быть заполнено до отправки формы. Он работает со следующими типами ввода: текст, поиск, URL-адрес, телефон, электронная почта, пароль, дата, номер, флажок, радио и файл. Он показывает сообщение проверки как Please fill in this field когда пользователь не заполняет и не отправляет форму.

минДлина — Указывает минимальное количество символов, которое необходимо ввести перед отправкой формы. Работает с: текстом, поиском, URL, телефоном, электронной почтой и паролем. Он будет показывать сообщения об ошибках, когда длина не соответствует minLength и не показывать никаких сообщений об ошибках, если символы не введены.

Показывает сообщение об ошибке как Please lengthen the text to x characters are more (You are currently using 1 character)

maxLnegth — Указывает максимальное количество символов, которое необходимо ввести перед отправкой формы. Работает с: текстом, поиском, URL, телефоном, электронной почтой и паролем. Это ограничит пользователя для ввода большего количества символов после превышения maxLength и не будет показывать никаких сообщений об ошибках в любое время.

мин & Максимум: указывает минимальное и максимальное значения для ввода. Работает с: числом, диапазоном, датой, датой и временем, месяцем, временем и неделей.

  1. Пустое значение принимается.
  2. Мы можем ввести любое значение, но при отправке отображается сообщение об ошибке. Так как, если введенное число меньше min, то Value must be greater than or equal to min или если введенное число больше max, то Value must be less than or equal to max

шаблон: Указывает регулярное выражение, по которому проверяется входное значение при отправке формы. Тип ввода проверяет заданный шаблон и показывает сообщение об ошибке как Please match the format requested.

размер: определяет видимую ширину ввода.

несколько: Работает при вводе и выборе, чтобы позволить пользователю выбирать несколько элементов.

Описание изображения

И код здесь: гитхаб

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

Спасибо.

Вы можете следить за мной здесь: Твиттер