Valaki érvénytelen e-mail-címmel küldi be az űrlapodat. Az űrlapod elfogadja. Az üdvözlő e-mail visszapattan. Soha nem hall rólad. Valaki más hiányzó kötelező mezőkkel küld be. Az űrlap így is átmegy. A csapatodnak hiányos adata lesz. Mindkét hiba azért történik, mert a validálás hiányzik, vagy rossz.
A validálás annak ellenőrzése, hogy az űrlapadatok érvényesek-e, mielőtt elfogadnád őket. Két helyen történik: a böngészőben és a szerveren. Mindkettő számít. Ez a cikk bemutatja, hogyan működik a validálás, miért van szükséged mindkettőre, és melyek a gyakori hibák.
Mi a validálás?
A validálás ellenőrzi, hogy az űrlap adatai megfelelnek-e a követelményeidnek. A kötelező mezőknek van értékük. Az e-mail mezők tartalmaznak egy @ jelet. A telefon mezők csak számokat tartalmaznak. A fájlfeltöltések a méretkorlát alatt vannak.
Validálás nélkül rossz adat kerül a rendszeredbe. A háttérrendszered összeomlik. Az e-mail szolgáltatásod elutasítja az üzeneteket. Időt vesztegetsz a koszos adatok takarítására.
A validálás két helyen történik: kliensoldalon (a böngészőben, beküldés előtt) és szerveroldalon (a szervereden, beküldés után). Mindkettő szükséges.
Kliensoldali validálás
A böngésző ellenőrizheti az űrlapadatokat, mielőtt elküldi őket. A HTML-ben beépített validáló attribútumok vannak. A JavaScript is tud validálni.
HTML validálás
A <input type="email" required> ellenőrzi, hogy a mezőnek van-e értéke, és hogy e-mail-címnek néz-e ki. A böngésző hibaüzenetet mutat, ha a felhasználó érvénytelen űrlapot próbál beküldeni.
A HTML validáló attribútumai közé tartozik a required, amely biztosítja, hogy a mezőnek értéke legyen, a min/max a számokhoz, hogy az értékek a tartományon belül maradjanak, a minlength/maxlength a karakterszám előírásához, a pattern a reguláris kifejezésekhez való illesztéshez, és a type magának a mezőtípusnak az ellenőrzéséhez. Például a type="email" a formátumot ellenőrzi, míg a type="number" elutasítja a nem numerikus bevitelt.
A HTML validálás azonnal működik JavaScript nélkül, jó hibaüzeneteket ad a böngészőtől, és a mobil billentyűzetek a mezőtípushoz igazodnak. A hátrányok: a böngésző hibaüzenetei általánosak és néha nem egyértelműek, JavaScript nélkül nem tudod testre szabni őket, és a különböző böngészők különböző üzeneteket mutatnak.
JavaScript validálás
Nagyobb kontrollhoz validálj JavaScripttel a function validateEmail(email) { const regex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; return regex.test(email); } és a form.addEventListener('submit', (e) => { if (!validateEmail(input.value)) { e.preventDefault(); showError('Please enter a valid email'); } }); használatával. A JavaScript validálás lehetővé teszi egyéni szabályok írását, egyéni hibaüzenetek megjelenítését, és a mezők validálását gépelés közben, valós időben. A hátrányok: JavaScriptet igényel (biztonsághoz nem megbízható), több karbantartandó kódot igényel, és hibákat mutathat, mielőtt a felhasználó befejezné a gépelést, ha az input eseményre validálsz.
Szerveroldali validálás
Az űrlap beküldése után a szerver újra ellenőrzi az adatokat. Itt történik a valódi biztonság.
Soha ne bízz a kliensoldali validálásban. Valaki kikapcsolhatja a JavaScriptet. Valaki elfoghatja a kérést, és módosíthatja az adatokat. Valaki használhat curlt vagy más eszközt, hogy rossz adatot küldjön be anélkül, hogy egyáltalán az űrlapodon keresztül menne.
A szerveroldali validálás az egyetlen védelmed. Nem opcionális.
Amikor a szerver megkapja az űrlap beküldését, ellenőrizd, hogy a kötelező mezők jelen vannak-e, validáld az e-mail-formátumot, a telefonformátumot és az URL-eket, ellenőrizd, hogy a számok a várt tartományon belül vannak-e, győződj meg róla, hogy a fájlfeltöltések megfelelő típusúak és méretűek, biztosítsd, hogy az adat hossza nem túl nagy, és tisztítsd meg az adatokat az injekciós támadások megelőzésére. Ha a validálás sikertelen, küldj hibaválaszt, hogy az űrlapot ne dolgozzák fel, és a felhasználó megtudja, mi a gond. A szerveroldali validálás lassabb, mert a felhasználónak várnia kell a válaszra, de megbízható és biztonságos, ezért mindig csináld.
Mikor melyik validálást használd
A kliensoldali validálás a felhasználói élményért van. Azonnal megmondja a felhasználónak, ha valami nincs rendben. Nem kell beküldenie az űrlapot ahhoz, hogy megtudja, érvénytelen az e-mail-cím.
A szerveroldali validálás az adatintegritásért és a biztonságért van. Biztosítja, hogy rossz adat soha ne kerüljön a rendszeredbe.
Használd mindkettőt. A kliensoldali validálás a sebességért és a visszajelzésért. A szerveroldali validálás a védelemért és a biztonságért.
Gyakori validálási hibák
Csak kliensoldali validálás
Valaki kikapcsolja a JavaScriptet, és a validálásod eltűnik. Valaki curllal POST-ol rossz adatot, és a validálásod soha nem fut le. Szemét kerül az adatbázisodba.
Mindig validálj a szerveren. A kliensoldal csak extra.
Túl szigorú validálás
Az e-mail validálásod olyan szigorú, hogy valódi e-mail-címek is megbuknak. A telefonszám validálásod csak az amerikai formátumot fogadja el, és elutasítja a nemzetközi számokat. A név meződ elutasítja a kötőjeleket, aposztrófokat és más érvényes karaktereket.
Teszteld a validálásodat valódi adatokkal. Kérd meg más országokból származó felhasználókat, hogy teszteljék. Tedd a validálási szabályokat a lehető legengedékenyebbé, miközben még elkapják a rossz adatot.
Nem mutatsz egyértelmű hibaüzeneteket
"Érvénytelen bevitel." Mi érvénytelen? Melyik mező? Mit kell tenniük?
A hibaüzeneteknek konkrétnak kell lenniük: "Az e-mail-címnek 5 és 254 karakter között kell lennie." "A telefonszámnak 10 számjegyűnek kell lennie." "A jelszónak tartalmaznia kell legalább egy számot."
A hibát az azt okozó mező mellett mutasd. Ne rejtsd a hibákat egy összefoglaló listába, ahol a felhasználónak keresgélnie kell.
Érzékeny adatok validálása kliensoldalon
Ne küldj bankkártyaszámokat vagy jelszavakat kliensoldali validáláson keresztül. Ne jelenítsd meg őket a böngészőkonzolban. Ne naplózd őket.
Az érzékeny adatokat csak a szerveren validáld, HTTPS-en keresztül.
Nem validálod a fájlfeltöltéseket
Valaki feltölt egy 100 megabájtos fájlt. A szervered kifogy a tárhelyből. Valaki feltölt egy futtatható fájlt. A szervered vírust kap.
Validáld a fájl típusát és méretét a szerveren. Ellenőrizd, hogy a fájl valóban az a típus-e, aminek mondja magát. Ne bízz csak a fájlkiterjesztésben vagy a MIME-típusban.
Valós idejű validálás és beküldéskori validálás
A valós idejű validálás minden mezőt ellenőriz, ahogy a felhasználó gépel. A felhasználó azonnal hibaüzenetet lát, ha valami rosszat ír be. Rögtön kijavíthatja.
Hátrány: Ha túl korán mutatsz hibákat, a felhasználó frusztrált lesz. A hibákat csak azután mutasd, hogy a felhasználó elhagyta a mezőt (blur eseményre), nem amíg még gépel.
A beküldéskori validálás mindent az űrlap beküldésekor ellenőriz. A felhasználó kitölti az egész űrlapot, aztán egyszerre látja az összes hibát.
Hátrány: A felhasználónak vissza kell mennie, és ki kell javítania a hibákat, miután már beküldte. Ez megszakítja a folyamatot.
Legjobb gyakorlat: Validálj blur eseményre (amikor a felhasználó elhagy egy mezőt) a valós idejű visszajelzéshez. Validálj beküldéskor végső ellenőrzésként. Mutasd egyszerre az összes hibát, ha bármelyik sikertelen.
Validálás adott mezőtípusokhoz
E-mail validálás
A teljes e-mail validálás összetett (az RFC 5322 60 oldal), ezért a legtöbb esetben ellenőrizd, hogy az érték tartalmaz-e @ jelet és domaint a const email = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; használatával. Ez elkapja a legtöbb érvénytelen e-mailt anélkül, hogy olyan szigorú lenne, hogy valódi e-mailek is megbuknának.
Telefonszám validálás
A telefonszám formátuma országonként eltér. Az amerikai formátum (123) 456-7890, az egyesült királyságbeli +44 20 7946 0958, Németországban pedig +49 30 123456. Fogadd el a nemzetközi formátumot, a szerveren vágd le a nem numerikus karaktereket, és a telefonszámot szövegként tárold számként helyett, hogy egyes országokban megmaradjanak az elöl álló nullák.
Jelszó validálás
A jó jelszó hosszú (legalább 12 karakter) és nehezen kitalálható. Ne követelj meg különleges karaktereket vagy kis- és nagybetűk keverékét, mert ezek a szabályok frusztrálják a felhasználókat, és nem javítják a biztonságot. A jó jelszókövetelmények: legalább 12 karakter, és a gyakori minták (például "123456" vagy a felhasználó neve) elkerülése. Használj jelszóerősség-mérőt, hogy megmutasd a felhasználónak, mennyire erős a jelszava.
Dátum validálás
Ellenőrizd, hogy a dátum a jövőben vagy a múltban van-e, ahogy szükséges. Egy eseményregisztrációs űrlapnak el kell utasítania a múltbeli dátumokat. Egy születési dátum űrlapnak el kell utasítania a jövőbeli dátumokat.
Hogyan kezeli a WEMASY az űrlapvalidálást
A WEMASY űrlapjai beépített kliensoldali validálást tartalmaznak (kötelező mezők, e-mail-formátum stb.) az azonnali visszajelzéshez. Amikor az űrlapokat beküldik, a WEMASY szerverei minden adatot újra validálnak a feldolgozás előtt. Így a felhasználók gyors visszajelzést kapnak, és az adataid védve vannak.
Nézd meg a validálási funkciókat a WEMASY csomagodban.