Jak implementovat ověření formuláře na straně klienta pomocí JavaScriptu

Jak implementovat ověření formuláře na straně klienta pomocí JavaScriptu

JavaScript je jedním z nejpopulárnějších a nejvšestrannějších programovacích jazyků, se kterými můžete začít již dnes. O tomto programovacím jazyce se právem říká, že je jazykem webu a je nezbytný pro přidání interaktivity na vaše webové stránky.





Prvek formuláře je jedním z nejpoužívanějších prvků HTML na webových stránkách. Tyto formuláře přijímají vstup od uživatele a zpracovávají jej v prohlížeči nebo na serveru. Je však důležité tyto vstupy ověřit, aby se vyřešily problémy se zabezpečením a nechtěné chyby.



Pochopení manipulace s DOM

Než přistoupíme k implementaci ověřování formulářů na straně klienta pomocí JavaScriptu, je důležité porozumět objektovému modelu dokumentu, běžně známému jako „DOM“. DOM je standardizované API, které umožňuje JavaScriptu komunikovat s prvky na webové stránce HTML.





Další informace: The Hidden Hero of Websites: Understanding the DOM

Pro přidávání posluchačů událostí a načítání vstupů uživatelů budete muset porozumět základům manipulace s DOM. Zde je příklad, který vysvětluje, jak můžete změnit obsah webové stránky pomocí rozhraní DOM API a JavaScript:









Document





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

Ve výše uvedeném kódu

tag má id odstavec . Při psaní kódu JavaScript máte k tomuto prvku přístup voláním document.getElementById ('odstavec') metoda a manipulace s její hodnotou.

Nyní, když jste porozuměli základům manipulace s DOM, pojďme do toho a implementujte ověřování formulářů.



Ověření formuláře pomocí JavaScriptu

Existují různé typy vstupů, které můžete od uživatele převzít. Typ textu, typ e -mailu, typ hesla, přepínače a zaškrtávací políčka jsou jedny z nejběžnějších, se kterými se můžete setkat. Vzhledem k této drtivé většině typů vstupů budete muset k ověření každého z nich použít jinou logiku.

Než se ponoříme do ověřování, věnujme chvíli porozumění formám HTML a jejich důležitosti. Formuláře HTML jsou jedním z hlavních způsobů interakce s webem, protože vám umožňují zadávat data, používat změny, vyvolávat vyskakovací okna, odesílat informace na server a další.



proč můj telefon stále říká, že toto příslušenství nemusí být podporováno

HTML prvek se používá k vytvoření těchto formulářů orientovaných na uživatele. Vstupy formuláře HTML můžete ověřit takto:

1. Ověření e -mailu

Ať už budujete ověřovací systém nebo jen sbíráte e -maily uživatelů pro svůj zpravodaj, je důležité e -mail ověřit, než jej můžete uložit do databáze nebo zpracovat. Chcete -li zkontrolovat, zda e -mail splňuje všechny požadované podmínky, můžete použít a regulární 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. Ověření hesla

Hesla jsou zásadním údajem, který vyžaduje speciální typ ověření, aby byla zajištěna jeho bezpečnost. Zvažte registrační formulář se dvěma poli: heslo a pole pro potvrzení hesla. Chcete -li ověřit tyto dvojice vstupů, musíte zvážit následující věci:

  • Heslo musí mít více než 6 znaků.
  • Hodnota hesla a pole pro potvrzení hesla musí být stejné.

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. Ověření rádiového vstupu

Rádiový vstup HTML je speciální typ grafického ovládacího prvku, který uživateli umožňuje vybrat si pouze jednu z předdefinované sady vzájemně se vylučujících možností. Běžným případem použití takového vstupu by byl výběr pohlaví. K ověření takového zadání budete muset zkontrolovat, zda je vybrán alespoň jeden z nich.

Toho lze dosáhnout pomocí logické operátory jako je AND ( && ) a NE ( ! ) provozovatel tímto způsobem:

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 Ověření vstupu

The Prvek HTML se používá k vytvoření rozevíracího seznamu. The značky uvnitř element definovat dostupné možnosti v rozevíracím seznamu. Každý z těchto ke značkám je přiřazen atribut hodnoty.

kolik vyměnit baterii MacBook Air

U výchozí nebo počáteční možnosti můžete nastavit její hodnotu na prázdný řetězec, takže bude považována za neplatnou možnost. U všech ostatních možností nastavte příslušný atribut hodnoty. Zde je příklad, jak můžete ověřit a vstupní prvek:

HTML:


Select One
Mr
Mrs
Ms

JavaScript:

můžete si stáhnout epizody na hulu
const title = document.getElementById('title');
if (title.value = '') {
alert('Please select a title');
}

5. Ověření zaškrtávacího políčka

Vstupní prvky zaškrtávacího políčka typu jsou ve výchozím nastavení vykresleny jako políčka, která jsou zaškrtnuta nebo zaškrtnuta při aktivaci. Zaškrtávací políčko umožňuje vybrat jednotlivé hodnoty pro odeslání ve formuláři. Zaškrtávací políčka jsou oblíbenou volbou pro zadání „přijmout podmínky“.

Chcete -li zjistit, zda je zaškrtávací políčko zaškrtnuto nebo ne, můžete přistupovat k zaškrtnutému atributu na vstupu zaškrtávacího políčka. Zde je pří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.');
}

Prevence je lepší než léčba

Vždy se doporučuje ověřit všechny vstupy, které obdržíte od návštěvníka, abyste měli jistotu. Hackeři se vždy pokoušejí zadat škodlivá data do vstupních polí, aby mohli provádět skriptovací útoky napříč weby a injekce SQL.

Když už chápete, jak ověřit vstupy HTML, proč to nezkusit vytvořením formuláře a implementací strategií, které jste viděli výše?

Podíl Podíl tweet E-mailem Jak vytvořit formulář v HTML

Umožněte svým uživatelům zadávat data na vaše webové stránky pomocí formulářů HTML.

Číst dále Související témata
  • Programování
  • HTML
  • JavaScript
  • Vývoj webu
  • Návody na kódování
O autorovi Nitin Ranganath(31 článků zveřejněno)

Nitin je vášnivý vývojář softwaru a student počítačového inženýrství vyvíjející webové aplikace pomocí technologií JavaScript. Pracuje jako webový vývojář na volné noze a ve svém volném čase rád píše pro Linux a programování.

Více od Nitin Ranganath

Přihlaste se k odběru našeho zpravodaje

Připojte se k našemu zpravodaji a získejte technické tipy, recenze, bezplatné elektronické knihy a exkluzivní nabídky!

Kliknutím sem se přihlásíte k odběru