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

Vážení čtenáři, minule jsem popisoval, jak je možné provést kontrolu správnosti vyplnění e-mailové adresy. Protože jsem slíbil, že tuto kontrolu ještě vylepším, činím tak v tomto článku.

V zásadě jde o to, že v předchozím článku se zvolila příliš slabá kontrola e-mailové adresy. Použilo se příliš málo pravidel pro kontrolu, a tak sice většina nesprávností je odchycena, ale stále to ještě není ono. Nyní tedy kontrolu zdokonalím a rozšířím.

Připomenu tedy, jaká pravidla byla použita pro kontrolu správnosti e-mailové adresy:

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

Dnes přidáme kontrolu ještě podle některých dalších pravidel:

4. v části za znakem @ musí být alespoň jedna tečka, protože adresy končí na @neco.cz, nebo @neco.com, apod.. Je tedy vidět, že za znakem @ musí být alespoň jedna tečka.
5. v každé z obou částí musí být tečka uprostřed textu, není tedy přípustné například .mirek@neco.cz. Prostě žádná tečka nesmí být na začátku, ani na konci ani části před @, ani části za @. Pro jistotu píšu, že před znakem @ nemusí být tečka žádná, ale pokud je, musí být uprostřed textu.
6. za poslední tečkou v adrese musí být dvě, nebo tři písmena, které znamenají zkratku státu (cz, com, org, de, apod.).
7. nikde nemohou existovat dvě tečky vedle sebe

Jak vidíte, s těmito sedmi pravidly už je kontrola mnohem důkladnější. Zde bych vás, čtenáře Intervalu, vyzval, pokud máte nápad na další pravidla, která by pro správnou e-mailovou adresu měla platit, napište nám.

Takže se vrhněme do boje. Je potřeba napsat funkci v JavaScriptu, která zkontroluje platnost adresy podle všech sedmi pravidel. Provedu to jako rozšíření funkce zkontroluj_email z předchozího dílu:

