Intro Into HTML5 Constraint Validation

Az interaktív weboldalak és alkalmazások nem képzelhetők el olyan formák nélkül, amelyek lehetővé teszik számunkra kapcsolatot a felhasználókkal, és a az adatokat szükségünk van a velük való zökkenőmentes tranzakciók biztosításához. Szükségünk van rá érvényes felhasználói bemenet, ugyanakkor meg kell szereznünk azt oly módon nem zavarja túl sokat használunk.

Bár az intelligensen választott UX tervezési mintákkal javíthatjuk formáink használhatóságát, a HTML5-nek van egy natív mechanizmusa a kényszer validálására, amely lehetővé teszi számunkra, hogy a bemeneti hibák fogása közvetlenül az elülső oldalon.

Ebben a bejegyzésben összpontosítunk böngésző által biztosított korlátozási érvényesítés, és nézd meg, hogyan lehet a frontend fejlesztők biztonságos felhasználói bevitel biztosítása a HTML5 használatával.

Miért van szükség a végfelhasználói bevitel ellenőrzésére

Bemeneti érvényesítés két fő célja van. A tartalomnak:

1. Hasznos

Szükségünk van használható adatok, amelyekkel együtt dolgozhatunk. Meg kell tennünk az embereket reális adatok a megfelelő formátumban. Például senki, aki ma életben van, 200 évvel ezelőtt született. Az ilyen adatok megszerzése kezdetben viccesnek tűnhet, de hosszú távon bosszantó, és az adatbázisunkat haszontalan adatokkal töltik fel.

2. Biztonságos

A biztonságra hivatkozva ez azt jelenti, hogy szükségünk van rá megakadályozzák a rosszindulatú tartalom befecskendezését - szándékos vagy véletlenszerű.

Hasznos (ésszerű adatok megszerzése) érhető el csak az ügyfél oldalán, a backend csapat nem tud túl sokat segíteni ezzel. Megvalósítani Biztonság, az elülső és a hátsó fejlesztőknek együtt kell működniük.

Ha a frontend fejlesztők megfelelően validálják az ügyféloldali bemenetet, a A backend csapatnak sokkal kevesebb sebezhetőséggel kell foglalkoznia. A hackelés (webhely) gyakran magában foglalja további adatok benyújtása, vagy adatok rossz formátumban. A fejlesztők harcolhatnak az ilyen biztonsági lyukakkal, sikeresen küzdhetnek a front-end-től.

Például ez a PHP biztonsági útmutató azt javasolja, hogy ellenőrizze mindent, amit az ügyféloldalon tudunk. Hangsúlyozzák a frontend bemeneti érvényesítésének fontosságát sok példával, például:

Msgstr "" "A beviteli validálás a leginkább rendkívül korlátozott értékekkel működik, például amikor valaminek egésznek kell lennie, vagy egy alfanumerikus karakterlánc, vagy egy HTTP URL."

A frontend bemeneti érvényesítésnél a feladatunk az, hogy ésszerű korlátozásokat szabjon meg a felhasználói bemeneten. A HTML5 korlátozási érvényesítési szolgáltatása biztosítja az ehhez szükséges eszközöket.

HTML5 korlátozási érvényesítés

A HTML5 előtt a frontend fejlesztők csak a felhasználói bevitel validálása JavaScript segítségével, ez egy fárasztó és hibára hajlamos folyamat volt. Az ügyféloldali űrlap érvényesítésének javítása érdekében a HTML5 bevezette a korlátozás érvényesítése algoritmus, amely modern böngészőkben fut, és. \ t ellenőrzi a benyújtott bemenet érvényességét.

