Основна проверка на формуляра в 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. Както можете да си представите, изпращането на лоши данни към сървъра може да доведе до проблеми.

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

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

Този тип проверка всъщност разглежда стойностите във формуляра и проверява дали те са правилни.

Проверката на имейл адресите е изключително трудна - има огромен брой легитимни имейл адреси и хостове и е невъзможно да се познаят всички валидни комбинации от символи.

Въпреки това има няколко ключови фактора, които са често срещани във всички валидни имейл адреси:

  • Адресът трябва да съдържа един знак @ и поне една точка (.)
  • Символът @ не може да бъде първият знак в адреса
  • The. трябва да има поне един знак след символа @

Имайки предвид това, може би разработчиците използват регулярни изрази, за да определят дали имейл адресът е валиден или не. Ето функция, която Тайлър Макгинис препоръчва в своя блог:

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