Weboldalkészítő suli #21 - Szigorúan ellenőrzött űrlap-adatok

Minden olyan űrlap esetében, amelyben a felhasználóktól fontos adatokat várunk, feltétlenül meg kell oldanunk ezek meglétének ellenőrzését, sőt, ha lehetséges, akkor az elküldött adatok szintaktikai és szemantikai vizsgálatát is. Ráadásul akkor lehetünk csak igazán elégedettek munkánkkal, ha az ellenőrzést kliens- és szerveroldalon egyaránt elvégezzük. A kliensoldali vizsgálattal egyrészt sokkal gyorsabban felhívhatjuk a felhasználók figyelmét az elkövetett hibára (ami ráadásul lehet vétlen hiba is, például Enterrel lezárt szövegmező), másrészt ez esetben nem kell a szerveroldalon azzal is foglalkoznunk, hogy a hibás űrlapok visszautasítását követően a már kitöltött adatokat előre betöltsük a megfelelő helyekre. Felhasználóként ugyanis nincs annál bosszantóbb, mint ha egy kis hiba miatt – ami nem is biztos, hogy a mi hibánk – kezdhetjük elölről az egész űrlap kitöltését, mert az oda-vissza út során elvesztek a korábban megadott adatok. Ugyanakkor óvatos és alapos honlapfejlesztőként arra is gondolnunk kell, hogy a felhasználó böngészőjében esetleg valamilyen ok miatt tiltott a JavaScript programok futása, márpedig ez esetben a kliensoldalon semmilyen ellenőrzés nem történik, az adatok bárminemű kontroll nélkül fognak a szerverre érkezni. (De ilyenkor már mondhatjuk azt, hogy nem csak a mi hibánk, hogy az adatok bevitelét ismét az elejétől kell kezdeni.)

Ezúttal is szükségünk lesz egy előzetes „tesztsorozatra”

Reguláris kifejezések – nagyon röviden

Honlapunk programjainak készítése során eddig is használtunk ún. reguláris kifejezéseket (például a hivatkozások kiterjesztéseinek vizsgálatához, vagy a hosszú szöveges mezők számlálóinak és ellenőrzőinek beállításához), azonban eddig ezt nem igazán hangsúlyoztuk. Mint azt hamarosan látni fogjuk, ezek a reguláris kifejezések nagyon hasznosak, és ha kicsit közelebbről megismerkedünk velük, akkor látni fogjuk, hogy jelentősen egyszerűsít(het)ik életünket, ugyanakkor tény, hogy egy-egy összetett reguláris kifejezés összeállítása nem egyszerű feladat.

A teszt ezúttal tényleg test() lesz

A JavaScriptben reguláris kifejezés objektumot kétféleképpen hozhatunk létre, a RegExp konstruktorral vagy / jeleket használva:

var re = new RegExp(kifejezés, attribútumok);

vagy

var re = /kifejezés/attribútumok;

A reguláris kifejezéseket használhatjuk szövegrészletek keresésére (search vagy match), cseréjére (replace), esetleg arra, hogy ellenőrizzük, hogy egy adott szöveg vagy annak egy része eleget tesz-e a megadott feltételeknek (test).

Jeffrey Friedl könyvében közel 500 oldalon ír a reguláris kifejezésekről

A reguláris kifejezésekről a PC World 2008. májusi számban Sümegi András értekezett hosszabban, számos példán keresztül bemutatva ezek lehetőségeit. Azoknak, akik szeretnének még részletesebben elmerülni a reguláris kifejezések világában, ajánljuk figyelmükbe Jeffrey Friedl magyar nyelven is megjelent közel ötszáz oldalas művét (Reguláris kifejezések mesterfokon), azonban – remélhetőleg érthető okokból – mi ennél most egy kicsit tömörebben próbáljuk meg összefoglalni ezek lényegét.

Az általunk használt reguláris kifejezések jellemzően konstans karakterekből, karaktercsoportokból, karakterosztályokból, ismétlés- és pozíciójelölőkből fognak állni. Például a s kifejezés a szóközt (egész pontosan szóköz, tabulátor, sortörés és „kocsi vissza” karaktereket), a w bármely alfanumerikus karaktert (kis és nagybetűket, valamint számokat) és az aláhúzás karaktert, a d bármely számot, ezek nagybetűs változata pedig pont az ellenkezőjüket (nem szóköz, nem alfanumerikus karakter, nem szám) jelenti. A pont (.) a reguláris kifejezések jolly jokere, bármelyik karaktert helyettesítheti.

JavaScript Regex Generator sokat segíthet az első reguláris kifejezések összeállításában

Ezeket, a konstans karaktereket és karakterek tartományát szögletes zárójelek ([ és ])közé zárva azt mondhatjuk meg, hogy ezek közül bármelyik szerepelhet az adott pozícióban, míg a kerek zárójelekkel csoportokba foglalhatjuk a kifejezésrészleteket. Így például a w-t tulajdonképpen írhatnánk úgy is, hogy [a-zA-Z0-9_], a d-t pedig úgy, hogy [0-9], vagy mondjuk egy sakktábla-pozíciót leírhatunk úgy, hogy [a-hA-H][1-8].

Azt, hogy az egyes karakterekből vagy karaktercsoportokból pontosan, legalább vagy legfeljebb mennyinek is kell lennie, az ún. ismétlésjelölőkkel adhatjuk meg. A karakter(csoport) mögé írt kérdőjel (?) azt jelenti, hogy a karakterek nullaszor vagy egyszer jelenhetnek meg a szövegben, a csillag (*) azt, hogy nulla vagy tetszőleges számú darab lehet az így megjelölt karakterekből, míg a pluszjel (+) azt jelenti, hogy legalább egy előfordulás szükséges az adott karakterből, karakterekből. Ezenkívül kapcsos zárójelek ({ és }) között számokkal is jelölhetjük az ismétlődések számát. Például a d{4} azt jelenti, hogy a szövegben pontosan négy számnak kell egymás után szerepelnie, de ha a d után azt írjuk, hogy {2,4} akkor már kettő-, három- vagy négyjegyű számot várunk, míg a d{2,} feltételnek eleget tesz minden szám olyan szövegrész, amiben legalább két szám van egymás után. Például a d{8}(sd{8}){1,2} kifejezés két vagy három számnyolcas csoportot, vagyis egy bankszámlaszámot ír le.

Mint említettük, a fentieken túl ún. pozíciójelölőket is használni fogunk. Ezekkel a kifejezéseket a szöveg egy (vagy több) pontjához igazíthatjuk. Így például a „háztető” karakter (^) a szöveg elejét, a dollár ($) a szöveg végét, míg a b a szóhatárt jelöli. Így a ^[+-]?d+$ kifejezés csak egy pozitív vagy negatív egész számot ábrázoló szövegre fog „illeszkedni”, hiszen a szöveg elején (^) egy plusz- vagy egy mínuszjelnek kell lennie, vagy semminek, hiszen a kérdőjel azt is megengedi, míg utána a szöveg végéig ($) tetszőleges darab számnak kell következnie. Ugyanakkor, ha lehagynánk a dollárjelet a kifejezés végéről, akkor például a „+123a” szöveg is megfelelhetne a fenti feltételnek.