Introducere în Validarea constrângerilor HTML5

Site-urile interactive și aplicațiile nu pot fi imaginate fără forme care să ne permită conectați-vă cu utilizatorii noștri, și a obțineți datele avem nevoie pentru a asigura tranzacții fără probleme cu ei. Avem nevoie intrare validă a utilizatorului, cu toate acestea, trebuie să o achiziționăm într-un mod care să fie nu frustrează utilizatorii noștri prea mult.

În timp ce putem îmbunătăți gradul de utilizare a formularelor noastre cu modele inteligente de design UX, HTML5 are și un mecanism nativ pentru validarea constrângerilor care ne permit prinde erori de intrare chiar în front-end.

În acest post, ne vom concentra pe browser-ul de validare a constrângerilor, și analizați modul în care dezvoltatorii de frontend pot securizați intrarea validă a utilizatorului folosind HTML5.

De ce avem nevoie de validare de intrare front-end

Validarea intrărilor are două obiective principale. Conținutul pe care îl primim trebuie să fie:

1. Utile

Avem nevoie date utile cu care putem lucra. Trebuie să-i facem pe oameni să intre date realiste în formatul corect. De exemplu, nimeni care trăiește astăzi nu sa născut acum 200 de ani. Obținerea de date ca aceasta poate părea amuzantă la început, dar pe termen lung este enervantă și popula populația noastră cu date inutile.

2. Secure

Când ne referim la securitate, asta înseamnă că trebuie să facem asta preveni injectarea de conținut rău intenționat - fie deliberat, fie accidental.

Utilitatea (obținerea de date rezonabile) poate fi realizată numai pe partea clientului, echipa de backend nu poate ajuta prea mult cu asta. Pentru a atinge Securitate, dezvoltatorii din front și backend trebuie să lucreze împreună.

Dacă dezvoltatorii de frontend validează corect intrarea pe partea clientului, echipa de backend va trebui să se ocupe cu mult mai puține vulnerabilități. Hacking (un site) implică adesea trimiterea de date suplimentare, sau date în format greșit. Dezvoltatorii pot lupta împotriva găurilor de securitate ca acestea, luptând cu succes de la front-end.

De exemplu, acest ghid de securitate PHP recomandă să verificați tot ce putem din partea clientului. Acestea subliniază importanța validării intrărilor de frontend, oferind numeroase exemple, cum ar fi:

"Validarea intrărilor funcționează cel mai bine cu valori extrem de restricționate, de exemplu atunci când ceva trebuie să fie un număr întreg, un șir alfanumeric sau o adresă HTTP."

În validarea intrărilor frontend, treaba noastră este să să impună constrângeri rezonabile la intrarea utilizatorului. Funcția de validare a constrângerilor HTML5 ne oferă mijloacele necesare pentru a face acest lucru.

Validarea constrângerilor HTML5

Înainte de HTML5, dezvoltatorii frontend au fost limitați la validarea intrării de utilizator cu JavaScript, care a fost un proces obositor și eronat. Pentru a îmbunătăți validarea formularului de la client, HTML5 a introdus o constrângere de validare algoritmul care rulează în browserele moderne și verifică validitatea intrării trimise.

