Intro į HTML5 suvaržymo patvirtinimą

Interaktyvių svetainių ir programų negalima įsivaizduoti be formų, kurios leistų mums susisiekite su mūsų naudotojais, ir gauti duomenis mums reikia, kad būtų užtikrintas sklandus sandoris su jais. Mums reikia galiojantis naudotojo įvestis, tačiau mes turime tai įgyti tokiu būdu netrukdo mūsų vartotojai per daug.

Nors galime patobulinti mūsų formų naudingumą išmaniai pasirinktais UX dizaino modeliais, HTML5 taip pat turi vietinį suvaržymo patvirtinimo mechanizmą, kuris leidžia mums sugauti įvesties klaidas tiesiai į priekį.

Šiame pranešime daugiausia dėmesio skirsime naršyklės pateikto suvaržymo patvirtinimas, ir pažiūrėkite, kaip gali „frontend“ kūrėjai saugi vartotojo įvestis naudojant HTML5.

Kodėl mums reikia Front-End Input Validation

Įvesties patvirtinimas turi du pagrindinius tikslus. Turimas turinys turi būti:

1. Naudinga

Mums reikia naudingi duomenys, su kuriais galime dirbti. Turime įvesti žmones realistiškus duomenis tinkamu formatu. Pavyzdžiui, niekas, kuris šiandien gyvas, gimė prieš 200 metų. Kaip gauti tokius duomenis, iš pradžių gali atrodyti juokinga, bet ilgainiui tai erzina, o mūsų duomenų bazėje gyvena nenaudingi duomenys.

2. Saugoma

Kalbant apie saugumą, tai reiškia, kad turime užkirsti kelią kenkėjiškam turiniui - tyčia ar atsitiktinai.

Galima pasiekti naudingumą (gauti pagrįstus duomenis) tik kliento pusėje, „backend“ komanda negali padėti per daug. Norėdami pasiekti saugumą, priekiniai ir „backend“ kūrėjai turi dirbti kartu.

Jei Frontend kūrėjai tinkamai patvirtina įvestį kliento pusėje, „backend“ komanda turės susidoroti su daug mažiau pažeidžiamumu. Daužimas (svetainė) dažnai reiškia pateikti papildomus duomenis, arba netinkamo formato duomenys. Kūrėjai gali kovoti su tokiomis saugumo skylėmis, sėkmingai kovoti nuo priekinės dalies.

Pavyzdžiui, šis PHP saugos vadovas rekomenduoja patikrinti viską, ką galime kliento pusėje. Jie pabrėžia, kaip svarbu, kad įvesties įvedimas būtų patvirtintas daugeliu pavyzdžių, pavyzdžiui:

„Įvesties patvirtinimas geriausiai veikia su labai ribotomis reikšmėmis, pvz., Kai kažkas turi būti sveikasis skaičius, arba raidinė skaitmeninė eilutė arba HTTP URL.“

Frontend įvesties patvirtinime mūsų užduotis yra nustatyti pagrįstus suvaržymus vartotojo įvesties. HTML5 apribojimo patvirtinimo funkcija suteikia mums galimybę tai padaryti.

HTML5 apribojimų patvirtinimas

Prieš HTML5, „Frontend“ kūrėjai apsiribojo vartotojo įvesties patvirtinimas su „JavaScript“, kuris buvo varginantis ir klaidingas procesas. Norėdami pagerinti kliento pusės formos patvirtinimą, HTML5 įdiegė a apribojimo patvirtinimas algoritmas, kuris veikia šiuolaikinėse naršyklėse, ir. \ t patikrina pateiktos informacijos teisingumą.

