Валидация данных – Как проверить ввод пользователя на HTML-формы с примером кода JavaScript

Автор оригинала: Shruti Kapoor.

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

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

Нам нужна валидация формы в любое время, когда мы принимаем пользовательский ввод. Мы должны обеспечить, чтобы введенные данные находились в правильном формате, заключается в допустимом диапазоне данных (например, для полей даты), и не содержит вредоносных кодов, которые могут привести к инъекциям SQL. Разведочные или отсутствующие данные могут также вызывать ошибки API для броска.

Каковы различные виды проверки форм?

Валидация формы может произойти на стороне клиента и на стороне сервера.

Клиентская коррекция на стороне клиента происходит с использованием атрибутов HTML5 и JavaScript на стороне клиента.

Возможно, вы заметили, что в некоторых формах, как только вы введете недопустимый адрес электронной почты, форма выдает ошибку «Пожалуйста, введите действительный адрес электронной почты». Этот немедленный тип проверки обычно делается через JavaScript на стороне клиента.

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

Здесь форма позвонил на серверный код сервера и вернул ошибку проверки после выполнения дополнительных чеков кредитных карт. Этот корректный случай, когда создан Server Side Call, называется Vailation Side Side.

Какие данные должны быть подтверждены?

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

1. Проверяние формата полей, таких как адрес электронной почты, номер телефона, почтовый индекс, имя, пароль.
2. Проверка обязательных полей
3. Проверка типа данных, таких как номер строки VS для таких областей, как номер социального страхования.
4. Обеспечение того, чтобы введенное значение является допустимым значением, таким как страна, дата и т. Д.

Как настроить валидацию на стороне клиента

На стороне клиента валидация может быть сделана двумя способами:

1. Использование функциональности HTML5
2. Используя JavaScript

Как настроить валидацию с функциональностью HTML5

HTML5 предоставляет кучу атрибутов, чтобы помочь проверить данные. Вот некоторые общие случаи валидации:

• Создание поля требуется с использованием требуется
• Сдерживая длину данных:
  • Minlength , Maxlength : для текстовых данных
  • мин и Макс Для максимального значения типа Num

• Ограничение типа данных, использующих Тип :

  • <имя ввода = "несколько>

• Указание шаблонов данных с использованием шаблон :

  • Указывает шаблон Regex, которую введенные данные формы должны соответствовать

Когда значение входного значения соответствует вышеуказанному валидации HTML5, он назначается псевдо-класс : Действительно и : недействителен Если это не так.

Давайте попробуем пример:

 First Name: 

 Last Name: 

Submit

Ссылка на jsfiddle.

Здесь у нас есть два обязательных поля – имя и фамилия. Попробуйте этот пример в jsfiddle. Если вы пропустите любой из этих полей, и нажмите «Отправить», вы получите сообщение «Пожалуйста, заполните это поле». Это валидация, используя встроенный HTML5.

Как настроить проверку, используя JavaScript

При реализации формы проверки есть несколько вещей:

1. Что определяется как «действительные» данные? Это поможет вам ответить на вопросы об формате, длине, обязательных полях и типах данных.
2. Что происходит, когда введен неверные данные? Это поможет вам определить пользовательский опыт проверки. данных? И так далее.

Вы можете выполнить проверку JavaScript двумя способами:

1. Встроенная проверка с использованием JavaScript
2. HTML5 Ограничение Валидации API

Встроенная проверка с использованием JavaScript

   First Name* 
  
  Submit

  
    Please enter First Name
  

const submit = document.getElementById("submit");

submit.addEventListener("click", validate);

function validate(e) {
  e.preventDefault();

  const firstNameField = document.getElementById("firstname");
  let valid = true;

  if (!firstNameField.value) {
    const nameError = document.getElementById("nameError");
    nameError.classList.add("visible");
    firstNameField.classList.add("invalid");
    nameError.setAttribute("aria-hidden", false);
    nameError.setAttribute("aria-invalid", true);
  }
  return valid;
}

#nameError {
  display: none;
  font-size: 0.8em;
}

#nameError.visible {
  display: block;
}

input.invalid {
  border-color: red;
}

Ссылка на jsfiddle.

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

Этикетки Aria соответственно изменяются, чтобы сигнализировать об ошибке. Используя CSS, чтобы показать/скрыть ошибку, мы сокращаем количество манипуляций DOM, которые нам нужно сделать. Сообщение об ошибке приведено в контексте, тем самым сделав пользовательский опыт интуитивности.

HTML5 Ограничение Валидации API

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

Некоторые методы, предоставленные этой API:

1. контрольная связь
2. setcustomvalitelity
3. ReportValitelity

Следующие свойства полезны:

1. срок действия
2. ВалидацияМЕССАЖ
3. WillValidate

В этом примере мы проверим, используя встроенные методы HTML5, такие как Требуется и Длина В сочетании с помощью API проверки ограничения, чтобы обеспечить подробные сообщения об ошибках.

 First Name: 

Submit

const nameField = document.querySelector("input");

nameField.addEventListener("input", () => {
  nameField.setCustomValidity("");
  nameField.checkValidity();
  console.log(nameField.checkValidity());
});

nameField.addEventListener("invalid", () => {
  nameField.setCustomValidity("Please fill in your First Name.");
});

Ссылка на jsfiddle.

Не забудьте о проверке на стороне сервера

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

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

Форма проверки лучшие практики

1. Всегда имейте проверку Server Side, поскольку вредоносные актеры могут обойти проверку на стороне клиента.
2. Предоставьте подробные сообщения об ошибках в контексте с полем, которое произвело ошибку.
3. Укажите пример того, как следует выглядеть данные в случае сообщения об ошибке, например – «Электронная почта не соответствует формату – test@example.com “
4. Избегайте использования одной ошибки страниц, которые включают перенаправление. Это плохой пользовательский опыт и заставляет пользователя вернуться на предыдущую страницу, чтобы исправить форму и терять контекст.
5. Всегда отметьте необходимые поля.

Заинтересованы в большем количестве учебных пособий и статей, как это? Подпишитесь на мою рассылку. или следовать за мной в Twitter

Оригинал: “https://www.freecodecamp.org/news/form-validation-with-html5-and-javascript/”