Az értékeléshez az algoritmus a a bemeneti elemek érvényesítési jellemzői, mint például , </code>, és <code><select></code>. Ha szeretné tudni, hogy a böngészőben a megszorítások érvényesítése lépésről lépésre történik, nézd meg ezt a WhatWG doc.</p> <p>A HTML5 kényszer validálási funkciójának köszönhetően mindent végrehajthatunk <strong>szabványos bemeneti érvényesítési feladatok</strong> az ügyfél oldalán <strong>JavaScript nélkül, kizárólag HTML5-tel</strong>.</p> <p>A bonyolultabb validálási feladatok elvégzéséhez a HTML5 a <strong>Korlátozási érvényesítési JavaScript API</strong> az egyéni érvényesítési parancsfájlok beállításához használhatjuk.</p> <h4>Érvényesítés szemantikai beviteli típusokkal</h4> <p>A HTML5 bevezette <strong>szemantikus bemeneti típusok</strong> hogy - a felhasználói ügynökök elemének jelentésének megjelölése mellett - szintén használható <strong>érvényesítse a felhasználói bevitelt</strong> korlátozza a felhasználókat egy bizonyos bemeneti formátumra.</p> <p>A HTML5 előtt már létező beviteli típusok mellett (<code>szöveg</code>, <code>Jelszó</code>, <code>beküldése</code>, <code>Visszaállítás</code>, <code>rádió</code>, <code>négyzetet</code>, <code>gomb</code>, <code>rejtett</code>), az alábbiakat is használhatjuk <strong>szemantikus HTML5 bemeneti típusok</strong>: <code>email</code>,<code>tel</code>,<code>url</code>,<code>szám</code>,<code>idő</code>,<code>dátum</code>,<code>dátum idő</code>,<code>datetime helyi</code>, <code>hónap</code>,<code>hét</code>, <code>hatótávolság</code>, <code>keresés</code>,<code>szín</code>.</p> <p>A régebbi böngészőkkel biztonságosan használhatunk HTML5 bemeneti típusokat, mivel azok egy viselkedésként fognak működni <code><input type="text"></code> böngészőkben, amelyek nem támogatják őket.</p> <p>Lássuk, mi történik, ha a felhasználó rossz bemeneti típusba lép. Mondjuk, hogy létrehoztunk egy e-mail beviteli mezőt a következő kóddal:</p> <pre name="code"> <form name="form" action="#" method="post"> <label for="youremail">Az email címed:</label> <input type="email" name="email"> <input type="submit" value="Submit"> </form> </pre> <p>Amikor a felhasználó egy olyan karakterláncot ír be, amely nem használ e-mail formátumot, akkor a kényszer validációs algoritmus <strong>nem nyújtja be az űrlapot</strong>, és <strong>hibaüzenetet küld</strong>:</p> <figure> <img src="//savtec.org/img/images_1/intro-into-html5-constraint-validation.jpg"></figure><p>Ugyanez a szabály vonatkozik más bemeneti típusokra is, például <code>type = "url"</code> a felhasználók csak az URL formátumot követő bemenetet tudják benyújtani (egy protokollal kezdődik, mint például <code>http: //</code> vagy <code>ftp: //</code>).</p> <p>Bizonyos bemeneti típusok terveznek <strong>nem teszi lehetővé a felhasználók számára, hogy rossz bemeneti formátumot adjanak meg</strong>, például <code>szín</code> és <code>hatótávolság</code>.</p> <pre name="code"> <form name="form" action="#" method="post"> <label for="bgcol">Háttérszín:</label> <input type="color" name="color"> <input type="submit" value="Submit"> </form> </pre> <p>Ha ezt használjuk <code>szín</code> A bemeneti típus a felhasználónak arra van kényszerítve, hogy a színválasztó színét választja, vagy az alapértelmezett fekete legyen. A beviteli mező <strong>a tervezés korlátozott</strong>, ezért nem hagy sok esélyt a felhasználói hibára.</p> <figure> <img src="//savtec.org/img/images_1/intro-into-html5-constraint-validation_2.jpg"></figure><p>Ha helyénvaló, érdemes megfontolni a használatát <code><select></code> HTML-címke, amely hasonlóan működik az ilyen korlátozott formátumú bemeneti típusokhoz; lehetővé teszi a felhasználók számára, hogy válasszanak egy legördülő listából.</p> <pre name="code"> <form name="form" action="#" method="post"> <label for="favfruit">Kedvenc gyümölcs:</label> <select name="fruit"> <option value="apple">alma</option> <option value="pear">Körte</option> <option value="orange">narancs</option> <option value="raspberry">Málna</option> </select> <input type="submit" value="Submit"> </form> </pre> <figure> <img src="//savtec.org/img/images_1/intro-into-html5-constraint-validation_3.jpg"></figure><h4>Használja a HTML5 érvényesítési attribútumait</h4> <p>A szemantikus beviteli típusok használata bizonyos korlátokat határoz meg a felhasználók számára, de a legtöbb esetben egy kicsit tovább akarunk menni. Ez az, amikor a <strong>érvényesítési jellemzők</strong> a <code><input></code> a címke segíthet nekünk.</p> <p>Az érvényesítéssel kapcsolatos attribútumok bizonyos beviteli típusokhoz tartoznak (ezeket nem lehet használni <em>minden</em> típusok), amelyekre további korlátozásokat vezetnek be.</p> <h5>1. <code>kívánt</code> minden eszközzel érvényes bemenetet kap</h5> <p>A <code>kívánt</code> Az attribútum a legismertebb HTML validációs attribútum. Ez egy <strong>boolean attribútum</strong> ami azt jelenti <strong>nem vesz semmilyen értéket</strong>, egyszerűen csak be kell helyeznünk <code><input></code> címke, ha használni szeretnénk:</p> <pre name="code"> <input type="email" name="email" required> </pre> <p>Ha a felhasználó elfelejtette megadni egy értéket a kívánt beviteli mezőbe, a böngésző <strong>hibaüzenetet küld</strong> amely figyelmezteti őket arra, hogy töltse ki a mezőt, és ezek <strong>nem tudja benyújtani az űrlapot</strong> addig, amíg érvényes bemenetet nem adnak meg. Ezért fontos mindig <strong>vizuálisan jelölje meg</strong> szükséges mezőket.</p> <p>A <code>kívánt</code> attribútum lehet <strong>az alábbi beviteli típusokkal együtt használják</strong>: <code>szöveg</code>, <code>keresés</code>, <code>url</code>, <code>tel</code>, <code>email</code>, <code>Jelszó</code>, <code>dátum</code>, <code>dátum idő</code>, <code>datetime helyi</code>, <code>hónap</code>, <code>hét</code>,<code>idő</code>, <code>szám</code>, <code>négyzetet</code>, <code>rádió</code>, <code>fájl</code>, plusz a <code><textarea></code>és <code><select></code> HTML-címkék.</p> <h5>2. <code>min</code>, <code>max</code> és <code>lépés</code> a szám érvényesítéséhez</h5> <p>A <code>min</code>, <code>max</code> és <code>lépés</code> az attribútumok lehetővé teszik számunkra <strong>korlátozza a számbeviteli mezőket</strong>. Ezeket együtt lehet használni <code>hatótávolság</code>, <code>szám</code>, <code>dátum</code>, <code>hónap</code>, <code>hét</code>, <code>dátum idő</code>, <code>datetime helyi</code>, és <code>idő</code> bemeneti típusok.</p> <p>A <code>min</code> és <code>max</code> Az attribútumok nagyszerű módja annak, hogy könnyen <strong>kizárják az indokolatlan adatokat</strong>. Például az alábbi példa arra kényszeríti a felhasználókat, hogy 18 és 120 év közötti korúak legyenek.</p> <pre name="code"> <form name="form" action="#" method="post"> <label for="yourage">A korod:</label> <input type="number" name="age" min="18" max="120"> <input type="submit" value="Submit"> </form> </pre> <p>Amikor a kényszer validálási algoritmus a felhasználói bemenetre kisebb, mint a <code>min</code>, vagy nagyobb, mint a <code>max</code> értéke megakadályozza, hogy elérje a hátteret, és hibaüzenetet küld.</p> <figure> <img src="//savtec.org/img/images_1/intro-into-html5-constraint-validation_4.jpg"></figure><p>A <code>lépés</code> tulajdonság <strong>numerikus intervallumot ad meg</strong> egy numerikus beviteli mező jogi értékei között. Például, ha azt szeretnénk, hogy a felhasználók csak ugrási évekből válasszanak, hozzáadhatjuk a <code>lépés = "4"</code> attribútum a mezőre. Az alábbi példában a <code>szám</code> bemeneti típus, mivel nincs <code>type = "év"</code> HTML5-ben.</p> <pre name="code"> <form name="form" action="#" method="post"> <label for="yourleapyear">Kedvenc ugrás éve:</label> <input type="number" name="leapyear" min="1972" max="2016" step="4"> <input type="submit" value="Submit"> </form> </pre> <p>Az előre beállított korlátokkal a felhasználók csak az 1972 és 2016 közötti ugrási évek közül választhatnak, ha a kis felfelé mutató nyilat használják a <code>szám</code> bemeneti típus. Az értékeket kézzel is beírhatják a beviteli mezőbe, de ha nem felel meg a korlátozásoknak, a böngésző hibaüzenetet küld.</p> <figure> <img src="//savtec.org/img/images_1/intro-into-html5-constraint-validation.gif"></figure><h5>3. <code>maxlength</code> szöveghossz-érvényesítéshez</h5> <p>A <code>maxlength</code> az attribútum lehetővé teszi <strong>állítsa be a maximális karakter hosszát</strong> szöveges beviteli mezőkre. Használható együtt a <code>szöveg</code>, <code>keresés</code>, <code>url</code>, <code>tel</code>, <code>email</code> és <code>Jelszó</code> bemeneti típusok és a <code><textarea></code> HTML címke.</p> <p>A <code>maxlength</code> Az attribútum kiváló megoldás lehet olyan telefonszámmezőkre, amelyeknél nem lehet több, mint egy bizonyos számú karakter, vagy olyan kapcsolati űrlapok esetében, ahol nem akarjuk, hogy a felhasználók egy bizonyos hossznál többet írjanak.</p> <p>Az alábbi kódrészlet az utóbbi példáját mutatja, a felhasználói üzeneteket 500 karakterre korlátozza. </p> <pre name="code"> <form name="form" action="#" method="post"> <label for="yourmsg">Üzenet (max. 500 karakter):</label> <textarea name="msg" cols="25" rows="4" maxlength="500">

A maxlength tulajdonság nem küld hibaüzenetet, de a böngésző egyszerűen nem teszi lehetővé, hogy a felhasználók a megadott karakterszámnál többet írjanak be. Ezért döntő fontosságú tájékoztassa a felhasználókat a kényszerről, különben nem fogják megérteni, hogy miért nem tudnak folytatni a gépelést.

 
 * A jelszavad: