Email cím ellenőrzése javascripttel

Sokszor előfordul egy weboldal esetén, hogy a felhasználóktól be kell kérni valamilyen elérhetőséget, jellemzően e-mail címet.  Ilyen esetekben meg kell bizonyosodni arról, hogy a megadott email elérhetőség megfelelő-e. Azt ugye elég nehéz megvizsgálni, hogy élő címet kaptunk,  de azt megnézhetjük, hogy a formátuma megfelelő-e. Azt is el kell döntenünk, hogy mikor kívánjuk ezt az ellenőrzést megejteni. Az egyik lehetőség, hogy addig nem engedjük elküldeni az űrlapot, ameddig meg nem bizonyosodtunk arról, hogy érvényes adatokat adtak meg. A másik lehetőség, hogy szerver oldalon dolgozzuk fel a beérkező adatokat. és persze megoldás lehet ajax-szal a kettő kombinációja is.

Én személy szerint minden esetben alkalmaznám a kliens oldali ellenőrzést, mert egyúttal azt is meg lehet nézni, hogy a kötelező adatokat megadta-e a kitöltő. Illetve kevesebb oldalletöltést eredményez.

Először állítsuk fel az ellenőrzés elveit. Azt szeretnénk vizsgálni, hogy az email címnek megfelelő formátuma van. De milyen a megfelelő formátum?
Nézzünk egy egyszerű címet:

felhasznalo@vallalat.hu

Az email cím három részre tagolható két karakter segítségével. Van, aki szerint elég két felé választani a @ mentén, de én jobban szeretem három felé. Nem is a tagolásra koncentrálnék, hanem a tagoló karakterek viszonyára. Azt tudjuk, hogy az érvényes formátumú email címben van pontosan egy “@” (kukac, at) és legalább egy “.” (pont). A kukac nem lehet az első karakter, mert különben nem lenne kinek küldeni. A szolgáltatók általában nem engedélyezik a háromnál rövidebb felhasználó neveket, de fizetett oldalaknál előfordul két karakteres név. Ez azt jelenti számunkra, hogy a kukacnak legalább a harmadik karakternek kell lennie.

A másik tagoló karakter a pont. Mivel egy címben több is lehet, ezért minket különösebben az érdekel, ami a cím végénél van. Ezért meg kell keresni a karakterlánc végétől az első pontot. Mivel most már megkaptuk a két elválasztó karakter pozícióját, ideje összehasonlítani őket. A pont pozíciójának nagyobbnak kell lennie, mint a kukac pozíciója, mivel hátrébb van. A két elválasztó karakter közé be kell férnie a domain névnek. Ez azt jelenti, hogy ha megengedjük az egy karakteres domain nevet, akkor a pont és a kukac közötti különbség 2.
Ideje kódba önteni az elképzelést:


<!--
function validateForm() {

var errors = '';

var emailcim   = document.forms['urlap'].elements['email'].value;

var emailValue = new String (emailcim);
var emailkukac = emailValue.lastIndexOf("@");
var emailpont  = emailValue.lastIndexOf(".");

// adatok ellenőrzése
if (emailcim == "" ) { //itt lehet ellenőrizni a kötelezően kitöltendő elemek meglétét
errors+= "Elküldés előtt add meg az összes adatot!\n";
} else {
// email cím ellenőrzése
if ((emailkukac == 0)||(emailkukac == -1)||(emailpont <= emailkukac)||((emailpont-emailkukac)<2)) {
errors+= "- Az e-mail cím formátuma nem megfelelő!\n";
}
}
// hibaüzenet
if (errors) {
alert ('Hoppá!\nVan egy kis gond a megadott adatokkal\n\n'+errors);
document.returnValue = (errors == '');
} else {document.forms['urlap'].submit();}
}
//-->

Persze sokan mondhatják, hogy minek ennyit vacakolni vele, hiszen reguláris kifejezéssel egy sorban le lehet ellenőrizni az egészet. Ez így igaz. Íme a kód:

/^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/

Reguláris kifejezéseket használva három részre tagolva elemezzük a bejövő mail címet.  Az első részben a felhasználó nevet ellenőrizzük:

/^[a-zA-Z0-9._-]+

A ^ jelentése, hogy a karakterlánc elejétől illesztjük a mintát a mail címre.  Ezután a szögletes zárójelben adjuk meg azt, hogy milyen karaktereket fogadunk el. Ez jelen esetben a kisbetű, nagybetű, szám, pont, alul vonás és kötőjel. Vagyis ilyen karakterekkel kell kezdődnie a címeknek.

A második részben a domain nevet ellenőrizzük:

@[a-zA-Z0-9.-]+

Ennek a résznek @ karakterrel kell kezdődnie, utána pedig lehet kisbetű, nagybetű, szám, pont és kötőjel. Látható, hogy az alul vonás itt már nem megengedett, hiszen a domain nevek nem tartalmazhatnak ilyen karaktert. Pontot pedig az aldomainek (aldomain.domain.hu) miatt engedjük meg.

A harmadik résznél a domain végződéseket ellenőrizzük:

\.[a-zA-Z]{2,4}$/

A magyarázatot kezdjük a végével. A $ karakter jelentése, hogy a vizsgált mintának a karakterlánc végén kell lenni. Ennek a résznek ponttal kell kezdődni (a \ karakter váltókarakterként funkcionál), és itt már csak a kisbetű és nagybetű megengedett. Van egy érdekes rész a szögletes zárójel után, ez pedig a kapcsos zárójel {}. Ebben a kapcsos zárójelben a karakter hosszára vonatkozó korlátozást adjuk meg. A mi esetünkben 2-4 karakter hosszúságot fogadunk el, mivel a domain végződések ilyen tartományban mozoghatnak (pl.: .hu, .com, .net, .info). Meg kell jegyezni, hogy ha igazán beindul a egyedi domain végződések regisztrálása, akkor természetesen a négy karakteres korlát már nem lesz használható.

Egy fontos dolgot meg kell említeni. Sokan nem szeretik a javaScriptet, de érdemes használni jelen esetben az adatok ellenőrzésére, mert  sok-sok oldalletöltést lehet vele megspórolni. Viszont fontos észben tartani, hogy a kliens oldali ellenőrzés nem helyettesíti a szerver oldali ellenőrzést! Főleg, ha figyelembe vesszük azt is, hogy a javaScript futtatását letilthatja a felhasználó, mert akkor ellenőrzés nélkül jutnak a szerverre az adatok.

Ha tetszett a bejegyzés, akkor kérlek nyomj egy “Tetszik”-et, és oszd meg ismerőseiddel!