Како имплементирати проверу образаца на страни клијента помоћу ЈаваСцрипт-а

Како имплементирати проверу образаца на страни клијента помоћу ЈаваСцрипт-а

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





Елемент обрасца је један од најчешће коришћених ХТМЛ елемената на веб локацијама. Ови обрасци преузимају унос од корисника и обрађују га у прегледачу или серверу. Међутим, важно је потврдити ове уносе ради рјешавања сигурносних проблема и нежељених грешака.



Разумевање ДОМ манипулације

Пре него што наставимо са применом провере ваљаности обрасца на страни клијента помоћу ЈаваСцрипт-а, неопходно је разумети објектни модел документа, опште познат као 'ДОМ'. ДОМ је стандардизовани АПИ који омогућава ЈаваСцрипт -у интеракцију са елементима на ХТМЛ веб страници.





Сазнајте више: Скривени херој веб локација: Разумевање ДОМ -а

За додавање слушалаца догађаја и преузимање корисничких уноса, мораћете да разумете основе манипулације ДОМ -ом. Ево примера који објашњава како можете променити садржај веб странице користећи ДОМ АПИ и ЈаваСцрипт:









Document





const paragraph = document.getElementById('parapgraph');
paragraph.innerText = 'This is a paragraph tag';

У горњем коду,

ознака има ид став . Док пишете ЈаваСцрипт код, овом елементу можете приступити позивом на доцумент.гетЕлементБиИд ('одломак') методом и манипулисањем његовом вредношћу.

Сада када сте разумели основе ДОМ манипулације, идемо даље и применимо валидацију обрасца.



Валидација образаца помоћу ЈаваСцрипт -а

Постоје различите врсте уноса које можете узети од корисника. Тип текста, тип е -поште, врста лозинке, дугмад за избор и поља за потврду су неки од најчешћих на које можете наићи. Због ове велике већине типова уноса, морат ћете користити различиту логику за провјеру сваког од њих.

Пре него што се упустимо у валидацију, хајде да мало разумемо ХТМЛ облике и њихову важност. ХТМЛ обрасци су један од примарних начина интеракције са веб локацијом јер вам омогућавају да унесете своје податке, примените промене, позовете искачуће прозоре, пошаљете информације серверу и још много тога.



ствари које треба направити са малином пи

ХТМЛ елемент се користи за креирање ових образаца за кориснике. Ево како можете потврдити уносе ХТМЛ обрасца:

1. Валидација е -поште

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

ХТМЛ:

ЈаваСцрипт:

const emailInput = document.getElementById('email');
const emailRegex = /^[a-zA-Z0-9.!#$%&'*+/=?^_`~-]+@[a-zA-Z0-9-]+(?:.[a-zA-Z0-9-]+)*$/;
if (!emailInput.value.match(emailRegex)) {
alert('Invalid email address.');
}

2. Потврда лозинке

Лозинке су кључни податак којем је потребна посебна врста потврде како би се осигурала његова сигурност. Образац за пријаву има два поља: лозинку и поља за потврду лозинке. Да бисте потврдили ова два улаза, ево неколико ствари које морате узети у обзир:

  • Лозинка мора имати више од 6 знакова.
  • Вредност лозинке и поље за потврду лозинке морају бити исте.

ХТМЛ:


ЈаваСцрипт:

const password = document.getElementById('password').value;
const confirmPassword = document.getElementById('confirm-password').value;
if (password.value !== confirmPassword.value) {
alert('Entered passwords do not match');
}
if (password.length <6) {
alert('Password must be more than 6 characters long')
}

3. Валидација радио улаза

ХТМЛ радио улаз је посебна врста графичког контролног елемента који омогућава кориснику да изабере само једну од унапред дефинисаних скупа међусобно искључивих опција. Уобичајена употреба таквог уноса била би за избор пола. Да бисте потврдили такав унос, мораћете да проверите да ли је барем један од њих изабран.

То се може постићи коришћењем логички оператори као што је АНД ( && ) и не ( ! ) оператор на овај начин:

ХТМЛ:

Male

Female

Others

ЈаваСцрипт:

const genders = document.getElementsByName('gender');
const validForm = false;
let i = 0;
while (!validForm && i if (radios[i].checked) validForm = true;
i++;
}
if (!validForm) alert('Must check some option!');

4. Изаберите Провера уноса

Тхе ХТМЛ елемент се користи за креирање падајуће листе. Тхе ознаке унутар елемент дефинишу доступне опције на падајућој листи. Сваки од ових ознаке имају атрибут вредности повезан са њима.

како да направите резервну копију обележивача у Цхроме -у

За подразумевану или почетну опцију, можете поставити њену вредност као празан низ тако да ће се сматрати неважећом опцијом. За све остале опције поставите одговарајући атрибут вредности. Ево примера како можете да потврдите а улазни елемент:

ХТМЛ:


Select One
Mr
Mrs
Ms

ЈаваСцрипт:

леви тастер миша не ради виндовс 10
const title = document.getElementById('title');
if (title.value = '') {
alert('Please select a title');
}

5. Потврда поља за потврду

Улазни елементи поља за потврду типа подразумевано се приказују као поља која су означена или означена када су активирана. Поље за потврду вам омогућава да изаберете појединачне вредности за подношење у обрасцу. Поља за потврду су популаран избор за унос „прихвати услове и одредбе“.

Да бисте сазнали да ли је поље за потврду означено или не, можете приступити означеном атрибуту на улазу у поље за потврду. Ево примера:

ХТМЛ:


I agree to the terms and conditions

ЈаваСцрипт:

const terms = document.getElementById('terms');
if (!terms.checked) {
alert('Please agree to the terms and conditions to proceed further.');
}

Боље спречити него лечити

Увек се препоручује да потврдите све уносе које примите од посетилаца како бисте обезбедили сигурно и заштићено искуство. Хакери увек покушавају да унесу злонамерне податке у поља за унос ради извођења напада на скриптирање на различитим локацијама и убризгавања СКЛ-а.

Сада када разумете како да потврдите своје ХТМЛ уносе, зашто не бисте покушали изградњом обрасца и применом стратегија које сте видели горе?

Објави Објави Твеет Емаил Како створити образац у ХТМЛ -у

Дозволите својим корисницима да уносе податке на ваше веб локације помоћу ХТМЛ образаца.

Прочитајте следеће Повезане теме
  • Програмирање
  • ХТМЛ
  • ЈаваСцрипт
  • Веб Девелопмент
  • Кодирање Туториали
О аутору Нитин Ранганатх(Објављен 31 чланак)

Нитин је страствени програмер софтвера и студент рачунарског инжењеринга који развија веб апликације користећи ЈаваСцрипт технологије. Ради као слободни веб програмер и воли да пише за Линук и програмирање у слободно време.

Још од Нитин Ранганатх

Претплатите се на наш билтен

Придружите се нашем билтену за техничке савете, критике, бесплатне е -књиге и ексклузивне понуде!

Кликните овде да бисте се претплатили