function zkontroluj_email(adresa) { // zjištění pozice znaku @     var pozice_zavinace = adresa.indexOf("@"); // kontrola pravidla 1, je aspoň jeden @ v adrese?     if (pozice_zavinace < 0)         return false; // získání částí před a po znaku @     var cast_pred_zavinacem = adresa.substring(0,pozice_zavinace);     var cast_po_zavinaci = adresa.substring(pozice_zavinace+1,adresa.length); // kontrola pravidla 1, zda tam není ještě další @     if (cast_po_zavinaci.indexOf("@") >= 0)         return false; // kontrola pravidla 2     if (cast_pred_zavinacem.length <= 0)         return false; // kontrola pravidla 3     if (cast_po_zavinaci.length <= 0)         return false; // zjištění pozice poslední tečky     var pozice_posledni_tecky = cast_po_zavinaci.lastIndexOf("."); // kontrola pravidla 4     if (pozice_posledni_tecky < 0)         return false; // kolik znaků je ještě za poslední tečkou?     var pocet_znaku_za_posledni_teckou = cast_po_zavinaci.length – pozice_posledni_tecky – 1; // kontrola pravidla 6     if (pocet_znaku_za_posledni_teckou < 2  ||  pocet_znaku_za_posledni_teckou > 3)         return false; // kontrola pravidla 7     var pozice_dvou_tecek_vedle_sebe = adresa.indexOf(„..“);     if (pozice_dvou_tecek_vedle_sebe >= 0)         return false; // kontrola pravidla 5 u části před @     if (cast_pred_zavinacem.charAt(0) == „.“  ||  cast_pred_zavinacem.charAt(cast_pred_zavinacem.length-1) == „.“)         return false; // kontrola pravidla 5 u části po @     if (cast_po_zavinaci.charAt(0) == „.“  ||  cast_po_zavinaci.charAt(cast_po_zavinaci.length-1) == „.“)         return false; // pokud jsme se dostali až sem, vše je O.K.     return true; }

Protože je funkce rozsáhlejší, vsunul jsem do ní modrým písmem komentáře, aby jste jí mohli snadněji projít. Vyzkoušet si její činnost můžete zde:

E-mail odesílatele:
E-mail adresáta:

Protože jste mi vy, čtenáři Intervalu často psali, že chcete také příklady na kontrolu více adres najednou, je tato stránka psána jako kontrola dvou e-mailových adres.

A teď, jak to celé pracuje. Něco jsem už vysvětlil v minulém díle, a teď bych měl vysvětlit zbytek. Celá funkce zkontroluj_email je založena na různých metodách práce s textovými řetězci, které JavaScript nabízí. Neuškodí, pokud je zde shrnu.

text.indexOf("co hledat") – metoda indexOf se snaží najít první výskyt kusu textu, který je v závorkách. Například pokud je v proměnné s názvem mujtext uloženo "jak se máš", potom zápis mujtext.indexOf("se") vrátí číslo 4, protože našel "se" na pozici s indexem 4 (tedy od pátého znaku v "jak se máš", první znak má index 0, druhý index 1, atd.). Pokud dáme hledat něco, co se v textu nevyskytuje, potom metoda vrátí číslo -1, aby nám to dala najevo.

text.lastIndexOf("co hledat") – totéž, jako metoda indexOf, ale na rozdíl od ní hledá poslední výskyt kusu textu. Pokud tedy třeba v "ahoj a nazdar" hledáme text "a", potom metoda indexOf vrátí číslo 0 (protože a našel hned v prvním znaku), zatímco metoda lastIndexOf vrátí číslo 11 (protože poslední a je v pořadí 12. znak).

text.charAt(index) – metoda charAt vrací text, který obsahuje jeden jediný znak. A to znak, který je na pozici se zadaným indexem. Pokud mám třeba v proměnné x text "nazdar", potom x.charAt(3) vrátí text "d", tedy znak s indexem 3 (čtvrtý znak).

text.length – vlastnost length nám říká, kolik znaků obsahuje text. Nic více, a nic méně. Takže třeba v případě textu "internet" vrátí vlastnost length číslo 8.

text.substring(index_od,index_do – poslední, a zároveň nejsložitější metoda substring vezme text a vyřízne z textu nějakou část, kterou vrátí. V závorce jsou dvě čísla, která určují pozici začátku a konce výsledného textu. Nejlépe je to vidět na příkladě. Třeba v proměnné x bude text "víla Amálka". Zápis x.substring(5,11) vrátí "Amálka", protože vezme část, která začíná šestým znakem (znakem s indexem 5) a končí těsně před dvanáctým znakem (znakem s indexem 11).

Pomocí těchto metod provádím veškeré kontroly správnosti e-mailové adresy. Nepotřebuji k tomu nic více, jenom je vhodně složit do sebe. Protože jsem začátek funkce zkontroluj_email vysvětlil v minulém dílu, začnu vysvětlování od části nedepsané zjištění pozice poslední tečky.

Pozici poslední tečky zjišťuji pomocí metody lastIndexOf("."). Tento zápis mi vrátí pozici poslední tečky jako jeho index. Pokud část po znaku @ žádnou tečku neobsahuje, potom metoda lastIndexOf vrátí číslo -1. To se zjišťuje o kousek níž v kódu nadepsaném jako kontrola pravidla 4. Tam testuji, jestli metoda lastIndexOf vrátila číslo menší, než nula, a pokud ano, tak příkazem return false končím s tím, že adresa není v pořádku.

Dále si zjistím, kolik znaků je ještě za poslední tečkou. To lze zjistit tak, že od celé délky textu (délku textu zjišťuji pomocí vlastnosti length) odečtu pozici poslední tečky. Teď mám počet znaků od poslední tečky až do konce, a proto odečtu jeden znak, abych nezapočítával tu tečku. O kousek níž, v sekci, která je nadepsána kontrola pravidla 6 testuji, zda počet znaků za poslední tečkou je 2, nebo 3. K tomu používám příkaz if, kde používám speciální operaci ||, která znamená nebo. Tento příkaz if přeložený do češtiny lze okomentovat takto: "Jestliže počet znaků za poslední tečkou je menší, než 2, nebo je počet znaků za poslední tečkou větší, než 3, potom skonči s chybou."

Dále už se to skoro opakuje. Teď hledám dvojici teček v adrese pomocí indexOf(".."). Pokud jí najdu, tak je porušeno pravidlo číslo 7, takže skončím s chybou.

Dále následuje kontrola pravidla 5, kdy kontroluji první a poslední znak každé části, tedy části před znakem @, a části za znakem @. První znak snadno získám jako znak s indexem 0 pomocí charAt(0). Pokud chci poslední znak, potom musím nejdříve zjistit jeho pozici. Takže na to jdu trochu oklikou. Nejdříve přečtu délku textu pomocí metody length. Poslední znak má index o jednu nižší, než je celá délka, takže poslední znak zjistím jako charAt(text.length-1).

Když už vím, jak zjistit první a poslední znak, potom jej stačí zkontrolovat, zda se nerovná znaku tečka.

A pokud projde vše až na konec funkce, e-mailová adresa je v pořádku.

Pokud jste došli až sem, děkuji vám za pozornost, dnešní lekce JavaScriptu byla trochu náročnější. 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.