A HTML űrlap-érvényesítés áttekintése
A webes űrlapok gyakran a webalkalmazások leggyakrabban használt és nélkülözhetetlen részei. Az űrlap-érvényesítés a felhasználó által bevitt adatok érvényesítése az előre meghatározott szabályok alapján. Az űrlap érvényesítéséhez mind az ügyfél, mind a szerver oldalán sor kerülhet. A HTML űrlap érvényesítése az ügyféloldali érvényesítés formája, ahol az adatok érvényesítését az adatok kiszolgálóra küldése előtt kell végrehajtani. A HTML űrlap érvényesítése jelentős és hasznos, mert javítja az ügyféloldali felhasználói felületet és a webes alkalmazás teljesítményét.
HTML űrlap érvényesítése
Elsősorban kétféle módon hajthatjuk végre a HTML űrlap érvényesítését,
- A HTML5 beépített funkcióinak használata
- A JavaScript használata
1. A HTML5 beépített funkcióinak használata
A HTML5 biztosítja ezt az űrlap-érvényesítési funkciót JavaScript használata nélkül. Az űrlapelemekhez validációs attribútumok kerülnek hozzáadásra, amelyek automatikusan lehetővé teszik számunkra az űrlap érvényesítését. Az érvényesítési attribútumok lehetővé teszik a különféle szabályok meghatározását az űrlapelemeken. Ezek lehetővé teszik az adatok hosszának beállítását, az adatok értékének korlátozását stb.
Lássuk a HTML formátum érvényesítésének egy egyszerű példáját a beépített űrlap-ellenőrző elemek használatával, majd folytatjuk a HTML-forma érvényesítését a JavaScript használatával.
Példa
Űrlap-érvényesítés HTML5 érvényesítési attribútummal - Ebben a példában a szükséges űrlap-érvényesítési címkét fogjuk használni, amely az adatmező kötelezővé tételét teszi szükségessé, különben az űrlap nem kerül benyújtásra. Az alábbiakban található ugyanaz a kódrészlet, valamint a webes űrlap néhány stílusa.
.formData (
padding-top: 20px;
padding-bottom: 20px;
padding-left: 10px;
background-color: darkcyan;
)
form (
font-size: 30px;
)
form input (
margin-left: 10px;
font-size: 15px;
)
Name:
Tehát nagyon egyszerű webes űrlapunk van, csak egy „Név” bemeneti adatmezővel együtt. Felhívjuk figyelmét, hogy a szükséges kulcsszót használtuk a bemeneti címke elemben.
Teljesítmény :
Próbáljuk beküldeni az űrlapot anélkül, hogy bármilyen értéket beírnánk a név mezőbe. A beküldéskor a következő hibaüzenetet kapja: „Kérjük, töltse ki ezt a mezőt”, és az űrlapot nem küldik el.
Kimenet üres adatokkal
Tehát látható, hogy a hibaüzenetet nem mi adtuk hozzá, hanem maga a HTML biztosítja.
Csakúgy, mint a HTML által biztosított szükséges attribútum, vannak különféle űrlapcímkék is, amelyek használhatók. Az alábbiakban felsorolunk néhány űrlap-érvényesítési címkét,
- minlength: az elem szükséges minimális hosszának beállításához
- maxlength: az elem szükséges maximális hosszának beállításához
- minta: Egy reguláris kifejezés meghatározására szolgál
2. A JavaScript használata
A JavaScriptet széles körben használják a HTML-űrlapok érvényesítésére, mivel több lehetőséget kínál az érvényesítési szabályok testreszabására és beállítására; a HTML5-ben szereplő néhány címke szintén nem támogatott az Internet Explorer régebbi verzióiban. A JavaScriptet sokáig használják az űrlapok érvényesítéséhez.
A JavaScript forma érvényesítésében alapvetően olyan funkciókat határozunk meg, amelyek az adatok érvényesítéséhez szükségesek, mielőtt a kiszolgálóra továbbítanák. Bármilyen logikát megvalósíthatunk az érvényesítési szabályok eléréséhez. A JavaScript így rugalmasabb, mivel nincs korlátozás a szabályok meghatározására. De ennek ismeretéhez a JavaScript ismerete szükséges, mint a beépített címkékkel történő űrlap-érvényesítéshez képest.
Lássuk a JavaScriptet használó űrlap-érvényesítés példáját. Ugyanazt a példát fogjuk megvalósítani, csak egy bemenettel, mint a név elem.
Példa:
.formData (
padding-top: 20px;
padding-bottom: 20px;
padding-left: 10px;
background-color: darkcyan;
position: absolute;
width: 100%;
)
form (
font-size: 30px;
)
form input (
margin-left: 10px;
font-size: 15px;
)
.errorMessage (
background-color: white;
width: 143px;
padding-left: 10px;
padding-right: 10px;
padding-top: 5px;
padding-bottom: 5px;
margin-left: 107px;
visibility: hidden;
border-radius: 10px;
position: relative;
float: left;
)
.errorMessage.top-arrow:after (
content: " ";
position: absolute;
right: 90px;
top: -15px;
border-top: none;
border-right: 10px solid transparent;
border-left: 10px solid transparent;
border-bottom: 15px solid white;
)
Name:
function validateForm() (
var nameVal = document.forms("simpleForm")("name").value;
if(nameVal == null || nameVal == "") (
document.getElementsByClassName( "errorMessage" )(0).style.visibility = "visible";
document.getElementsByClassName( "errorMessage" )(0).innerHTML = "Please Fill out this field";
return false;
) else (
return true;
)
)
Az előző példából eltávolítottuk a szükséges címkét a „name” űrlapelemből. Ehelyett egy űrlapot adtunk hozzá a beküldéshez. Mint korábban említettem, az lesz a függvény írása az érvényesítéshez, amelyhez címkét adunk hozzá.
Írtunk egy funkciót, amelynek neve az validateForm (), amely elvégzi az érvényesítést. Ugyanezt a szabályt hajtjuk végre, amikor ellenőrizzük, hogy a név mezőbe beírt adatok üresek-e vagy sem. A logika az ellenőrzéshez a beküldés gombra való kattintással történik, ez a funkció meghívásra kerül, és a beírt értéket ellenőrzi, hogy semleges, sem üres. A funkció igaz lesz, ha az adatok nem nullák vagy üresek, de ha az adatok üresek vagy nullák, akkor a hibaüzenet jelenik meg a felhasználó számára.
Kimenet
Ha megpróbáljuk az űrlapot adatok bevitele nélkül benyújtani, akkor a képernyőn megjelenik a hibaüzenet. Amint az a példából látható, hogy a hibaüzenetet a lehető legjobban terveztük meg.
Kimenet üres adatokkal
Következtetés - HTML űrlap érvényesítése
Tehát nagyon egyszerű példát láthattunk az űrlap-érvényesítésről az ügyféloldalon. Elsősorban kétféle módon hajthatjuk végre a HTML űrlap érvényesítését. Az első a HTML5-ben biztosított beépített funkciókat használja, a második pedig a JavaScript használatát. Az első módszerrel nem kell extra kódot írni.
Ajánlott cikkek
Ez egy útmutató a HTML űrlap-érvényesítéshez. Itt tárgyaljuk a HTML űrlap-érvényesítés áttekintését és két módszerét, amelyekkel végrehajthatók. Lehet, hogy megnézi a következő cikkeket is, ha többet szeretne megtudni -
- HTML események
- Html verziói
- HTML5 elemek
- A HTML alkalmazásai