Minden webfejlesztő ismeri az érzést: elkészített egy űrlapot, és felnyög, amikor ráébred, hogy most minden mezőt érvényesítenie kell.
Szerencsére az űrlap érvényesítésének nem kell fájdalmasnak lennie. Használhat reguláris kifejezéseket számos gyakori érvényesítési igény kezelésére.
Mik azok a reguláris kifejezések?
A reguláris kifejezések olyan mintákat írnak le, amelyek megfelelnek a karakterláncokban lévő karakterkombinációknak. Használhatja őket olyan fogalmak ábrázolására, mint a „csak számok” vagy „pontosan öt nagybetű”.
A reguláris kifejezések (más néven reguláris kifejezések) hatékony eszközök. Számos felhasználási területük van, beleértve a speciális keresést, a keresést és cserét, valamint a karakterláncokon végzett érvényesítési műveleteket. A reguláris kifejezések egyik híres alkalmazása az grep parancs Linux alatt.
Miért használjunk reguláris kifejezéseket az ellenőrzéshez?
Sokan vannak az űrlapbevitel érvényesítésének módjai, de a reguláris kifejezések egyszerűek, gyorsak és kényelmesek, ha érted, hogyan.
A JavaScript natív támogatja a reguláris kifejezéseket. Ez azt jelenti, hogy ezeket az érvényesítéshez használja a külső könyvtár helyett, így a webalkalmazás mérete a lehető legkisebb legyen.
A reguláris kifejezések sokféle űrlapbevitelt is képesek érvényesíteni.
A reguláris kifejezések alapjai
A reguláris kifejezések olyan szimbólumokból állnak, amelyek egy karakterlánc karakterei által alkotott mintákat írnak le. A JavaScriptben létrehozhat egy reguláris kifejezést, ha két perjel közé írja. A reguláris kifejezés legegyszerűbb formája így néz ki:
/abc/A fenti reguláris kifejezés megegyezik minden olyan karakterlánccal, amely az "a", "b" és "c" karaktereket tartalmazza ebben a sorrendben, egymás után. Az "abc" karakterlánc megfelel a reguláris kifejezésnek, valamint egy olyan karakterláncnak, mint az "abcdef".
Fejlettebb mintákat írhat le speciális karakterek használatával a reguláris kifejezésekben. A speciális karakterek nem egy szó szerinti karaktert képviselnek, de kifejezőbbé teszik a szabályos kifejezést.
Segítségükkel megadhatja, hogy a minta egy részének meg kell ismétlődnie bizonyos számú alkalommal, vagy jelezheti, hogy a minta egy része opcionális.
Példa speciális karakterre a "*". A "*" karakter vagy egyetlen karaktert vagy karaktercsoportot módosít, amely előtte van. Kijelenti, hogy ezek a karakterek hiányozhatnak, vagy akárhányszor ismétlődnek egymás után. Például:
/abc*/
Egyezni fog az "ab" karakterrel, amelyet tetszőleges számú "c" karakter követ. Az "ab" karakterlánc érvényes példa erre a mintára, mert a "c" karakter nem kötelező. Az "abc" és az "abccccc" karakterláncok egyformán érvényesek, mivel a "*" azt jelenti, hogy a "c" tetszőleges számú alkalommal ismétlődik.
A teljes regex szintaxis további mintakaraktereket használ a lehetséges egyezések leírására. Többet megtudhat a Regexlearn.com Regex 101 interaktív tanfolyam. Az MDN JavaScript útmutatója is nagyon hasznos.
Űrlapérvényesítés reguláris kifejezésekkel
Használhatja a regex-et az űrlapbevitel érvényesítésére néhány módon. Az első módszer a JavaScript használata. Ez néhány lépésből áll:
- Szerezze meg az űrlap bemeneti értékét.
- Ellenőrizze, hogy a bemenet értéke megegyezik-e a reguláris kifejezéssel.
- Ha nem, jelenítse meg a webhely felhasználójának, hogy a beviteli mező értéke érvénytelen.
Íme egy rövid példa. Adott egy ilyen beviteli mezőt:
<bemeneti helyőrző="Beviteli mező">Írhat egy függvényt az érvényesítéshez, így:
funkcióérvényesít() {
hagyja érték = dokumentum.querySelector("bemenet").érték;
const regEx = /^.{3,7}$/;
Visszatérés regEx.test (érték);
}Egy másik lehetőség a böngésző HTML-űrlap-ellenőrzési lehetőségeinek kihasználása. Hogyan? A regex megadásával a HTML beviteli címke minta attribútumának értékeként.
A minta attribútum csak a következő típusú bevitelhez érvényes: szöveg, telefon, e-mail, url, jelszó és keresés.
Íme egy példa a minta attribútum használatára:
<forma>
<bemeneti helyőrző="Beviteli mező" szükséges minta="/^.{3,7}$/">
<gomb>Beküldés</button>
</form>Ha elküldi az űrlapot, és a bemeneti érték nem egyezik a teljes reguláris kifejezéssel, az űrlap egy alapértelmezett hibát fog megjeleníteni, amely így néz ki:
Ha a minta attribútumhoz megadott reguláris kifejezés érvénytelen, a böngésző figyelmen kívül hagyja az attribútumot.
Általános szabályos minták az űrlapok érvényesítéséhez
A regex létrehozása és hibakeresése a semmiből eltarthat egy ideig. Íme néhány reguláris kifejezés, amelyek segítségével ellenőrizheti az űrlapadatok legáltalánosabb típusait.
Reguláris kifejezés a karakterlánc hosszának ellenőrzésére
Az egyik leggyakoribb érvényesítési követelmény a karakterlánc hosszának korlátozása. A hét karakteres karakterláncnak megfelelő reguláris kifejezés a következő:
/^.{7}$/Az "." egy olyan helyőrző, amely bármely karakternek megfelel, és a zárójelben lévő "7" a karakterlánc hosszkorlátját határozza meg. Ha a karakterláncnak egy bizonyos hosszúságú tartományon belül kell lennie, például három és hét között, a reguláris kifejezés a következőképpen nézne ki:
/^.{3,7}$/És ha a karakterláncnak legalább három karakterből kell állnia felső határ nélkül, akkor a következőképpen néz ki:
/^.{3,}$/Nem valószínű, hogy a hosszúság lesz az egyetlen érvényességi követelmény az űrlapbevitelnél. De gyakran használja egy bonyolultabb reguláris kifejezés részeként, beleértve az egyéb feltételeket is.
Reguláris kifejezés a csak betűket tartalmazó mezők érvényesítésére
Egyes űrlapbeviteleknek csak betűket kell tartalmazniuk, hogy érvényesek legyenek. A következő reguláris kifejezés csak az ilyen karakterláncoknak felel meg:
/^[a-zA-Z]+$/Ez a reguláris kifejezés egy karakterkészletet határoz meg, amely a teljes ábécéből áll. A speciális "+" karakter azt jelenti, hogy az előző karakternek legalább egyszer el kell fordulnia, felső határ nélkül.
Reguláris kifejezés a csak számot tartalmazó mezők érvényesítésére
A következő reguláris kifejezés csak a teljes egészében számjegyekből álló karakterláncokhoz fog illeszkedni:
/^\d+$/A fenti reguláris kifejezés lényegében megegyezik az előzővel. Az egyetlen különbség az, hogy egy speciális "\d" karaktert használ a számjegyek tartományának megjelenítésére, ahelyett, hogy kiírná őket.
Reguláris kifejezés az alfanumerikus mezők érvényesítésére
A reguláris kifejezések megkönnyítik az alfanumerikus mezők ellenőrzését is. Íme egy reguláris kifejezés, amely csak a betűkből és számjegyekből álló karakterláncoknak felel meg:
/^[a-zA-Z\d]+$/Egyes mezők alfanumerikusak, de megengednek néhány más karaktert is, például kötőjeleket és aláhúzásjeleket. Az ilyen mezők egyik példája a felhasználónév. Az alábbiakban egy reguláris kifejezés található, amely megfelel a betűkből, számjegyekből, aláhúzásjelekből és kötőjelekből álló karakterláncnak:
/^(\w|-)+$/A "\w" speciális karakter a karakterek egész osztályára egyezik, ahogy a "\d" is. Az ábécé, a számjegyek és az aláhúzás karakter ("_") tartományát jelenti.
Reguláris kifejezés a telefonszámok érvényesítéséhez
A telefonszámok ellenőrzése bonyolult mező lehet, mivel a különböző országok eltérő formátumokat használnak. Egy nagyon általános megközelítés annak biztosítása, hogy a karakterlánc csak számjegyeket tartalmazzon, és hossza egy bizonyos tartományon belül legyen:
/^\d{9,15}$/Egy kifinomultabb megközelítés így nézhet ki MDN, amely ###-###-#### formátumú telefonszámokat érvényesít:
/^(?:\d{3}|\(\d{3}\))([-\/\.])\d{3}\1\d{4}$/Reguláris kifejezés a dátumok érvényesítéséhez
A telefonszámokhoz hasonlóan a dátumoknak is többféle formátuma lehet. A dátumok ellenőrzése általában kevésbé bonyolult, mint a telefonszámok. Miért? A dátumok nem tartalmaznak más karaktereket, mint számjegyeket és kötőjeleket.
Íme egy példa, amely a „DD-MM-YYYY” formátumú dátumokat érvényesíti.
/^\d{2}-\d{2}-\d{4}$/Az érvényesítés a Regex segítségével egyszerű
A reguláris kifejezések olyan mintákat írnak le, amelyek megfelelnek a karakterláncokban lévő karakterkombinációknak. Számos alkalmazással rendelkeznek, például érvényesíthetik a felhasználói bevitelt HTML-űrlapokból.
A regex segítségével JavaScripttel vagy a HTML-minta attribútummal lehet érvényesíteni. Könnyű reguláris kifejezések létrehozása a gyakori űrlapbeviteli típusok, például a dátumok és a felhasználónevek érvényesítésére.