Įvertinimui atlikti algoritmas naudoja su įėjimu susijusių elementų atributai, toks kaip , </code>, ir <code><select></code>. Jei norite žinoti, kaip apribojimai patvirtinami naršyklėje, patikrinkite šį WhatWG doc.</p> <p>HTML5 suvaržymo patvirtinimo funkcijos dėka galime atlikti visus <strong>standartinės įvesties patikros užduotys</strong> kliento pusėje <strong>be „JavaScript“, tik su HTML5</strong>.</p> <p>Norėdami atlikti sudėtingesnius su patvirtinimu susijusius uždavinius, HTML5 suteikia mums a <strong>Apribojimų patvirtinimo „JavaScript“ API</strong> galime naudoti, kad nustatytume savo pasirinktinius patvirtinimo scenarijus.</p> <h4>Patvirtinkite su semantiniais įvesties tipais</h4> <p>Įdiegtas HTML5 <strong>semantinių įvesties tipų</strong> taip pat gali būti panaudota, be to, nurodant elemento reikšmę naudotojų agentams <strong>patvirtinti naudotojo įvestį</strong> ribojant vartotojus tam tikru įvesties formatu.</p> <p>Be įvesties tipų, kurie jau egzistavo prieš HTML5 (<code>tekstą</code>, <code>Slaptažodis</code>, <code>Pateikti</code>, <code>atstatyti</code>, <code>radijo</code>, <code>žymimasis langelis</code>, <code>mygtukas</code>, <code>paslėpta</code>), taip pat galime naudoti šiuos dalykus <strong>semantiniai HTML5 įvesties tipai</strong>: <code>el</code>,<code>tel</code>,<code>URL</code>,<code>numeris</code>,<code>laikas</code>,<code>data</code>,<code>datetime</code>,<code>datetime-local</code>, <code>mėnesį</code>,<code>savaitę</code>, <code>diapazonas</code>, <code>Paieška</code>,<code>spalva</code>.</p> <p>Mes galime saugiai naudoti HTML5 įvesties tipus su senesnėmis naršyklėmis, nes jos elgsis kaip <code><input type="text"></code> naršyklėse, kurios jų nepalaiko.</p> <p>Pažiūrėkime, kas atsitiks, kai vartotojas įves neteisingą įvesties tipą. Pasakykite, kad sukūrėme el. Pašto įvedimo lauką su šiuo kodu:</p> <pre name="code"> <form name="form" action="#" method="post"> <label for="youremail">Tavo elektroninis paštas:</label> <input type="email" name="email"> <input type="submit" value="Submit"> </form> </pre> <p>Kai vartotojas įveda eilutę, kuri nenaudoja el. Pašto formato, apribojimo patvirtinimo algoritmas <strong>nepateikia formos</strong>, ir <strong>grąžina klaidos pranešimą</strong>:</p> <figure> <img src="//savtec.org/img/images_1/intro-into-html5-constraint-validation.jpg"></figure><p>Ta pati taisyklė taikoma ir kitiems įvesties tipams, pavyzdžiui, <code>type = "url"</code> vartotojai gali pateikti tik įvestį, kuris atitinka URL formatą (prasideda protokolu, pvz., <code>http: //</code> arba <code>ftp: //</code>).</p> <p>Kai kurie įvesties tipai naudoja dizainą <strong>net neleidžia vartotojams įvesti neteisingo įvesties formato</strong>, pavyzdžiui <code>spalva</code> ir <code>diapazonas</code>.</p> <pre name="code"> <form name="form" action="#" method="post"> <label for="bgcol">Fono spalva:</label> <input type="color" name="color"> <input type="submit" value="Submit"> </form> </pre> <p>Jei mes naudojame <code>spalva</code> įvesties tipas, vartotojas yra pasirengęs pasirinkti spalvą iš spalvų rinkiklio arba likti su juoda juoda spalva. Įvesties laukas yra <strong>dizainas</strong>, todėl jis nepalieka daug galimybių naudotojo klaidoms.</p> <figure> <img src="//savtec.org/img/images_1/intro-into-html5-constraint-validation_2.jpg"></figure><p>Kai tai tikslinga, verta apsvarstyti galimybę naudoti <code><select></code> HTML žyma, kuri veikia panašiai kaip į šiuos apribojimus pagal įvesties tipus; jis leidžia vartotojams pasirinkti iš išskleidžiamojo sąrašo.</p> <pre name="code"> <form name="form" action="#" method="post"> <label for="favfruit">Jūsų mėgstami vaisiai:</label> <select name="fruit"> <option value="apple">Apple</option> <option value="pear">Kriaušės</option> <option value="orange">Oranžinė</option> <option value="raspberry">Aviečių</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>Naudokite HTML5 patvirtinimo atributus</h4> <p>Semantinių įvesties tipų naudojimas nustato tam tikrus suvaržymus, kuriuos vartotojai gali pateikti, tačiau daugeliu atvejų mes norime šiek tiek toliau eiti. Tai yra tada, kai <strong>su patvirtinimu susiję atributai</strong> iš <code><input></code> žyma gali mums padėti.</p> <p>Su patvirtinimu susiję atributai priklauso tam tikriems įvesties tipams (jie negali būti naudojami <em>visi</em> tipai), kuriais jie nustato papildomus apribojimus.</p> <h5>1. <code>reikalaujama</code> visomis priemonėmis gauti teisingą įvestį</h5> <p>The <code>reikalaujama</code> atributas yra labiausiai žinomas HTML patvirtinimo atributas. Tai yra <strong>Būlio atributas</strong> tai reiškia <strong>neturi jokios vertės</strong>, mes tiesiog turime jį patalpinti <code><input></code> žyma, jei norime ją naudoti:</p> <pre name="code"> <input type="email" name="email" required> </pre> <p>Jei naudotojas pamiršo įvesti vertę į reikiamą įvesties lauką, naršyklė <strong>grąžina klaidos pranešimą</strong> tai įspėja juos užpildyti lauką, ir jie <strong>negali pateikti formos</strong> kol jie pateiks galiojančią informaciją. Štai kodėl visada svarbu <strong>vizualiai pažymėkite</strong> naudotojams reikalingus laukus.</p> <p>The <code>reikalaujama</code> atributas gali būti <strong>naudojami kartu su šiais įvesties tipais</strong>: <code>tekstą</code>, <code>Paieška</code>, <code>URL</code>, <code>tel</code>, <code>el</code>, <code>Slaptažodis</code>, <code>data</code>, <code>datetime</code>, <code>datetime-local</code>, <code>mėnesį</code>, <code>savaitę</code>,<code>laikas</code>, <code>numeris</code>, <code>žymimasis langelis</code>, <code>radijo</code>, <code>failą</code>, plius su <code><textarea></code>ir <code><select></code> HTML žymės.</p> <h5>2. <code>min</code>, <code>maks</code> ir <code>žingsnis</code> skaičiaus patvirtinimui</h5> <p>The <code>min</code>, <code>maks</code> ir <code>žingsnis</code> atributai leidžia mums <strong>apriboti skaičių įvesties laukus</strong>. Jie gali būti naudojami kartu su <code>diapazonas</code>, <code>numeris</code>, <code>data</code>, <code>mėnesį</code>, <code>savaitę</code>, <code>datetime</code>, <code>datetime-local</code>, ir <code>laikas</code> įvesties tipai.</p> <p>The <code>min</code> ir <code>maks</code> atributai yra puikus būdas lengvai <strong>neįtraukti nepagrįstų duomenų</strong>. Pavyzdžiui, toliau pateikiamas pavyzdys verčia vartotojus pateikti amžių nuo 18 iki 120 metų.</p> <pre name="code"> <form name="form" action="#" method="post"> <label for="yourage">Tavo amžius:</label> <input type="number" name="age" min="18" max="120"> <input type="submit" value="Submit"> </form> </pre> <p>Kai suvaržymo patvirtinimo algoritmas susitraukia į vartotojo įvestį, mažesnę nei <code>min</code>, arba didesnis nei <code>maks</code> reikšmė, ji neleidžia jam pasiekti backend ir grąžina klaidos pranešimą.</p> <figure> <img src="//savtec.org/img/images_1/intro-into-html5-constraint-validation_4.jpg"></figure><p>The <code>žingsnis</code> atributas <strong>nurodo skaitinį intervalą</strong> tarp skaitmeninio įvesties lauko teisinių vertybių. Pavyzdžiui, jei norime, kad vartotojai rinktųsi tik iš šuolių metų, galime pridėti <code>step = "4"</code> atributas laukui. Toliau pateiktame pavyzdyje naudoju <code>numeris</code> įvesties tipas, nes nėra <code>type = "year"</code> HTML5.</p> <pre name="code"> <form name="form" action="#" method="post"> <label for="yourleapyear">Jūsų mėgstamiausia šuolių metai:</label> <input type="number" name="leapyear" min="1972" max="2016" step="4"> <input type="submit" value="Submit"> </form> </pre> <p>Naudodamiesi iš anksto nustatytais apribojimais, vartotojai gali pasirinkti tik nuo 1972 m. Iki 2016 m. <code>numeris</code> įvesties tipas. Jie taip pat gali įvesti vertę rankiniu būdu į įvesties lauką, tačiau jei jis neatitinka apribojimų, naršyklė grąžins klaidos pranešimą.</p> <figure> <img src="//savtec.org/img/images_1/intro-into-html5-constraint-validation.gif"></figure><h5>3. <code>Didžiausias ilgis</code> teksto ilgio patvirtinimui</h5> <p>The <code>Didžiausias ilgis</code> atributas leidžia <strong>nustatyti maksimalų simbolių ilgį</strong> teksto įvesties laukams. Jis gali būti naudojamas kartu su <code>tekstą</code>, <code>Paieška</code>, <code>URL</code>, <code>tel</code>, <code>el</code> ir <code>Slaptažodis</code> įvesties tipus ir <code><textarea></code> HTML žyma.</p> <p>The <code>Didžiausias ilgis</code> atributas gali būti puikus sprendimas telefonų numerių laukams, kuriuose negali būti daugiau nei tam tikro simbolių skaičiaus, arba kontaktinių formų, kuriose nenorime, kad vartotojai rašytų daugiau nei tam tikrą ilgį.</p> <p>Toliau pateikiamas kodo fragmentas rodo pastarojo pavyzdį, jis apriboja vartotojo pranešimus iki 500 simbolių. </p> <pre name="code"> <form name="form" action="#" method="post"> <label for="yourmsg">Pranešimas (ne daugiau kaip 500 simbolių):</label> <textarea name="msg" cols="25" rows="4" maxlength="500">

The Didžiausias ilgis atributas nepateikia klaidos pranešimo, tačiau naršyklė paprasčiausiai neleidžia vartotojams įvesti daugiau nei nurodytas simbolių skaičius. Štai kodėl tai labai svarbu informuoti vartotojus apie suvaržymą, kitaip jie nesupranta, kodėl jie negali toliau rašyti.

 
 * Jūsų slaptažodis: