Uvod v validacijo omejitve HTML5

Interaktivnih spletnih mest in aplikacij si ni mogoče predstavljati brez oblik, ki nam omogočajo povežite se z našimi uporabniki, in do pridobiti podatke da bi zagotovili nemoteno poslovanje z njimi. Potrebujemo veljaven uporabniški vnos, vendar ga moramo pridobiti na tak način ne ovira našim uporabnikom preveč.

Čeprav lahko izboljšamo uporabnost naših obrazcev s pametno izbranimi vzorci oblikovanja UX, ima HTML5 tudi naraven mehanizem za preverjanje omejitev, ki nam omogoča, da ulovite napake pri vnosu neposredno na sprednji strani.

V tej objavi se bomo osredotočili na preverjanje omejitev, ki ga zagotavlja brskalnik, in poglejte, kako lahko razvijalci frontendov zaščitite veljaven vnos uporabnika s pomočjo HTML5.

Zakaj potrebujemo preverjanje vhodnega vmesnika

Vnos validacije ima dva glavna cilja. Vsebina, ki jo dobimo, mora biti:

1. Uporabno

Potrebujemo uporabne podatke, s katerimi lahko delamo. Ljudje moramo vstopiti realističnih podatkov v pravem formatu. Na primer, nihče, ki je danes živ, se ni rodil pred 200 leti. Zdi se, da so podatki, kot je ta, na prvi pogled smešni, dolgoročno pa je nadležno in našo bazo podatkov dopolni z neuporabnimi podatki.

2. Varno

Ko govorimo o varnosti, to pomeni, da moramo preprečiti vbrizganje zlonamerne vsebine - namerno ali po nesreči.

Uporabnost (pridobitev razumnih podatkov) je mogoče doseči samo na strani odjemalca, ekipi v ozadju ne morete pomagati. Doseči varnosti, Razvijalci front-and-backend morajo sodelovati.

Če razvijalci frontendov pravilno potrdijo vnos na strani odjemalca, bo bo morala reševati veliko manj ranljivosti. Hekiranje (spletno mesto) pogosto vključuje posredovanje dodatnih podatkov, ali podatkov v napačni obliki. Razvijalci se lahko borijo proti varnostnim luknjam, kot so te, se uspešno borijo s sprednje strani.

Na primer, ta priročnik za varnost PHP priporoča, da preverite vse, kar lahko na strani odjemalca. Poudarjajo pomembnost preverjanja vnosa vmesnika s številnimi primeri, kot so:

"Vhodna validacija najbolje deluje z zelo omejenimi vrednostmi, npr. Ko mora biti nekaj celo število ali alfanumerični niz ali URL HTTP."

V vhodnem preverjanju vhodnega vmesnika je naša naloga razumne omejitve na vnosu uporabnika. Funkcija preverjanja omejitev HTML5 nam omogoča, da to storimo.

Validacija omejitve HTML5

Pred HTML5 so bili razvijalci frontendov omejeni na preverjanje vnosa uporabnika z JavaScriptom, ki je bil dolgočasen in nagnjen k napakam. Za izboljšanje preverjanja obrazcev na strani odjemalca je HTML5 uvedel a potrditev omejitev algoritem, ki deluje v sodobnih brskalnikih, in preverja veljavnost predloženega vnosa.

