Uvod u validaciju HTML5 ograničenja

Interaktivne web-lokacije i aplikacije ne mogu se zamisliti bez oblika koji nam omogućuju povežite se s našim korisnicima, i za dobiti podatke trebamo kako bismo osigurali glatke transakcije s njima. Trebamo važeći korisnički unos, međutim, trebamo ga steći na takav način ne frustrira našim korisnicima previše.

Iako možemo poboljšati upotrebljivost naših obrazaca pametno odabranim UX dizajnom, HTML5 ima i izvorni mehanizam za provjeru ograničenja koji nam omogućuje hvatanje pogrešaka unosa točno u prednjem kraju.

U ovom postu ćemo se usredotočiti na provjera valjanosti ograničenja preglednika, i pogledajte kako programeri frontendi mogu osigurajte valjani korisnički unos pomoću HTML5.

Zašto nam je potrebna ulazna provjera valjanosti

Provjera valjanosti unosa ima dva glavna cilja. Sadržaj koji dobivamo mora biti:

1. Korisno

Trebamo korisne podatke s kojima možemo raditi. Moramo natjerati ljude da uđu realne podatke u ispravnom formatu. Na primjer, nitko tko je živ danas nije rođen prije 200 godina. Dobivanje podataka kao što je ovaj možda se na prvi pogled čini smiješnim, ali dugoročno gledajući neugodno, i popunjava našu bazu podataka beskorisnim podacima.

2. Osigurajte

Kada govorimo o sigurnosti, to znači da trebamo spriječiti ubrizgavanje zlonamjernog sadržaja - namjerno ili slučajno.

Korisnost (dobivanje razumnih podataka) može se postići samo na strani klijenta, backend tim ne može previše pomoći s tim. Postići sigurnosti, prednji i stražnji programeri moraju raditi zajedno.

Ako developeri ispravno potvrde unos na strani klijenta, tim će se morati nositi s mnogo manje ranjivosti. Hakiranje (stranica) često povlači za sobom slanje dodatnih podataka, ili podataka u pogrešnom formatu. Programeri se mogu boriti protiv sigurnosnih rupa poput ovih, uspješno se bore s front-end.

Na primjer, ovaj PHP vodič za sigurnost preporučuje da provjerite sve što možemo na strani klijenta. Oni naglašavaju važnost validacije ulaznog sučelja tako da daju brojne primjere, kao što su:

"Ulazna provjera valjanosti najbolje funkcionira s iznimno ograničenim vrijednostima, npr. Kada nešto mora biti cijeli broj ili alfanumerički niz ili HTTP URL."

U validaciji ulaznog sučelja naš je posao nametnuti razumna ograničenja na korisničkom unosu. Značajka validacije ograničenja HTML5 omogućuje nam da to učinimo.

Validacija HTML5 ograničenja

Prije HTML5, programeri su bili ograničeni na provjera valjanosti korisničkog unosa pomoću JavaScripta, što je bio dosadan i sklon pogreškama. Kako bi poboljšao provjeru obrazaca na strani klijenta, HTML5 je uveo a validacija ograničenja algoritam koji se izvodi u modernim preglednicima i provjerava valjanost dostavljenog unosa.

Za procjenu, algoritam koristi atributi koji se odnose na validaciju ulaznih elemenata, kao što su , </code>, i <code><select></code>. Ako želite znati kako se provjera ograničenja događa korak po korak u pregledniku, pogledajte ovaj WhatWG dokument.</p> <p>Zahvaljujući značajci provjere ograničenja HTML5, možemo izvršiti sve <strong>zadaci standardne validacije ulaza</strong> na strani klijenta <strong>bez JavaScripta, samo s HTML5</strong>.</p> <p>Za izvođenje složenijih zadataka vezanih uz provjeru valjanosti, HTML5 nam daje a <strong>JavaScript API za provjeru ograničenja</strong> možemo koristiti za postavljanje prilagođenih skripti za provjeru valjanosti.</p> <h4>Potvrdite s tipovima semantičkog ulaza</h4> <p>HTML5 je uveden <strong>tipovi semantičkih ulaza</strong> da - osim ukazivanja na značenje elementa za korisničke agente - također se može koristiti <strong>provjera valjanosti korisničkog unosa</strong> ograničavanjem korisnika na određeni ulazni format.</p> <p>Osim tipova ulaza koji su već postojali prije HTML5 (<code>tekst</code>, <code>zaporka</code>, <code>podnijeti</code>, <code>reset</code>, <code>radio</code>, <code>okvir</code>, <code>dugme</code>, <code>skriven</code>), također možemo koristiti sljedeće <strong>semantičke HTML5 vrste unosa</strong>: <code>e</code>,<code>tel</code>,<code>uRL</code>,<code>broj</code>,<code>vrijeme</code>,<code>datum</code>,<code>Datum vrijeme</code>,<code>datetime-lokalne</code>, <code>mjesec</code>,<code>tjedan</code>, <code>opseg</code>, <code>traži</code>,<code>boja</code>.</p> <p>Sa starijim preglednicima možemo sigurno koristiti HTML5 tipove ulaza jer će se ponašati kao <code><input type="text"></code> u preglednicima koji ih ne podržavaju.</p> <p>Pogledajmo što se događa kada korisnik unese pogrešan tip unosa. Recimo da smo stvorili polje za unos e-pošte sa sljedećim kodom:</p> <pre name="code"> <form name="form" action="#" method="post"> <label for="youremail">Tvoj email:</label> <input type="email" name="email"> <input type="submit" value="Submit"> </form> </pre> <p>Kada korisnik upiše niz koji ne koristi format e-pošte, algoritam validacije ograničenja <strong>ne šalje obrazac</strong>, i <strong>vraća poruku o pogrešci</strong>:</p> <figure> <img src="//savtec.org/img/images_1/intro-into-html5-constraint-validation.jpg"></figure><p>Isto pravilo vrijedi i za druge vrste unosa, primjerice za <code>type = "url"</code> korisnici mogu poslati samo unos koji slijedi URL format (počinje s protokolom, kao što je <code>http: //</code> ili <code>ftp: //</code>).</p> <p>Neki tipovi ulaza koriste dizajn koji <strong>korisnicima čak ne dopušta unos pogrešnog formata unosa</strong>, na primjer <code>boja</code> i <code>opseg</code>.</p> <pre name="code"> <form name="form" action="#" method="post"> <label for="bgcol">Boja pozadine:</label> <input type="color" name="color"> <input type="submit" value="Submit"> </form> </pre> <p>Ako koristimo <code>boja</code> Ulazni tip korisnika ograničen je na odabir boje iz odabira boje ili zadržavanje s zadanom crnom bojom. Polje za unos je <strong>ograničena dizajnom</strong>, stoga ne ostavlja mnogo šanse za korisničku pogrešku.</p> <figure> <img src="//savtec.org/img/images_1/intro-into-html5-constraint-validation_2.jpg"></figure><p>Kada je to prikladno, vrijedi razmotriti korištenje <code><select></code> HTML oznaka koja radi slično tim vrstama unosa ograničenih po dizajnu; korisnicima omogućuje odabir s padajućeg popisa.</p> <pre name="code"> <form name="form" action="#" method="post"> <label for="favfruit">Vaše omiljeno voće:</label> <select name="fruit"> <option value="apple">Jabuka</option> <option value="pear">Kruška</option> <option value="orange">narančasta</option> <option value="raspberry">kupina</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>Koristite HTML5-ove atribute provjere valjanosti</h4> <p>Korištenje semantičkih ulaznih tipova postavlja određena ograničenja na ono što je korisnicima dopušteno poslati, ali u mnogim slučajevima želimo ići malo dalje. Ovo je kada <strong>atributi povezani s provjerom valjanosti</strong> od <code><input></code> može nam pomoći.</p> <p>Atributi povezani s provjerom valjanosti pripadaju određenim vrstama unosa (ne mogu se koristiti na <em>svi</em> vrste) na kojima nameću dodatna ograničenja.</p> <h5>1. <code>potreban</code> za dobivanje valjanih unosa svim sredstvima</h5> <p> <code>potreban</code> atribut je najpoznatiji atribut HTML provjere valjanosti. To je <strong>boolean atribut</strong> što znači <strong>ne uzima nikakvu vrijednost</strong>, jednostavno je moramo smjestiti u <code><input></code> označite ako ga želimo koristiti:</p> <pre name="code"> <input type="email" name="email" required> </pre> <p>Ako korisnik zaboravi unijeti vrijednost u traženo polje za unos, preglednik <strong>vraća poruku o pogrešci</strong> koji ih upozorava da popune polje, i oni <strong>ne može poslati obrazac</strong> dok ne pruže valjani unos. Zato je uvijek važno <strong>označiti vizualno</strong> obavezna polja za korisnike.</p> <p> <code>potreban</code> atribut može biti <strong>zajedno s sljedećim vrstama ulaza</strong>: <code>tekst</code>, <code>traži</code>, <code>uRL</code>, <code>tel</code>, <code>e</code>, <code>zaporka</code>, <code>datum</code>, <code>Datum vrijeme</code>, <code>datetime-lokalne</code>, <code>mjesec</code>, <code>tjedan</code>,<code>vrijeme</code>, <code>broj</code>, <code>okvir</code>, <code>radio</code>, <code>datoteka</code>, plus uz <code><textarea></code>i <code><select></code> HTML oznake.</p> <h5>2. <code>min</code>, <code>maksimum</code> i <code>korak</code> za provjeru broja</h5> <p> <code>min</code>, <code>maksimum</code> i <code>korak</code> atributi omogućuju nam <strong>staviti ograničenja na polja za unos brojeva</strong>. Mogu se koristiti zajedno s <code>opseg</code>, <code>broj</code>, <code>datum</code>, <code>mjesec</code>, <code>tjedan</code>, <code>Datum vrijeme</code>, <code>datetime-lokalne</code>, i <code>vrijeme</code> vrste unosa.</p> <p> <code>min</code> i <code>maksimum</code> atributi pružaju sjajan način za lako <strong>isključiti nerazumne podatke</strong>. Primjerice, primjer ispod prisiljava korisnike da podnesu dob između 18 i 120 godina.</p> <pre name="code"> <form name="form" action="#" method="post"> <label for="yourage">Tvoje godine:</label> <input type="number" name="age" min="18" max="120"> <input type="submit" value="Submit"> </form> </pre> <p>Kada algoritam validacije ograničenja naleti na korisnički unos manji od <code>min</code>, ili veći od <code>maksimum</code> vrijednost, sprječava da dođe do pozadine i vraća poruku o pogrešci.</p> <figure> <img src="//savtec.org/img/images_1/intro-into-html5-constraint-validation_4.jpg"></figure><p> <code>korak</code> atribut <strong>određuje numerički interval</strong> između zakonskih vrijednosti numeričkog polja za unos. Na primjer, ako želimo da korisnici izaberu samo iz prijestupnih godina možemo dodati <code>korak = "4"</code> atribut za polje. U primjeru ispod koristio sam <code>broj</code> tip ulaza, jer nema <code>type = "godine"</code> u HTML5.</p> <pre name="code"> <form name="form" action="#" method="post"> <label for="yourleapyear">Vaša omiljena prijestupna godina:</label> <input type="number" name="leapyear" min="1972" max="2016" step="4"> <input type="submit" value="Submit"> </form> </pre> <p>S prethodno postavljenim ograničenjima, korisnici mogu odabrati samo iz prijestupnih godina između 1972. i 2016. ako koriste malu strelicu gore koja dolazi s <code>broj</code> vrstu unosa. Također mogu ručno unijeti vrijednost u polje za unos, ali u slučaju da ne ispunjava ograničenja, preglednik će vratiti poruku o pogrešci.</p> <figure> <img src="//savtec.org/img/images_1/intro-into-html5-constraint-validation.gif"></figure><h5>3. <code>maksimalna dužina</code> za provjeru valjanosti teksta</h5> <p> <code>maksimalna dužina</code> atribut omogućuje <strong>postavite maksimalnu duljinu znaka</strong> za tekstualna polja za unos. Može se koristiti zajedno s <code>tekst</code>, <code>traži</code>, <code>uRL</code>, <code>tel</code>, <code>e</code> i <code>zaporka</code> vrste unosa i sa <code><textarea></code> HTML oznaka.</p> <p> <code>maksimalna dužina</code> atribut može biti izvrsno rješenje za polja telefonskog broja koja ne mogu imati više od određenog broja znakova, ili za obrasce za kontakt u kojima ne želimo da korisnici pišu više od određene duljine.</p> <p>Isječak koda u nastavku prikazuje primjer za potonje, ograničava korisničke poruke na 500 znakova. </p> <pre name="code"> <form name="form" action="#" method="post"> <label for="yourmsg">Poruka (najviše 500 znakova):</label> <textarea name="msg" cols="25" rows="4" maxlength="500">

maksimalna dužina atribut ne šalje poruku o pogrešci, ali preglednik jednostavno ne dopušta korisnicima da unose više od navedenog broja znakova. Zato je ključno obavijestiti korisnike o ograničenju, inače neće razumjeti zašto ne mogu nastaviti s tipkanjem.

 4. uzorak za provjeru Regexa
  uzorak atribut dopustite nam koristite regularne izraze u našem procesu provjere valjanosti unosa. Uobičajeni izraz je a unaprijed zadani skup znakova koji tvore određeni uzorak. Možemo ga upotrijebiti ili za pretraživanje nizova koji slijede uzorak, ili za nametanje određenog formata definiranog obrascem.
 Sa uzorak atribut možemo učiniti potonji - ograničiti korisnike da pošalju svoj unos u formatu koji odgovara danom regularnom izrazu.
   uzorak atribut ima mnogo slučajeva upotrebe, ali može biti posebno korisno kada to želimo potvrdite polje za lozinku.
 Primjer u nastavku zahtijeva od korisnika da unesu zaporku dugu najmanje 8 znakova i da sadrži najmanje jedno slovo i jedan broj (izvorni izraz koji sam koristio). 
   * Tvoja lozinka:   
 
 Još nekoliko stvari
 U ovom članku smo pogledali kako iskoristiti provjeru obrasca isporučene s preglednikom osigurava HTML5-ov prirodni algoritam validacije ograničenja. Za izradu prilagođenih skripti za provjeru valjanosti moramo koristiti API ograničenja za provjeru valjanosti koji može biti sljedeći korak u usavršavanju vještina provjere valjanosti obrazaca.
 HTML5 obrasci su dostupni pomoćnim tehnologijama, tako da ne moramo nužno koristiti Aria-potrebno ARIA atribut za označavanje potrebnih polja za unos za čitače zaslona. Međutim, još uvijek može biti korisno dodati podršku za pristupačnost starijim preglednicima. Također je moguće isključite potvrdu ograničenja dodavanjem novalidate boolean atribut za 
 element.