Ako implementovať validáciu formulára na strane klienta pomocou JavaScriptu

Ako implementovať validáciu formulára na strane klienta pomocou JavaScriptu

JavaScript je jedným z najpopulárnejších a najuniverzálnejších programovacích jazykov, s ktorými môžete začať už dnes. O tomto programovacom jazyku sa oprávnene hovorí, že je jazykom webu a je zásadný pre pridanie interaktivity na vaše webové stránky.





Prvok formulára je jedným z najpoužívanejších prvkov HTML na webových stránkach. Tieto formuláre preberajú vstup od používateľa a spracovávajú ho v prehliadači alebo na serveri. Je však dôležité tieto vstupy validovať, aby sa vyriešili problémy s bezpečnosťou a nechcené chyby.



Pochopenie manipulácie s DOM

Predtým, ako pristúpime k implementácii validácie formulárov na strane klienta pomocou JavaScriptu, je nevyhnutné porozumieť objektovému modelu dokumentu, ktorý je bežne známy ako „DOM“. DOM je štandardizované API, ktoré umožňuje JavaScriptu interagovať s prvkami na webovej stránke HTML.





Zistite viac: Skrytý hrdina webových stránok: Pochopenie modelu DOM

Na pridávanie poslucháčov udalostí a získavanie vstupov používateľov budete musieť porozumieť základom manipulácie s DOM. Tu je príklad, ktorý vysvetľuje, ako môžete zmeniť obsah webovej stránky pomocou rozhrania DOM API a JavaScript:









Document





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

Vo vyššie uvedenom kóde je prípona

tag má id odstavec . Pri písaní kódu JavaScript máte prístup k tomuto prvku volaním document.getElementById ('odsek') metóda a manipulácia s jej hodnotou.

Teraz, keď ste pochopili základy manipulácie s DOM, pokračujme a implementujte validáciu formulárov.



Overenie formulára pomocou JavaScriptu

Od používateľa môžete prevziať rôzne typy vstupov. Typ textu, typ e -mailu, typ hesla, prepínače a začiarkavacie políčka sú niektoré z najbežnejších, s ktorými sa môžete stretnúť. Vzhľadom na túto drvivú väčšinu typov vstupov budete musieť na validáciu každého z nich použiť inú logiku.

Predtým, ako sa ponoríme do validácie, venujme chvíľu porozumeniu formám HTML a ich dôležitosti. Formuláre HTML sú jedným z hlavných spôsobov interakcie s webovou stránkou, pretože vám umožňujú zadávať údaje, používať zmeny, vyvolávať kontextové okná, odosielať informácie na server a podobne.



ako pripojiť ovládač xbox k systému mac

HTML prvok sa používa na vytváranie týchto formulárov orientovaných na používateľov. Vstupy do formulára HTML môžete overiť takto:

1. Overenie e -mailu

Bez ohľadu na to, či budujete autentifikačný systém alebo len zbierate e -maily používateľov pre svoj spravodaj, je dôležité, aby ste si e -mail overili, než ho budete môcť uložiť do databázy alebo spracovať. Ak chcete skontrolovať, či e -mail spĺňa všetky požadované podmienky, môžete použiť a regulárny výraz .

HTML:

JavaScript:

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. Overenie hesla

Heslá sú zásadným údajom, ktorý na zaistenie bezpečnosti vyžaduje špeciálny typ overenia. Zvážte registračný formulár, ktorý má dve polia: polia pre heslo a potvrdenie hesla. Na overenie platnosti tejto dvojice vstupov by ste mali zvážiť niekoľko vecí:

  • Heslo musí mať viac ako 6 znakov.
  • Hodnota hesla a poľa na potvrdenie hesla musia byť rovnaké.

HTML:


JavaScript:

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. Overenie rádiového vstupu

Rádiový vstup HTML je špeciálny typ grafického ovládacieho prvku, ktorý umožňuje používateľovi vybrať si iba jednu z vopred definovanej sady navzájom sa vylučujúcich možností. Bežným prípadom použitia tohto vstupu by bol výber pohlavia. Na overenie takéhoto zadania budete musieť skontrolovať, či je vybratý aspoň jeden z nich.

To sa dá dosiahnuť pomocou logické operátory ako napríklad AND ( && ) a nie ( ! ) operátor týmto spôsobom:

HTML:

Male

Female

Others

JavaScript:

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. Vyberte položku Overenie vstupu

The Element HTML sa používa na vytvorenie rozbaľovacieho zoznamu. The štítky vo vnútri element definujte dostupné možnosti v rozbaľovacom zozname. Každý z týchto značky majú priradený hodnotový atribút.

ako vypnúť polohu na snapchate

Pre predvolenú alebo počiatočnú možnosť môžete nastaviť jej hodnotu na prázdny reťazec, takže bude považovaná za neplatnú možnosť. Pre všetky ostatné možnosti nastavte príslušný atribút hodnoty. Tu je príklad toho, ako môžete overiť a vstupný prvok:

HTML:


Select One
Mr
Mrs
Ms

JavaScript:

dodáva sa ps5 s náhlavnou súpravou?
const title = document.getElementById('title');
if (title.value = '') {
alert('Please select a title');
}

5. Overenie začiarkavacieho políčka

Vstupné prvky začiarkavacieho políčka typu sú predvolene vykreslené ako políčka, ktoré sú po aktivácii začiarknuté alebo začiarknuté. Začiarkavacie políčko vám umožňuje vybrať jednotlivé hodnoty na odoslanie vo formulári. Začiarkavacie políčka sú obľúbenou voľbou pre zadanie textu „prijať zmluvné podmienky“.

Ak chcete zistiť, či je začiarkavacie políčko začiarknuté alebo nie, získate prístup k začiarknutému atribútu na vstupe začiarkavacieho políčka. Tu je príklad:

HTML:


I agree to the terms and conditions

JavaScript:

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

Prevencia je lepšia ako liečba

Vždy sa odporúča overiť všetky vstupy, ktoré dostanete od návštevníka, aby ste zaistili bezpečný a zaistený zážitok. Hackeri sa vždy pokúšajú zadať škodlivé údaje do vstupných polí, aby mohli vykonávať skriptovacie útoky medzi servermi a injekcie SQL.

Keď už chápete, ako overiť vstupy HTML, prečo to neskúsiť vytvorením formulára a implementáciou stratégií, ktoré ste videli vyššie?

zdieľam zdieľam Tweet E -mail Ako vytvoriť formulár v HTML

Umožnite svojim používateľom zadávať údaje na vašich webových stránkach pomocou formulárov HTML.

Čítajte ďalej Súvisiace témy
  • Programovanie
  • HTML
  • JavaScript
  • Vývoj webových aplikácií
  • Návody na kódovanie
O autorovi Nitin Ranganath(31 publikovaných článkov)

Nitin je vášnivý vývojár softvéru a študent počítačového inžinierstva vyvíjajúci webové aplikácie pomocou technológií JavaScript. Pracuje ako webový vývojár na voľnej nohe a vo voľnom čase rád píše pre Linux a programovanie.

Viac od Nitina Ranganatha

prihlásiť sa ku odberu noviniek

Pripojte sa k nášmu bulletinu a získajte technické tipy, recenzie, bezplatné elektronické knihy a exkluzívne ponuky!

Kliknutím sem sa prihlásite na odber