JavaScript – kontrola správnosti e-mailové adresy 1.

Vážení čtenáři, před nějakým časem jsem popisoval, jak lze provést kontrolu formulářepřed odesláním. Tehdy jsem kontroloval, zda některá pole jsou vyplněna. Vmnoha případech je ovšem potřebná účinnější kontrola, jak jsem se přesvědčil ina základě dopisů od vás, čtenářů. Protože často píšete o návod, jakzkontrolovat platnost e-mailové adresy, věnuji tomuto tématu dnešníčlánek.

Před tím, než začneme cokoli vyrábět v JavaScriptu, je potřebné si ujasnit, co vlastně chceme zkontrolovat. Protože dnešní článek se týká kontroly e-mailové adresy, navrhneme nejprve, jak budeme správnost této adresy kontrolovat.

Protože se jedná o rozsáhlé téma, rozdělím tento článek do dvou, abych mohl dobře vysvětlit vše, co se při kontrole děje. Již po tomto článku získáte funkční kontrolu e-mailové adresy, která bude vylepšena v dalším článku.

Správná e-mailová adresa má tvar neco@nekde.stat, z čehož můžeme vyčíst několik základních rysů, které musí mít každá adresa, a které zkontrolujeme v tomto článku. Zkusím tyto rysy shrnout:

1. obsahuje přesně jeden znak @ (zavináč), správná adresa ho v sobě musí obsahovat, ale nesmí tam být dvakrát
2. v části před znakem @ musí být nějaký text
3. v části za znakem @ musí být nějaký text

A cílem tohoto článku bude zkontrolovat, zda předaná adresa splňuje všechny tyto rysy. Kontrola samozřejmě bude prováděna pomocí JavaScriptu. Napíšeme funkci, kterou pojmenujeme třeba zkontroluj_email, které předáme text z políčka formuláře, a ona zjistí, jestli je e-mailová adresa v pořádku (potom vrátí true, tedy ano), nebo ne (pak vrací false, tedy ne).

Pokud se pozorně podíváme na rysy správné e-mailové adresy, zjistíme, že je výhodné rozdělit adresu na dvě části, na část před znakem @, a část po tomto znaku. Samozřejmě je potřeba nejdříve zjistit, zda vůbec znak @ v adrese máme. Vše se dá provést celkem snadno pomocí tohoto kódu v JavaScriptu:

