Intro Into HTML5 -rajoituksen validointiin

Interaktiivisia sivustoja ja sovelluksia ei voi kuvitella ilman lomakkeita, joiden avulla voimme yhteyden käyttäjien kanssa, ja saada tietoja meidän on varmistettava sujuvat liiketoimet niiden kanssa. Tarvitsemme kelvollinen käyttäjän syöttö, meidän on kuitenkin hankittava se tavallaan ei häiritse käyttäjiä liikaa.

Vaikka voimme parantaa lomakkeiden käytettävyyttä älykkäästi valituilla UX-muotoilumalleilla, HTML5: llä on myös natiivi mekanismi rajoitusten validoimiseksi, jonka avulla voimme ota syöttövirheet suoraan etupäähän.

Tässä viestissä keskitymme selaimen toimittama rajoitusvalvonta, ja tarkastella, miten frontend-kehittäjät voivat suojaa kelvollinen käyttäjän syöttö HTML5: n avulla.

Miksi tarvitsemme Front-End Input Validation

Tulon validointi on kaksi päätavoitetta. Meidän sisällön on oltava:

1. Hyödyllinen

Me tarvitsemme käyttökelpoiset tiedot, joita voimme käyttää. Meidän on saatava ihmiset pääsemään realistisia tietoja oikeassa muodossa. Esimerkiksi kukaan, joka on elossa tänään, ei syntynyt 200 vuotta sitten. Tällaisten tietojen saaminen saattaa tuntua aluksi hauska, mutta pitkällä aikavälillä se on ärsyttävää, ja tietokannassamme on hyödytöntä tietoa.

2. Turvallinen

Kun viitataan turvallisuuteen, tämä tarkoittaa sitä, että meidän täytyy estää haitallisen sisällön ruiskuttaminen - tahallisesti tai vahingossa.

Hyödyllisyys (kohtuullisten tietojen saaminen) voidaan saavuttaa vain asiakkaan puolella, backend-tiimi ei voi auttaa liikaa. Saavuttaa turvallisuus, etu- ja taustakehittäjien on työskenneltävä yhdessä.

Jos frontend-kehittäjät validoivat oikein syötteen asiakkaan puolella, backend-tiimin tulee käsitellä paljon vähemmän haavoittuvuuksia. Hakkerointi (sivusto) aiheuttaa usein lisätietoja, tai tiedot väärässä muodossa. Kehittäjät voivat torjua tällaisia turvallisuusreikiä, taistella menestyksekkäästi edestä.

Esimerkiksi tämä PHP-tietoturvaopas suosittelee tarkistamaan kaiken, mitä voimme tehdä asiakkaan puolella. He korostavat etupaneelin syöttövalidoinnin tärkeyttä antamalla monia esimerkkejä, kuten:

"Syötteen validointi toimii parhaiten erittäin rajoitettujen arvojen avulla, esim. Kun jotain on oltava kokonaisluku tai aakkosnumeerinen merkkijono tai HTTP-URL-osoite."

Frontend-syötteen validoinnissa tehtävämme on asettaa kohtuullisia rajoituksia käyttäjä syöttää. HTML5: n rajoitusten validointitoiminto tarjoaa meille keinot tehdä niin.

HTML5-rajoituksen validointi

Ennen HTML5: tä Frontend-kehittäjät rajoittuivat käyttäjän syötteen validointi JavaScriptin avulla, joka oli työläs ja virhealttiinen prosessi. HTML5 on ottanut käyttöön a rajoituksen validointi algoritmi, joka toimii nykyaikaisissa selaimissa, ja tarkistaa lähetetyn syötteen pätevyyden.