Pentru a face evaluarea, algoritmul utilizează validarea atributelor elementelor de intrare, precum , </code>, și <code><select></code>. Dacă doriți să știți cum se procedează validarea constrângerilor pas cu pas în browser, verificați acest document WhatWG.</p> <p>Datorită funcției de validare a constrângerilor HTML5, putem executa toate <strong>tastele standard de validare a intrărilor</strong> pe partea clientului <strong>fără JavaScript, numai cu HTML5</strong>.</p> <p>Pentru a efectua sarcini mai complexe legate de validare, HTML5 ne oferă o funcționalitate <strong>JavaScript API pentru validarea restricțiilor</strong> putem folosi pentru a configura setările de validare personalizate.</p> <h4>Validați cu tipuri de intrări semantice</h4> <p>HTML5 a introdus <strong>semantic tipuri de intrări</strong> care - în afară de indicarea semnificației elementului pentru agenții utilizator - poate fi, de asemenea, folosit pentru a <strong>validarea datelor introduse de utilizator</strong> prin limitarea utilizatorilor la un anumit format de intrare.</p> <p>Pe lângă tipurile de intrări care au existat deja înainte de HTML5 (<code>text</code>, <code>parola</code>, <code>a depune</code>, <code>restabili</code>, <code>radio</code>, <code>Caseta de bifat</code>, <code>buton</code>, <code>ascuns</code>), putem folosi și următoarele <strong>semantice tipuri de intrări HTML5</strong>: <code>e-mail</code>,<code>tel</code>,<code>URL-ul</code>,<code>număr</code>,<code>timp</code>,<code>Data</code>,<code>datetime</code>,<code>datetime-locală</code>, <code>lună</code>,<code>săptămână</code>, <code>gamă</code>, <code>căutare</code>,<code>culoare</code>.</p> <p>Putem folosi în siguranță tipurile de intrare HTML5 cu browserele mai vechi, deoarece acestea se vor comporta ca un <code><input type="text"></code> din browserele care nu le suportă.</p> <p>Să vedem ce se întâmplă atunci când utilizatorul introduce un tip greșit de intrare. Spuneți că am creat un câmp de introducere a e-mailului cu următorul cod:</p> <pre name="code"> <form name="form" action="#" method="post"> <label for="youremail">Email-ul tau:</label> <input type="email" name="email"> <input type="submit" value="Submit"> </form> </pre> <p>Când utilizatorul introduce un șir care nu utilizează un format de e-mail, algoritmul de validare a constrângerilor <strong>nu trimite formularul</strong>, și <strong>returnează un mesaj de eroare</strong>:</p> <figure> <img src="//savtec.org/img/images_1/intro-into-html5-constraint-validation.jpg"></figure><p>Aceeași regulă se aplică și altor tipuri de intrări, de exemplu pentru <code>type = "url"</code> utilizatorii pot trimite doar o intrare care urmează formatul URL (începe cu un protocol, cum ar fi <code>http: //</code> sau <code>ftp: //</code>).</p> <p>Unele tipuri de intrări utilizează un design care să fie <strong>nici nu permite utilizatorilor să introducă un format de intrare greșit</strong>, de exemplu <code>culoare</code> și <code>gamă</code>.</p> <pre name="code"> <form name="form" action="#" method="post"> <label for="bgcol">Culoare de fundal:</label> <input type="color" name="color"> <input type="submit" value="Submit"> </form> </pre> <p>Dacă folosim <code>culoare</code> tip de intrare, utilizatorul este constrâns să aleagă o culoare din selectorul de culori sau să rămână cu negrul implicit. Câmpul de introducere este <strong>constrânsă de proiectare</strong>, prin urmare, nu lasă prea multe șanse pentru eroarea utilizatorului.</p> <figure> <img src="//savtec.org/img/images_1/intro-into-html5-constraint-validation_2.jpg"></figure><p>Când este necesar, merită să luați în considerare utilizarea <code><select></code> Etichetă HTML care funcționează în mod similar cu aceste tipuri de intrări constrânse de proiectare; permite utilizatorilor să aleagă dintr-o listă derulantă.</p> <pre name="code"> <form name="form" action="#" method="post"> <label for="favfruit">Fructe preferate:</label> <select name="fruit"> <option value="apple">măr</option> <option value="pear">Pară</option> <option value="orange">portocale</option> <option value="raspberry">Zmeură</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>Utilizați atributele de validare HTML5</h4> <p>Utilizarea tipurilor de intrări semantice stabilește anumite constrângeri cu privire la ceea ce li se permite să trimită utilizatorii, dar în multe cazuri vrem să mergem puțin mai departe. Acesta este momentul în care <strong>valori legate de validare</strong> din <code><input></code> eticheta ne poate ajuta.</p> <p>Valorile legate de validare aparțin anumitor tipuri de intrări (nu pot fi utilizate pe <em>toate</em> tipuri) pe care le impun constrângeri suplimentare.</p> <h5>1. <code>necesar</code> pentru a obține o intrare validă prin toate mijloacele</h5> <p> <code>necesar</code> atributul este cel mai cunoscut atribut de validare HTML. E o <strong>atributul boolean</strong> ceea ce înseamnă <strong>nu are nicio valoare</strong>, trebuie doar să o plasăm înăuntru <code><input></code> eticheta dacă vrem să o folosim:</p> <pre name="code"> <input type="email" name="email" required> </pre> <p>Dacă utilizatorul uită să introducă o valoare într-un câmp de intrare necesar, browser-ul <strong>returnează un mesaj de eroare</strong> care îi avertizează să completeze câmpul, și ei <strong>nu poate trimite formularul</strong> până când au furnizat o intrare validă. De aceea este important să intotdeauna <strong>marcați vizual</strong> câmpuri obligatorii către utilizatori.</p> <p> <code>necesar</code> atributul poate fi <strong>utilizat împreună cu următoarele tipuri de intrări</strong>: <code>text</code>, <code>căutare</code>, <code>URL-ul</code>, <code>tel</code>, <code>e-mail</code>, <code>parola</code>, <code>Data</code>, <code>datetime</code>, <code>datetime-locală</code>, <code>lună</code>, <code>săptămână</code>,<code>timp</code>, <code>număr</code>, <code>Caseta de bifat</code>, <code>radio</code>, <code>fişier</code>, plus cu <code><textarea></code>și <code><select></code> Etichete HTML.</p> <h5>2. <code>min</code>, <code>max</code> și <code>Etapa</code> pentru validarea numărului</h5> <p> <code>min</code>, <code>max</code> și <code>Etapa</code> atributele ne permit <strong>pune constrângeri pe câmpurile de introducere a numerelor</strong>. Acestea pot fi utilizate împreună cu <code>gamă</code>, <code>număr</code>, <code>Data</code>, <code>lună</code>, <code>săptămână</code>, <code>datetime</code>, <code>datetime-locală</code>, și <code>timp</code> tipuri de intrări.</p> <p> <code>min</code> și <code>max</code> atributele oferă o modalitate excelentă de a fi ușor <strong>exclude date nerezonabile</strong>. De exemplu, exemplul de mai jos obligă utilizatorii să depună o vârstă cuprinsă între 18 și 120 de ani.</p> <pre name="code"> <form name="form" action="#" method="post"> <label for="yourage">Varsta ta:</label> <input type="number" name="age" min="18" max="120"> <input type="submit" value="Submit"> </form> </pre> <p>Atunci când algoritmul de validare a constrângerilor intră într-o intrare a utilizatorului mai mică decât <code>min</code>, sau mai mare decât <code>max</code> valoare, îl împiedică să ajungă la backend și returnează un mesaj de eroare.</p> <figure> <img src="//savtec.org/img/images_1/intro-into-html5-constraint-validation_4.jpg"></figure><p> <code>Etapa</code> atribut <strong>specifică un interval numeric</strong> între valorile legale ale unui câmp numeric de intrare. De exemplu, dacă dorim ca utilizatorii să aleagă numai din anii brute, putem adăuga <code>pas = "4"</code> atribuiți câmpului. În exemplul de mai jos am folosit <code>număr</code> tipul de intrare, deoarece nu există <code>type = "an"</code> în HTML5.</p> <pre name="code"> <form name="form" action="#" method="post"> <label for="yourleapyear">Anul tău favorit:</label> <input type="number" name="leapyear" min="1972" max="2016" step="4"> <input type="submit" value="Submit"> </form> </pre> <p>Cu constrângerile prestabilite, utilizatorii pot alege doar din anii de salt între 1972 și 2016 dacă folosesc mica săgeată în sus care vine cu <code>număr</code> tip de introducere. De asemenea, pot introduce o valoare manuală în câmpul de introducere, dar în cazul în care nu respectă constrângerile, browserul va returna un mesaj de eroare.</p> <figure> <img src="//savtec.org/img/images_1/intro-into-html5-constraint-validation.gif"></figure><h5>3. <code>lungime maxima</code> pentru validarea lungimii textului</h5> <p> <code>lungime maxima</code> atributul face posibilă <strong>setați o lungime maximă a caracterului</strong> pentru câmpurile de introducere textuală. Poate fi folosit împreună cu <code>text</code>, <code>căutare</code>, <code>URL-ul</code>, <code>tel</code>, <code>e-mail</code> și <code>parola</code> tipurile de intrări și cu <code><textarea></code> Etichetă HTML.</p> <p> <code>lungime maxima</code> atributul poate fi o soluție excelentă pentru câmpurile pentru numărul de telefon care nu pot avea mai mult de un anumit număr de caractere sau pentru formularele de contact unde nu dorim ca utilizatorii să scrie mai mult decât o anumită lungime.</p> <p>Fragmentul de cod de mai jos prezintă un exemplu pentru acesta din urmă, constrânge mesajele de utilizator la 500 de caractere. </p> <pre name="code"> <form name="form" action="#" method="post"> <label for="yourmsg">Mesaj (maximum 500 de caractere):</label> <textarea name="msg" cols="25" rows="4" maxlength="500">

lungime maxima atribut nu returnează un mesaj de eroare, dar browserul pur și simplu nu permite utilizatorilor să introducă mai mult decât numărul de caractere specificat. De aceea este crucial să informează utilizatorii despre constrângere, în caz contrar, ei nu vor înțelege de ce nu pot continua cu tastarea.

 4. model pentru validarea Regex
  model atributul ne permite utilizați expresii regulate în procesul de validare a intrărilor. O expresie regulată este a set de caractere predefinite care formează un anumit tipar. Putem folosi fie pentru a căuta șiruri care urmează modelul, fie pentru a impune un anumit format definit de model.
 Cu model atributul pe care îl putem face celui din urmă - constrângeți utilizatorii să-și prezinte contribuția într-un format care să le permită se potrivește cu expresia obișnuită dată.
   model atributul are multe cazuri de utilizare, dar poate fi util mai ales atunci când dorim validați un câmp de parolă.
 Exemplul de mai jos cere utilizatorilor să introducă o parolă cu lungimea minimă de 8 caractere și să conțină cel puțin o literă și un număr (sursa regexului folosit). 
   * Parola Dvs:   
 
 Mai multe lucruri
 În acest articol, am aruncat o privire asupra modului de a utiliza browser-ul furnizat validarea formularului furnizate de algoritmul HTML de validare a constrângerilor native. Pentru crearea scripturilor noastre de validare personalizate, trebuie să folosim API-ul de validare a constrângerilor care poate fi următorul pas în perfecționarea abilităților de validare a formularului.
 Formularele HTML5 sunt accesibile prin tehnologii de asistență, deci nu trebuie neapărat să le folosim arie-necesară Atributul ARIA pentru a marca câmpurile de intrare necesare pentru cititoarele de ecran. Totuși, poate fi util să adăugați suport pentru accesibilitate pentru browserele mai vechi. Este, de asemenea, posibil să renunțați la validarea constrângerilor prin adăugarea novalidate atributul boolean la 
 element.