function zkontroluj_email(adresa) {     var pozice_zavinace = adresa.indexOf("@");     if (pozice_zavinace < 0)         return false;     var cast_pred_zavinacem = adresa.substring(0,pozice_zavinace);     var cast_po_zavinaci = adresa.substring(pozice_zavinace+1,adresa.length);     if (cast_po_zavinaci.indexOf("@") >= 0)         return false;     if (cast_pred_zavinacem.length <= 0)         return false;     if (cast_po_zavinaci.length <= 0)         return false;     // … případné další kontroly …     return true; }

A nyní, jak tato část pracuje. Princip je v tom, že zcela na konci této funkce je řádek "return true;". Funkce kontroluje postupně e-mailovou adresu, a pokud dojde až na konec k řádku "return true;", vše je správně, a zkontroluj_email vrátí hodnotu true. Pokud se někde uprostřed funkce ukáže, že adresa není správná, funkce skončí předčasně pomocí "return false;", je tedy vrácena hodnota false, která indikuje, že adresa není v pořádku.

Takže po pořádku. Hned v prvním řádku funkce používám konstrukci adresa.indexOf("@"). Každý textový řetězec, který se v JavaScriptu vyskytne, je zároveň JavaScriptem považován za objekt typu string. A pro tento objekt můžete používat některé metody pro práci s řetězci. JavaScript si jednotlivé znaky v každém řetězci očíslovává podle jejich pozice, tak zvaným indexem. První znak má index 0, druhý má index 1, třetí index 2 atd. Metoda indexOf("@") slouží pro nalezení pozice, kde se nalézá znak @. Samozřejmě, že metoda indexOf dokáže najít pozici čehokoli dalšího, ale v našem případě hledá znak @. Pokud se znak @ v řetězci nevyskytuje, vrátí metoda záporné číslo. Pokud je znak přítomen, vrátí se jeho index. Pokud je znak v řetězci vícekrát, vrátí se index prvního znaku, na který se narazí při procházení od začátku řetězce.

Protože používáme zápis adresa.indexOf("@"), hledáme znak @ (slangově zavináč) v předané e-mailové adrese. Výsledný index, který představuje pozici znaku @ uložíme do proměnné pozice_zavinace. Na dalším řádku testuji, zda vůbec v e-mailové adrese nějaký takový znak existuje. Pokud ne, adresa není v pořádku, a pomocí "return false;" funkci předčasně ukončíme.

Pokud znak @ v adrese existuje, potom si adresu rozdělíme na dvě části, na část před a na část za znakem @. Obě části si uložíme pro pozdější potřebu do proměnných cast_pred_zavinacem a cast_po_zavinaci. Rozdělení na části provádím pomocí zápisu adresa.substring, která vytváří nový řetězec jako nějakou část adresy. Metoda substring očekává za závorkou dvě čísla, a to za prvé index, kterým má část začínat, a za druhé index, před kterým má část končit.

Protože se to začíná pěkně zamotávat, zkusme si toto vše, co bylo do této chvíle vyzkoušet na nějaké konkrétní adrese. Mějme třeba adresu "redakce@interval.cz". Nejdříve jsme hledali pozici znaku @ pomocí adresa.indexOf("@"). Protože je tento znak na osmém místě, metoda indexOf vrátí jeho index, který je 7 (o jedna méně, protože JavaScript pořadí znaků čísluje od nuly). Dále používáme dvakrát metodu substring na rozdělení na část před a za znakem @. Nejdříve používáme zápis "adresa.substring(0, pozice_zavinace)". Protože pozice_zavinace je 7, vše se provede jako adresa.substring(0,7). To znamená, že metoda substring vytvoří nový řetězec, který začíná znakem s indexem 0 (prvním znakem) a končí těsně před znakem s indexem 7 (před osmým znakem). Výsledkem bude řetězec "redakce". Tak jsme získali část před znakem @, která je potom uložena do proměnné cast_pred_zavinacem.

Jako další krok je použit zápis adresa.substring(pozice_zavinace+1, adresa.length). Protože adresa.length je zápis, který vrací délku řetězce s adresou, dosadí se místo ní číslo 19 (adresa redakce@interval.cz je dlouhá 19 znaků). Hodnota proměnné pozice_zavinace je 7, jak vyplývá z předchozího odstavce. Celé se to tedy provede jako adresa.substring(8,19). Tedy vytvoří se nový řetězec, který začne znakem s indexem 8 (devátým znakem) a končí těsně před znakem s indexem 19, tedy poslední zahrnutý znak bude ten s indexem 18 (devatenáctý znak). Tím získáme řetězec "interval.cz", který uložíme do proměnné cast_po_zavinaci.

Půjdeme dále. Nyní je jisté, že v adrese je alespoň jeden znak @. Ale není jasné, zda jich tam není více, což by byla chyba. Protože jsme rozdělili adresu na dvě části podle prvního výskytu znaku @, je jasné, že v části před se už tento znak vyskytovat nemůže. Pokud by v adrese bylo více znaků @, potom se druhý a další objeví v části po zavináči. Proto jako další krok vyzkoušíme, zda metoda cast_po_zavinaci.indexOf("@") najde znak @ v této druhé části. Pokud by ho metoda našla, potom je jasné, že našla druhý zavináč, a to je chyba. Proto testujeme, jestli vrátí index 0 a více, který indikuje, že znak byl nalezen. Používáme tedy zápis "if (cast_po_zavinaci.indexOf("@") >= 0)". V případě nalezení druhého znaku @ provedeme předčasné ukončení pomocí zápisu "return false;".

Zbylé čtyři řádky testují pomocí vlastnosti length, která vrací délku řetězce, zda obě části obsahují nějaké znaky. Adresa, která před, a nebo za znakem @ nemá žádný text, je chybná, což právě kontrolují zmíněné čtyři řádky.

Kontrola, zda některá z obou dvou částí obsahuje alespoň jeden znak je provedena tak, že voláme cast_pred_zavinacem.length, a potom cast_po_zavinaci.length. Očekáváme-li, že obě části obsahují aspoň jeden znak, znamená to, že oba zápisy nám musí dát číslo aspoň 1, protože vlastnost length říká, kolik znaků je v řetězci přítomno.

Nyní tedy máme funkci pro kontrolu správnosti e-mailové adresy. Dále uvádím příklad HTML stránky, ve které je tato kontrola použita:

<html> <head> <script type="text/javascript" language="JavaScript"><!– function zkontroluj_email(adresa) {     var pozice_zavinace = adresa.indexOf("@");     if (pozice_zavinace < 0)         return false;     var cast_pred_zavinacem = adresa.substring(0,pozice_zavinace);     var cast_po_zavinaci = adresa.substring(pozice_zavinace+1,adresa.length);     if (cast_po_zavinaci.indexOf("@") >= 0)         return false;     if (cast_pred_zavinacem.length <= 0)         return false;     if (cast_po_zavinaci.length <= 0)         return false;     return true; } function kontrola_formulare() {     var email_ok = zkontroluj_email(self.document.forms.f.email.value);     if (!email_ok)         alert("E-mailová adresa není v pořádku");     return email_ok; } // –> </script> </head> <body> <form name="f" action="http://prijemce.domena.cz/" onSubmit="return kontrola_formulare();"> Zadejte e-mail: <input type="text" name="email" value=""> <input type="submit" value="Odeslat"> </form> </body> </html>

A funkci si můžete vyzkoušet tady:

Zadejte e-mail:

A to je pro dnešní den vše.

Starší komentáře ke článku

Pokud máte zájem o starší komentáře k tomuto článku, naleznete je zde.