Phenquestions
Az űrlapellenőrzés a webfejlesztési folyamat alapvető és legfontosabb része. Az űrlapellenőrzés általában a szerver oldalon történik. Az űrlapellenőrzés segít a hibaüzenetek megjelenítésében a felhasználó számára, ha felesleges vagy helytelen adatokat ad meg, vagy egy kötelező mező üresen marad. Ha a szerver hibát talál, visszadobja azt; akkor megmutatjuk a hibaüzenetet a felhasználónak. De használhatunk javascript-et a kezelőfelületen az űrlapadatok ellenőrzéséhez és a hibák azonnal megjelenítéséhez. Ebben a cikkben megtanuljuk az alapvető űrlapellenőrzést javascriptben. Tehát térjünk közvetlenül a példákra, és nézzük meg, hogyan tehetjük ezt meg javascriptben.
Példák
Először egy „testForm” nevű űrlapot feltételezünk, amelyben van egy „Felhasználónév” feliratú beviteli mező, és egy bemeneti típus beküldik a HTML fájlunkba. Az űrlapcímkében létrehoztunk egy onsubmit eseményt, amelyben lezárást és függvényt adunk vissza validateFunc ().
A szkriptfájlba beírjuk a validateFunc () függvénydefinícióját, amely minden alkalommal végrehajtásra kerül, amikor a felhasználó megnyomja az elküldés gombot. Ebben a függvényben érvényesíteni fogjuk a felhasználónév beviteli mezőt. Feltételezzük, hogy érvényesíteni akarjuk a felhasználónév mezőt, vagy sem, amikor a felhasználó megnyomja az elküldés gombot.
Tehát a felhasználónév mező érvényesítéséhez. Először egy változót rendelünk a dokumentumhoz.testForm, csak hogy tiszta és érthető megjelenést nyújtson a kódnak. Ezután a függvénydefinícióba beírjuk az érvényesítéshez szükséges kódot. Az üres űrlapmező ellenőrzéséhez írunk egy if utasítást. Ha a felhasználónév mező üres, akkor megjelenik egy figyelmeztető mező, amely megmutatja a hibát, ismét összpontosít a felhasználónév mezőre, és hamis értéket ad vissza, hogy az űrlap ne kerüljön beküldésre. Ellenkező esetben, ha átmegy az ellenőrzésen, és az adatok ellenőrzése megtörténik, hűen visszatérünk a függvényhez.
var theForm = dokumentum.testForm;// Az űrlap érvényesítési kódja
függvény validationFunc ()
ha (aForm.név.érték == "")
figyelmeztetés ("a név üres");
a nyomtatvány.név.fókusz();
return false;
visszatérés (igaz);
Miután megírta ezt a kódot. Ha futtatjuk a kódot, és rákattintunk a beküldés gombra anélkül, hogy bármit is írnánk az űrlapmezőbe.
Amint az alábbi csatolt képernyőképen megfigyelhető, hibát dob a riasztási mezőben.
Ez egy nagyon alapvető, mégis jó példa az űrlapellenőrzés végrehajtásának megkezdéséhez. További megvalósításhoz, például többféle űrlapellenőrzéshez, vagy ellenőrizni szeretné a karakterek hosszát is.
Ebből a célból először két űrlapmezőt feltételezünk az űrlapcímkében, HTML-fájlunkban az „e-mail” és a „jelszó” címkével.
A javascriptben történő érvényesítéshez ismét beírunk egy if utasítást az e-mail és a jelszó űrlapmezők validálásához a szkriptfájl függvénydefiníciójába. Tegyük fel, hogy több érvényesítést akarunk alkalmazni az e-mail mezőben, például, hogy a mező ne legyen üres, és hossza ne legyen kevesebb, mint 10 karakter. Tehát használhatunk VAGY „||” az if nyilatkozatban. Ha ezen hibák bármelyike előfordul, akkor egy figyelmeztető mező jelenik meg a megjeleníteni kívánt hibaüzenettel, az e-mail űrlap mezőre összpontosít, és hamis értéket ad vissza a függvényhez. Hasonlóképpen, ha a karakterhossz-ellenőrzést szeretnénk alkalmazni a jelszó mezőben, megtehetjük.
var theForm = dokumentum.testForm;// űrlap érvényesítési kód
függvény validationFunc ()
ha (aForm.név.érték == "")
figyelmeztetés ("a név üres");
a nyomtatvány.név.fókusz();
return false;
ha (aForm.email.érték == "" || a nyomtatvány.email.érték.hossz < 10)
figyelmeztetés ("Az e-mail nem megfelelő");
a nyomtatvány.email.fókusz();
return false;
ha (aForm.Jelszó.érték.hossz < 6)
figyelmeztetés ("A jelszónak 6 karakter hosszúnak kell lennie");
a nyomtatvány.Jelszó.fókusz();
return false;
visszatérés (igaz);
Miután megírta ezt a kódot, töltse be újra az oldalt a kód frissítéséhez. Vagy hagyunk üres e-mail mezőt, vagy 10 karakternél rövidebb e-mailt írunk. Mindkét esetben megjelenik egy „Nem megfelelő e-mail” hiba.
Tehát így alkalmazhatjuk az alapvető űrlapellenőrzést a JavaScript-ben. Adatellenőrzést is alkalmazhatunk a kliens oldalon a Regex használatával, vagy saját egyéni függvényünk megírásával. Tegyük fel, hogy az adatok érvényesítését szeretnénk alkalmazni az e-mail mezőben. A regex ilyen lenne egy e-mail érvényesítéséhez.
ha (/ ^ [a-zA-Z0-9.!# $% & '* + / =?^ _ '| ~ -] [e-mail védett] [a-zA-Z0-9 -] + (?: \.[a-zA-Z0-9 -] +) * $ /.teszt (theForm.email.érték))
figyelmeztetés ("Az e-mail nem megfelelő");
a nyomtatvány.email.fókusz ();
return false;
Ez csak egy alapvető bizonyíték volt az adatok validálására a regex segítségével. De az ég nyitva van, hogy repülhessen.
Következtetés
Ez a cikk az alapvető űrlap-ellenőrzést tartalmazza a javascriptben. Kipróbáltunk egy bepillantást az adatok validálásába a regex segítségével. Ha többet szeretne megtudni a regexről, van egy dedikált cikkünk, amely a regexhez kapcsolódik a linuxhint-en.com. A javascript fogalmainak és az ehhez hasonló hasznos tartalmak megismeréséhez és megértéséhez látogassa meg folyamatosan a linuxhint oldalt.com. Köszönöm!
