Перевірка базової форми в JavaScript

Раніше перевірка форми відбувалась на сервері після того, як особа вже ввела всю свою інформацію та натиснула кнопку подати.

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

Це був тривалий процес, який спричинив би велике навантаження на сервер.

У наші дні JavaScript пропонує декілька способів перевірити дані форми безпосередньо у браузері перед відправкою їх на сервер.

Ось HTML-код, який ми будемо використовувати в наступних прикладах:

  Form Validation  // Form validation will go here     
Username
Email Address

Основна перевірка

Цей тип перевірки передбачає перевірку всіх обов’язкових полів та переконання, що вони правильно заповнені.

Ось базовий приклад функції, validateяка показує попередження, якщо введені ім’я користувача та адреса електронної пошти порожні, інакше воно повертає true:

const submitBtn = document.getElementById('submit-btn'); const validate = (e) => { e.preventDefault(); const username = document.getElementById('username'); const emailAddress = document.getElementById('email-address'); if (username.value === "") { alert("Please enter your username."); username.focus(); return false; } if (emailAddress.value === "") { alert("Please enter your email address."); emailAddress.focus(); return false; } return true; } submitBtn.addEventListener('click', validate); 

Але що, якщо хтось вводить випадковим текстом свою електронну адресу? Наразі validateфункція все одно поверне true. Як ви можете собі уявити, надсилання неправильних даних на сервер може призвести до проблем.

Тут з’являється перевірка формату даних.

Перевірка формату даних

Цей тип перевірки фактично переглядає значення у формі та перевіряє їх правильність.

Перевірка адрес електронної пошти, як відомо, складна - існує величезна кількість законних адрес електронної пошти та хостів, і неможливо вгадати всі допустимі комбінації символів.

Тим не менш, є кілька ключових факторів, які є загальними для всіх дійсних електронних адрес:

  • Адреса повинна містити один знак @ і принаймні один крапковий (.) Символ
  • Символ @ не може бути першим символом адреси
  • . повинен бути принаймні один символ після символу @

З огляду на це, можливо, розробники використовують регулярний вираз, щоб визначити, чи є електронною адресою дійсною чи ні. Ось функція, яку Тайлер Макгінніс рекомендує у своєму блозі:

const emailIsValid = email => { return /^[^\[email protected]][email protected][^\[email protected]]+\.[^\[email protected]]+$/.test(email); } emailIsValid('[email protected]@camp.org') // false emailIsValid('[email protected]') // true

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

const submitBtn = document.getElementById('submit-btn'); const validate = (e) => { e.preventDefault(); const username = document.getElementById('username'); const emailAddress = document.getElementById('email-address'); if (username.value === "") { alert("Please enter your username."); username.focus(); return false; } if (emailAddress.value === "") { alert("Please enter your email address."); emailAddress.focus(); return false; } if (!emailIsValid(emailAddress.value)) { alert("Please enter a valid email address."); emailAddress.focus(); return false; } return true; // Can submit the form data to the server } const emailIsValid = email => { return /^[^\[email protected]][email protected][^\[email protected]]+\.[^\[email protected]]+$/.test(email); } submitBtn.addEventListener('click', validate); 

Обмеження форми HTML5

Деякі з найбільш часто використовуваних HTML5 обмежень для є typeатрибутом (наприклад type="password"), maxlength, requiredі disabled.

Рідше вживаним обмеженням є patternатрибут, який приймає регулярний вираз JavaScript.

Більше інформації

  • Перевірка даних форми | MDN
  • Перевірка обмеження | MDN