Za izvedbo ocene uporablja algoritem atributi vnosnih elementov, povezanih z validacijo, kot naprimer , </code>, in <code><select></code>. Če želite izvedeti, kako se preverjanje veljavnosti omejitev dogaja korak za korakom v brskalniku, preverite ta dokument WhatWG.</p> <p>Zahvaljujoč funkciji za preverjanje omejitev HTML5 lahko izvedemo vse <strong>standardne naloge validacije vhodov</strong> na strani odjemalca <strong>brez JavaScripta, samo s HTML5</strong>.</p> <p>Za izvedbo zahtevnejših opravil, povezanih s preverjanjem, nam HTML5 nudi a <strong>API za preverjanje veljavnosti omejitve</strong> lahko uporabimo za nastavitev skriptov za preverjanje po meri.</p> <h4>Preverjanje veljavnosti s semantičnimi vnosnimi tipi</h4> <p>HTML5 je uveden <strong>semantični vhodni tipi</strong> da se - poleg navedbe pomena elementa za uporabniške agente - lahko uporablja tudi <strong>preverite vnos uporabnika</strong> z omejevanjem uporabnikov na določeno obliko vnosa.</p> <p>Poleg vhodnih tipov, ki so že obstajali pred HTML5 (<code>besedilo</code>, <code>geslo</code>, <code>predložiti</code>, <code>ponastaviti</code>, <code>radio</code>, <code>potrditveno polje</code>, <code>gumb</code>, <code>skrito</code>), lahko uporabimo tudi naslednje <strong>semantični HTML5 vhodni tipi</strong>: <code>E-naslov</code>,<code>tel</code>,<code>url</code>,<code>številko</code>,<code>čas</code>,<code>datum</code>,<code>Datum čas</code>,<code>datetime-local</code>, <code>mesec</code>,<code>tedna</code>, <code>območju</code>, <code>Iskanje</code>,<code>barve</code>.</p> <p>S starejšimi brskalniki lahko varno uporabljamo vhodne tipe HTML5, saj se bodo obnašali kot <code><input type="text"></code> v brskalnikih, ki jih ne podpirajo.</p> <p>Poglejmo, kaj se zgodi, ko uporabnik vnese napačno vrsto vnosa. Recimo, da smo ustvarili vnosno polje z naslednjo kodo:</p> <pre name="code"> <form name="form" action="#" method="post"> <label for="youremail">Vaš e-poštni naslov:</label> <input type="email" name="email"> <input type="submit" value="Submit"> </form> </pre> <p>Ko uporabnik vnese niz, ki ne uporablja oblike e-pošte, uporabi algoritem za preverjanje omejitev <strong>obrazec ni bil poslan</strong>, in <strong>vrne sporočilo o napaki</strong>:</p> <figure> <img src="//savtec.org/img/images_1/intro-into-html5-constraint-validation.jpg"></figure><p>Enako pravilo velja tudi za druge vrste vnosov, na primer za <code>type = "url"</code> uporabniki lahko predložijo samo vnos, ki sledi formatu URL (začne se s protokolom, kot je <code>http: //</code> ali <code>ftp: //</code>).</p> <p>Nekateri vhodni tipi uporabljajo obliko, ki <strong>uporabnikom ne dovoljuje niti vnos napačne oblike vnosa</strong>, na primer <code>barve</code> in <code>območju</code>.</p> <pre name="code"> <form name="form" action="#" method="post"> <label for="bgcol">Barva ozadja:</label> <input type="color" name="color"> <input type="submit" value="Submit"> </form> </pre> <p>Če uporabimo <code>barve</code> vhodni tip je uporabnik omejen na izbiro barve iz izbirnika barv ali bivanje s privzeto črno barvo. Polje za vnos je <strong>oblikovan</strong>, zato ne pušča veliko možnosti za napako uporabnika.</p> <figure> <img src="//savtec.org/img/images_1/intro-into-html5-constraint-validation_2.jpg"></figure><p>Ko je to primerno, je vredno razmisliti o uporabi <code><select></code> Oznaka HTML, ki deluje podobno kot ti vhodni tipi, ki so omejeni glede na obliko; uporabnikom omogoča izbiro iz spustnega seznama.</p> <pre name="code"> <form name="form" action="#" method="post"> <label for="favfruit">Vaše najljubše sadje:</label> <select name="fruit"> <option value="apple">Apple</option> <option value="pear">Kruška</option> <option value="orange">Oranžna</option> <option value="raspberry">Malina</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>Uporabite atribute za preverjanje veljavnosti HTML5</h4> <p>Uporaba semantičnih vhodnih vrst določa določene omejitve glede tega, kaj lahko uporabniki oddajo, vendar v mnogih primerih želimo iti malo dlje. To je takrat, ko <strong>atributi, povezani z validacijo</strong> od <code><input></code> nam lahko pomaga.</p> <p>Atributi, povezani s preverjanjem, pripadajo določenim vrstam vnosov (ne morejo se uporabljati za <em>vse</em> vrste, na katere nalagajo dodatne omejitve.</p> <h5>1. <code>potrebno</code> za vse veljavne vnose</h5> <p>The <code>potrebno</code> atribut je najbolj znani atribut validacije HTML. Je <strong>boolean atribut</strong> kar pomeni <strong>nima nobene vrednosti</strong>, preprosto ga moramo postaviti v notranjost <code><input></code> označite, če ga želimo uporabiti:</p> <pre name="code"> <input type="email" name="email" required> </pre> <p>Če uporabnik pozabi vnesti vrednost v zahtevano vnosno polje, brskalnik <strong>vrne sporočilo o napaki</strong> ki jih opozarja, naj izpolnijo polje, in to <strong>obrazca ne morete poslati</strong> dokler ne zagotovijo veljavnega vnosa. Zato je vedno pomembno <strong>vizualno označite</strong> zahtevana polja za uporabnike.</p> <p>The <code>potrebno</code> atribut <strong>skupaj z naslednjimi vhodnimi tipi</strong>: <code>besedilo</code>, <code>Iskanje</code>, <code>url</code>, <code>tel</code>, <code>E-naslov</code>, <code>geslo</code>, <code>datum</code>, <code>Datum čas</code>, <code>datetime-local</code>, <code>mesec</code>, <code>tedna</code>,<code>čas</code>, <code>številko</code>, <code>potrditveno polje</code>, <code>radio</code>, <code>mapa</code>, plus z <code><textarea></code>in <code><select></code> HTML oznake.</p> <h5>2. <code>min</code>, <code>maks</code> in <code>korak</code> za preverjanje števila</h5> <p>The <code>min</code>, <code>maks</code> in <code>korak</code> atributi nam omogočajo <strong>omejitve na polja za vnos številk</strong>. Lahko se uporabljajo skupaj z <code>območju</code>, <code>številko</code>, <code>datum</code>, <code>mesec</code>, <code>tedna</code>, <code>Datum čas</code>, <code>datetime-local</code>, in <code>čas</code> vrste vnosov.</p> <p>The <code>min</code> in <code>maks</code> atributi zagotavljajo odličen način za enostavno <strong>izključiti nerazumne podatke</strong>. Na primer spodnji primer prisili uporabnike, da predložijo starost med 18 in 120 let.</p> <pre name="code"> <form name="form" action="#" method="post"> <label for="yourage">Tvoja starost:</label> <input type="number" name="age" min="18" max="120"> <input type="submit" value="Submit"> </form> </pre> <p>Ko algoritem za preverjanje omejitve naleti na vhod uporabnika, manjši od <code>min</code>, ali večji od <code>maks</code> vrednost, preprečuje, da bi dosegel backend, in vrne sporočilo o napaki.</p> <figure> <img src="//savtec.org/img/images_1/intro-into-html5-constraint-validation_4.jpg"></figure><p>The <code>korak</code> atribut <strong>določa numerični interval</strong> med pravnimi vrednostmi številskega polja za vnos. Na primer, če želimo, da uporabniki izbirajo samo iz prestopnih let, lahko dodamo <code>korak = "4"</code> atribut polja. V spodnjem primeru sem uporabil <code>številko</code> vrsto vnosa, ker ni <code>type = "year"</code> v HTML5.</p> <pre name="code"> <form name="form" action="#" method="post"> <label for="yourleapyear">Vaše priljubljeno prestopno leto:</label> <input type="number" name="leapyear" min="1972" max="2016" step="4"> <input type="submit" value="Submit"> </form> </pre> <p>Z vnaprej določenimi omejitvami lahko uporabniki izberejo le prestopna leta med letoma 1972 in 2016, če uporabijo malo puščico navzgor, ki je priložena <code>številko</code> vrsto vnosa. Prav tako lahko ročno vnesejo vrednost v vnosno polje, vendar v primeru, da ne ustreza omejitvam, bo brskalnik vrnil sporočilo o napaki.</p> <figure> <img src="//savtec.org/img/images_1/intro-into-html5-constraint-validation.gif"></figure><h5>3. <code>maxlength</code> za validacijo dolžine besedila</h5> <p>The <code>maxlength</code> atribut omogoča <strong>nastavite največjo dolžino znaka</strong> za besedilna polja za vnos. Lahko se uporablja skupaj z <code>besedilo</code>, <code>Iskanje</code>, <code>url</code>, <code>tel</code>, <code>E-naslov</code> in <code>geslo</code> vrste vnosov in z <code><textarea></code> Oznaka HTML.</p> <p>The <code>maxlength</code> atribut je lahko odlična rešitev za polja telefonskih številk, ki ne smejo imeti več kot določeno število znakov, ali za obrazce za stike, kjer ne želimo, da uporabniki pišejo več kot določeno dolžino.</p> <p>Odrezek kode spodaj prikazuje primer za slednje, saj omejuje uporabniška sporočila na 500 znakov. </p> <pre name="code"> <form name="form" action="#" method="post"> <label for="yourmsg">Sporočilo (največ 500 znakov):</label> <textarea name="msg" cols="25" rows="4" maxlength="500">

The maxlength atribut se ne vrne sporočilo o napaki, vendar brskalnik preprosto ne dovoli uporabnikom, da vnesejo več kot določeno število znakov. Zato je ključnega pomena obveščanje uporabnikov o omejitvi, drugače ne bodo razumeli, zakaj ne morejo nadaljevati s tipkanjem.

 
 * Tvoje geslo: