12 B - Űrlapfeldolgozás -> email cím ellenőrzése javascripttel

Űrlap létrehozásakor, amikor e-mail címet kérünk be érdemes az <input type="email"> elem-et használni, hiszen ez is végez némi alapvető ellenőrzést a böngészőben, amikor az űrlapot elküldjük. Az alapvető ellenőrzés alatt azt értem, hogy azt vizsgálja, az email cím tartalmazza-e a @ karaktert, és utána van-e valamilyen domain név. Nem ellenőrzi azonban a domain végződés hosszát (mint pl. a .com vagy .org), sem a felhasználónév bonyolultságát. Tehát az olyan egyszerű címeket is elfogadhatja, mint például user@domain (bár a valóságban ez egy érvénytelen email cím lenne).

Ha az űrlapot próbálják elküldeni érvénytelen email cím formátummal, a böngésző automatikusan egy figyelmeztetést jelenít meg, általában egy felugró üzenet formájában (pl. "Kérjük, adjon meg egy érvényes email címet"). Ez a figyelmeztetés a böngésző nyelvének megfelelően jelenik meg, tehát automatikusan lokalizált üzeneteket kapunk.

Az olyan HTML5 attribútumok, mint a required, szintén működnek az email mezőknél. Ha hozzáadod ezt az attribútumot, akkor a böngésző nem engedi az űrlap beküldését, ha az email mező üres vagy nem megfelelő formátumú.

Az olyan attribútumok, mint a pattern és a maxlength, további ellenőrzéseket tesznek lehetővé, ha a beépített validáció nem elegendő.

Az <input type="email"> használata különösen hasznos mobil eszközökön, mivel sok mobilböngésző automatikusan egy olyan virtuális billentyűzetet jelenít meg, amely tartalmazza a @ és a pont karaktert, hogy megkönnyítse az email cím bevitelét.

Mit nem ellenőriz a böngésző:

• A böngésző nem ellenőrzi, hogy az email cím ténylegesen létezik-e, vagy hogy az adott domain valódi email szolgáltatást biztosít-e.
• A szabványos email címek egyéb speciális karaktereit sem feltétlenül ellenőrzi szigorúan, tehát például olyan címek, mint "user+test@domain.com", érvényesnek tekinthetők.

Miért hasznos a JavaScriptes ellenőrzés?

Bár a böngésző alapvető ellenőrzést végez, a JavaScriptes validációval pontosabb és testreszabottabb ellenőrzéseket végezhetsz, például:

• Korlátozhatod az email címeket bizonyos domainre (pl. csak .com végződések engedélyezése).
• Testreszabhatod a hibaüzeneteket, hogy jobban illeszkedjenek az oldal stílusához.
• Bonyolultabb mintákat is alkalmazhatsz, ha szükséges (pl. olyan speciális email címek, amelyeket a böngésző nem kezel jól).

Az <input type="email"> használata praktikus, mert alapvető validációt nyújt a böngésző szintjén, de ha összetettebb szabályokat szeretnél alkalmazni, akkor érdemes JavaScript alapú validációt is hozzáadni a pontosabb ellenőrzés érdekében, mint amit itt a példában láthatsz:

A let emailPattern = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,6}$/; sor egy reguláris kifejezés (regex), amelyet arra használunk, hogy egy email cím formátumát ellenőrizzük. Lássuk részletesen, mit jelent ez a kifejezés:

1. ^: A kifejezés elején lévő ^ karakter azt jelenti, hogy a minta az adott sor elejéről kezdődik (tehát nem lehet más karakter az elején).

2. [a-zA-Z0-9._-]+:

   • [a-zA-Z0-9._-]: Ez egy karakterkészlet, amely azt jelzi, hogy az email cím első része (a @ előtti rész) tartalmazhat kis- és nagybetűket (a-z és A-Z), számokat (0-9), valamint a pontot (.), aláhúzást (_), és kötőjelet (-).
   • +: A plusz jel azt jelenti, hogy az előző karakterkészletből legalább egy, de akár több karakter is szerepelhet, tehát az email címnek mindenképpen tartalmaznia kell legalább egy ilyen karaktert.

3. @: Ez a karakter az email cím kötelező része, amely elválasztja a felhasználónevét és a domain nevet (pl. user@example.com).

4. [a-zA-Z0-9.-]+:

   • [a-zA-Z0-9.-]: A domain név része a @ utáni rész. Tartalmazhat kis- és nagybetűket, számokat, pontot (.) és kötőjelet (-).
   • +: Ismét azt jelzi, hogy legalább egy karakternek szerepelnie kell a megadott karakterekből (a domain név részben).

5. \.: A \. egy speciális karaktert jelöl, itt konkrétan a pontot (.), mivel a reguláris kifejezésben a pont önmagában bármely karaktert jelölne. A \ jel használatával szó szerint a pontot keressük.

6. [a-zA-Z]{2,6}:

   • [a-zA-Z]: A domain végződése csak betűket tartalmazhat (kis- és nagybetűk is elfogadhatók).
   • {2,6}: Ez azt jelenti, hogy a betűk száma minimum 2, maximum 6 lehet, vagyis olyan végződéseket keresünk, mint .com, .hu, .net, .info, stb.

7. $: A dollárjel azt jelzi, hogy a minta a sor végére ér (nincs más karakter a végén).

Összefoglalva:

Ez a reguláris kifejezés egy email címet keres, amely megfelel a következő mintának:

• Tartalmaz kis- és nagybetűket, számokat, pontot, aláhúzást vagy kötőjelet a @ előtti részben.
• A @ után következik egy domain név, amely kis- és nagybetűket, számokat, pontot és kötőjelet tartalmazhat.
• A domain név egy pont után egy 2-6 karakter hosszú végződéssel (például .com vagy .hu) zárul.

Az így ellenőrzött email-t test() metódussal ellenőrizhetjük.

pl. : regex.test(string)

regex: Ez a reguláris kifejezés, amit létrehoztál (pl. /^[a-zA-Z]+$/).

string: Az a szöveg, amit meg akarsz vizsgálni, hogy megfelel-e a reguláris kifejezésnek.

Visszatérési érték:

A test() metódus egy logikai értékkel tér vissza:

• true: Ha a reguláris kifejezés illeszkedik a megadott sztringre.
• false: Ha a reguláris kifejezés nem illeszkedik a megadott sztringre.

Példa:

let emailPattern = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,6}$/; 

let email = "teszt@example.com"; 

  if (emailPattern.test(email)) { 

           console.log("Érvényes email cím."); 

    } else { 

          console.log("Érvénytelen email cím."); 

    }

Ebben a példában a test() metódus azt ellenőrzi, hogy a email változó értéke megfelel-e az emailPattern reguláris kifejezésnek.

Ha az email cím formátuma megfelelő, akkor a test() true-t ad vissza, és megjelenik a "Érvényes email cím." üzenet.

Ha az email cím nem felel meg a mintának, akkor false lesz az eredmény, és a "Érvénytelen email cím." üzenet jelenik meg.