Arvioinnin suorittamiseksi algoritmi käyttää tuloelementtien validointiin liittyvät attribuutit, kuten , </code>, ja <code><select></code>. Jos haluat tietää, miten rajoitusten validointi tapahtuu selaimessa vaiheittain, tutustu tähän WhatWG-asiakirjaan.</p> <p>HTML5: n rajoitusten validointitoiminnon ansiosta voimme suorittaa kaikki <strong>vakiotulojen validointitehtävät</strong> asiakkaan puolella <strong>ilman JavaScriptiä, vain HTML5: n kanssa</strong>.</p> <p>Jos haluat suorittaa monimutkaisempia validointiin liittyviä tehtäviä, HTML5 tarjoaa meille a <strong>Rajoitusvalidoinnin JavaScript-API</strong> voimme käyttää mukautettujen validointisarjojen määrittämistä.</p> <h4>Vahvista semanttisilla syöttötyypeillä</h4> <p>HTML5 on ottanut käyttöön <strong>semanttiset syötetyypit</strong> että - lukuun ottamatta käyttäjälle tarkoitettujen tekijöiden elementin merkityksen ilmaisemista - voidaan myös käyttää <strong>validoi käyttäjän syöttö</strong> rajoittamalla käyttäjiä tiettyyn tulomuotoon.</p> <p>Ennen HTML5: tä jo olemassa olevien syöttötyyppien lisäksi<code>teksti</code>, <code>Salasana</code>, <code>Lähetä</code>, <code>asettaa uudelleen</code>, <code>radio</code>, <code>valintaruutu</code>, <code>nappi</code>, <code>kätketty</code>), voimme myös käyttää seuraavia <strong>semanttiset HTML5-tulotyypit</strong>: <code>sähköposti</code>,<code>puh</code>,<code>url</code>,<code>määrä</code>,<code>aika</code>,<code>Treffi</code>,<code>treffiaika</code>,<code>datetime-local</code>, <code>kuukausi</code>,<code>viikko</code>, <code>alue</code>, <code>Hae</code>,<code>väri-</code>.</p> <p>Voimme turvallisesti käyttää HTML5-tulotyyppejä vanhemmilla selaimilla, koska ne käyttäytyvät <code><input type="text"></code> kentässä selaimissa, jotka eivät tue niitä.</p> <p>Katsotaan mitä tapahtuu, kun käyttäjä syöttää väärän syöttötyypin. Sano, että olemme luoneet sähköpostin syöttökentän, jossa on seuraava koodi:</p> <pre name="code"> <form name="form" action="#" method="post"> <label for="youremail">Sähköpostisi:</label> <input type="email" name="email"> <input type="submit" value="Submit"> </form> </pre> <p>Kun käyttäjä kirjoittaa merkkijonon, joka ei käytä sähköpostimuotoa, rajoituksen validointialgoritmi <strong>ei lähetä lomaketta</strong>, ja <strong>palauttaa virhesanoman</strong>:</p> <figure> <img src="//savtec.org/img/images_1/intro-into-html5-constraint-validation.jpg"></figure><p>Sama sääntö koskee myös muita syöttötyyppejä, esimerkiksi <code>"url"</code> käyttäjät voivat lähettää vain URL-muodossa noudatettavan tulon (alkaa protokollalla, kuten <code>http: //</code> tai <code>ftp: //</code>).</p> <p>Jotkin tulotyypit käyttävät muotoilua <strong>ei edes anna käyttäjien syöttää väärää syöttömuotoa</strong>, esimerkiksi <code>väri-</code> ja <code>alue</code>.</p> <pre name="code"> <form name="form" action="#" method="post"> <label for="bgcol">Taustaväri:</label> <input type="color" name="color"> <input type="submit" value="Submit"> </form> </pre> <p>Jos käytämme <code>väri-</code> syötetyyppi, käyttäjä on joko valinnut värinvalitsimesta värin tai pysyvän mustalla mustalla. Syöttökenttä on <strong>muotoilu rajoittuu</strong>, siksi se ei jätä paljon mahdollisuuksia käyttäjän virheisiin.</p> <figure> <img src="//savtec.org/img/images_1/intro-into-html5-constraint-validation_2.jpg"></figure><p>Kun se on tarkoituksenmukaista, kannattaa harkita sitä <code><select></code> HTML-tunniste, joka toimii samalla tavalla kuin nämä rajoitetun mallin syöttötyypit; sen avulla käyttäjät voivat valita avattavasta luettelosta.</p> <pre name="code"> <form name="form" action="#" method="post"> <label for="favfruit">Suosikki hedelmät:</label> <select name="fruit"> <option value="apple">Omena</option> <option value="pear">Päärynä</option> <option value="orange">Oranssi</option> <option value="raspberry">Vadelma</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>Käytä HTML5: n vahvistusominaisuuksia</h4> <p>Semanttisten syöttötyyppien käyttäminen asettaa tiettyjä rajoituksia sille, mitä käyttäjät voivat esittää, mutta monissa tapauksissa haluamme mennä hieman pidemmälle. Tämä on silloin, kun <strong>validointiin liittyvät attribuutit</strong> n <code><input></code> tunniste voi auttaa meitä ulos.</p> <p>Validointiin liittyvät attribuutit kuuluvat tiettyihin tulotyyppeihin (niitä ei voi käyttää <em>kaikki</em> tyyppejä), joihin ne asettavat lisää rajoituksia.</p> <h5>1. <code>vaaditaan</code> saada kelvollinen syöttö kaikin keinoin</h5> <p> <code>vaaditaan</code> attribuutti on tunnetuin HTML-vahvistusmäärite. Se on a <strong>boolean-määrite</strong> mikä tarkoittaa sitä <strong>ei ota mitään arvoa</strong>, meidän on vain asetettava se sisään <code><input></code> tunniste, jos haluamme käyttää sitä:</p> <pre name="code"> <input type="email" name="email" required> </pre> <p>Jos käyttäjä unohtaa syöttää arvon vaadittuun syöttökenttään, selain <strong>palauttaa virhesanoman</strong> joka varoittaa heitä täyttämään kentän, ja ne <strong>ei voi lähettää lomaketta</strong> kunnes ne ovat antaneet kelvollisen syötteen. Siksi on aina tärkeää <strong>merkitse visuaalisesti</strong> pakolliset kentät käyttäjille.</p> <p> <code>vaaditaan</code> määrite voi olla <strong>käytetään seuraavien syöttötyyppien kanssa</strong>: <code>teksti</code>, <code>Hae</code>, <code>url</code>, <code>puh</code>, <code>sähköposti</code>, <code>Salasana</code>, <code>Treffi</code>, <code>treffiaika</code>, <code>datetime-local</code>, <code>kuukausi</code>, <code>viikko</code>,<code>aika</code>, <code>määrä</code>, <code>valintaruutu</code>, <code>radio</code>, <code>tiedosto</code>, plus <code><textarea></code>ja <code><select></code> HTML-tunnisteet.</p> <h5>2. <code>min</code>, <code>max</code> ja <code>vaihe</code> numeron validointiin</h5> <p> <code>min</code>, <code>max</code> ja <code>vaihe</code> ominaisuudet mahdollistavat <strong>asettaa rajoituksia numeron syöttökentille</strong>. Niitä voidaan käyttää yhdessä <code>alue</code>, <code>määrä</code>, <code>Treffi</code>, <code>kuukausi</code>, <code>viikko</code>, <code>treffiaika</code>, <code>datetime-local</code>, ja <code>aika</code> tulotyypit.</p> <p> <code>min</code> ja <code>max</code> ominaisuudet tarjoavat erinomaisen tavan helposti <strong>sulkea pois kohtuuttomia tietoja</strong>. Esimerkiksi alla oleva esimerkki pakottaa käyttäjät lähettämään iän 18 ja 120 vuoden välillä.</p> <pre name="code"> <form name="form" action="#" method="post"> <label for="yourage">Ikäsi:</label> <input type="number" name="age" min="18" max="120"> <input type="submit" value="Submit"> </form> </pre> <p>Kun rajoituksen validointialgoritmi törmää käyttäjän syöttöön, joka on pienempi kuin <code>min</code>, tai suurempi kuin <code>max</code> arvo, se estää sen pääsemästä taaksepäin ja palauttaa virhesanoman.</p> <figure> <img src="//savtec.org/img/images_1/intro-into-html5-constraint-validation_4.jpg"></figure><p> <code>vaihe</code> ominaisuus <strong>määrittää numeerisen aikavälin</strong> numeron syöttökentän oikeudellisten arvojen välillä. Jos esimerkiksi haluamme, että käyttäjät valitsevat vain harppuvuosista, voimme lisätä sen <code>vaihe = "4"</code> ominaisuus kenttään. Alla olevassa esimerkissä käytin <code>määrä</code> syöttötyyppi, koska ei ole <code>type = "vuosi"</code> HTML5: ssä.</p> <pre name="code"> <form name="form" action="#" method="post"> <label for="yourleapyear">Suosikkiharrastusvuosi:</label> <input type="number" name="leapyear" min="1972" max="2016" step="4"> <input type="submit" value="Submit"> </form> </pre> <p>Ennalta asetettujen rajoitusten avulla käyttäjät voivat valita vain vuosien 1972 ja 2016 välisenä aikana, jos he käyttävät pientä nuolta, joka on mukana <code>määrä</code> syötteen tyyppi. Ne voivat myös kirjoittaa arvon manuaalisesti syöttökenttään, mutta jos se ei täytä rajoituksia, selain palauttaa virhesanoman.</p> <figure> <img src="//savtec.org/img/images_1/intro-into-html5-constraint-validation.gif"></figure><h5>3. <code>Maksimi pituus</code> tekstin pituuden validointia varten</h5> <p> <code>Maksimi pituus</code> ominaisuus mahdollistaa <strong>määritä enimmäismerkin pituus</strong> tekstinsyöttökentille. Sitä voidaan käyttää yhdessä <code>teksti</code>, <code>Hae</code>, <code>url</code>, <code>puh</code>, <code>sähköposti</code> ja <code>Salasana</code> tulotyyppejä ja <code><textarea></code> HTML-tunniste.</p> <p> <code>Maksimi pituus</code> määrite voi olla erinomainen ratkaisu puhelinnumeroiden kenttiin, joissa ei voi olla enemmän kuin tietty määrä merkkejä, tai yhteystietolomakkeisiin, joissa emme halua käyttäjien kirjoittavan enemmän kuin tietty pituus.</p> <p>Alla oleva koodinpätkä näyttää esimerkin jälkimmäiselle, se rajoittaa käyttäjän viestejä 500 merkkiin. </p> <pre name="code"> <form name="form" action="#" method="post"> <label for="yourmsg">Viesti (enintään 500 merkkiä):</label> <textarea name="msg" cols="25" rows="4" maxlength="500">

Maksimi pituus ominaisuus ei palauta virheilmoitusta, mutta selain ei yksinkertaisesti anna käyttäjien kirjoittaa enemmän kuin määritelty merkkiluku. Siksi on tärkeää ilmoittaa käyttäjille rajoituksesta, muuten he eivät ymmärrä, miksi he eivät voi jatkaa kirjoittamista.

 4. kuvio Regex-tarkistusta varten
  kuvio ominaisuus antaa meille mahdollisuuden käytä säännöllisiä lausekkeita panoksemme validointiprosessissa. Säännöllinen lauseke on a ennalta määritelty merkistö jotka muodostavat tietyn mallin. Voimme käyttää sitä joko merkkijonoa hakeneiden merkkijonojen etsimiseen tai tiettyyn kuvion määrittelemään muotoon.
 Kanssa kuvio määrite, jonka voimme tehdä jälkimmäisen - rajoittaa käyttäjiä toimittamaan tulonsa muodossa vastaa säännöllistä lauseketta.
   kuvio määritteellä on monia käyttötapoja, mutta se voi olla erityisen hyödyllinen, kun haluamme vahvista salasana-kenttä.
 Alla oleva esimerkki vaatii käyttäjiä antamaan salasanan, joka on vähintään 8 merkkiä pitkä, ja sisältää vähintään yhden kirjaimen ja yhden numeron (käytetyn regexin lähde). 
   * Salasanasi:   
 
 Muutamia asioita
 Tässä artikkelissa tarkastelimme, miten voit hyödyntää selaimen toimittama lomakkeen validointi tarjoaa HTML5: n natiivi rajoitus validointialgoritmi. Kun haluat luoda mukautettuja validointiskriptejä, meidän on käytettävä Rajoitusarviointi-sovellusliittymää, joka voi olla seuraava vaihe lomakkeiden validointitaitojen jalostamisessa.
 HTML5-lomakkeet ovat saatavilla aputekniikoilla, joten meidän ei tarvitse välttämättä käyttää Aria vaatiman ARIA-määrite merkitsee näytönlukijoiden tarvittavat kentät. Voi kuitenkin olla hyödyllistä lisätä esteettömyys tukea vanhemmille selaimille. Se on myös mahdollista poista rajoitusten validointi lisäämällä novalidate boolean attribuutti 
 elementti.