Основна провера образаца у ЈаваСцрипт-у

У прошлости би се валидација обрасца дешавала на серверу, након што је особа већ унела све своје податке и притиснула дугме за слање.

Ако су информације биле нетачне или су недостајале, сервер би морао да пошаље све натраг са поруком у којој поручује особи да исправи образац пре него што га поново пошаље.

Ово је био дуготрајан процес и ставио би велики терет на сервер.

Ових дана ЈаваСцрипт нуди бројне начине за потврду података обрасца директно у прегледачу пре него што их пошаље на сервер.

Ево ХТМЛ кода који ћемо користити у следећим примерима:

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

Основна валидација

Ова врста провере ваљаности укључује проверу свих обавезних поља и осигурање да су правилно попуњена.

Ево основног примера функције validateкоја приказује упозорење ако су уноси за корисничко име и адресу е-поште празни, у супротном враћа труе:

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функција и даље враћати вредност труе. Као што можете да замислите, слање лоших података на сервер може довести до проблема.

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

Провера формата података

Ова врста провере заправо прегледа вредности у обрасцу и проверава да ли су тачне.

Валидација адреса е-поште је ноторно тешка - постоји огроман број легитимних адреса е-поште и хостова и немогуће је погодити све важеће комбинације знакова.

Међутим, постоји неколико кључних фактора који су заједнички за све важеће адресе е-поште:

  • Адреса мора да садржи један знак @ и најмање један знак тачке (.)
  • Знак @ не може бити први знак у адреси
  • Тхе. мора доћи најмање један знак иза знака @

Имајући ово на уму, можда програмери користе регуларни израз за утврђивање да ли је адреса е-поште важећа или не. Ево функције коју Тилер МцГиннис препоручује на свом блогу:

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); 

Ограничења ХТМЛ5 обрасца

Неки од најчешће коришћених ХТМЛ5 ограничења за су typeатрибут (нпр type="password"), maxlength, requiredи disabled.

Мање често кориштено ограничење је patternатрибут који узима ЈаваСцрипт регуларни израз.

Више информација

  • Провера података образаца | МДН
  • Провера ограничења | МДН