Intro Into HTML5 piirangute kinnitamisse

Interaktiivseid veebisaite ja rakendusi ei saa ette kujutada ilma vormideta ühendust meie kasutajatega, ja saada andmeid me vajame nendega sujuvate tehingute tagamiseks. Me vajame kehtiv kasutaja sisend, me peame selle siiski omandama ei häiri meie kasutajad liiga palju.

Kuigi me saame parandada meie vormide kasutatavust arukalt valitud UX-i kujundusmudelitega, on HTML5-l ka natiivne mehhanism piirangute kinnitamiseks, mis võimaldab meil püüda sisendvigu otse esiküljel.

Selles postituses keskendume brauseriga kaasnev piirangute kinnitamine, ja vaadake, kuidas frontendi arendajad saavad seda teha turvaline kasutaja sisend HTML5 abil.

Miks me vajame Front-End Input Validationi

Sisendi valideerimine on kaks peamist eesmärki. Saavutatav sisu peab olema:

1. Kasulik

Me vajame kasutatavad andmed, millega saame töötada. Me peame inimesi sisenema realistlikud andmed õiges vormingus. Näiteks ei ole keegi, kes täna elus on, sündinud 200 aastat tagasi. Selliste andmete saamine võib algul tunduda naljakas, kuid pikemas perspektiivis on see tüütu ja meie andmebaasi kasutavad kasutud andmed.

2. Turvaline

Viidates turvalisusele, tähendab see seda, et me peame vältida pahatahtliku sisu süstimist - tahtlikult või juhuslikult.

Saavutada kasulikkus (mõistlike andmete saamine) ainult kliendi poolel, backend meeskond ei saa sellega liiga palju aidata. Saavutada turvalisust, esi- ja taustaprogrammide arendajad peavad töötama koos.

Kui frontendi arendajad valideerivad kliendi poolel sisendi õigesti, siis backend meeskond peab tegelema palju vähem haavatavusi. Häkkimine (sait) tähendab sageli täiendavate andmete esitamine, või andmed vales vormingus. Arendajad saavad võidelda selliste turvaaugudega nagu näiteks, võidelda edukalt esiotsa eest.

Näiteks soovitab see PHP turvajuhend kontrollida kõike, mida saame kliendi poolel teha. Nad rõhutavad esiplaanile sisendi valideerimise tähtsust, esitades mitmeid näiteid, näiteks:

"Sisendvalideerimine toimib kõige paremini äärmiselt piiratud väärtustega, näiteks kui midagi peab olema täisarv või tähtnumbriline string või HTTP-URL."

Esialgse sisendi valideerimisel on meie ülesanne kehtestada mõistlikke piiranguid kasutaja sisend. HTML5 piirangute valideerimise funktsioon annab meile selleks vajalikud vahendid.

HTML5 piirangute kinnitamine

Enne HTML5 kasutamist piirdusid frontendiarendajad kasutaja sisendi kinnitamine JavaScriptiga, see oli tüütu ja vigade tekkimise protsess. Kliendipoolse vormi valideerimise parandamiseks on HTML5 kasutusele võtnud a piirangute valideerimine algoritm, mis töötab kaasaegsetes brauserites ja kontrollib esitatud sisendi õigsust.

Hindamise läbiviimiseks kasutab algoritm sisendelementide valideerimisega seotud atribuudid, nagu näiteks , </code>, ja <code><select></code>. Kui soovite teada, kuidas piirangute kinnitamine toimub brauseris samm-sammult, vaadake seda WhatWG doc.</p> <p>Tänu HTML5 piirangute valideerimise funktsioonile saame kõik täita <strong>standardseid sisendvalideerimise ülesandeid</strong> kliendi poolel <strong>ilma JavaScriptita, ainult HTML5-ga</strong>.</p> <p>Keerulisemate valideerimisega seotud ülesannete täitmiseks pakub HTML5 meile a <strong>Piirangu valideerimise JavaScript API</strong> saame kasutada kohandatud kohandatud skriptide seadistamist.</p> <h4>Valideerige semantilise sisenditüüpidega</h4> <p>HTML5 on kasutusele võtnud <strong>semantilise sisendi tüübid</strong> et peale selle, et näidatakse kasutajaagentide elemendi tähendust, võib seda kasutada <strong>valideerida kasutaja sisend</strong> piirates kasutajaid teatud sisendvorminguga.</p> <p>Peale sisenditüüpide, mis on enne HTML5-d juba olemas olnud<code>teksti</code>, <code>parool</code>, <code>Esita</code>, <code>lähtestamine</code>, <code>raadio</code>, <code>märkeruut</code>, <code>nuppu</code>, <code>peidetud</code>), saame kasutada ka järgmist <strong>semantilise HTML5 sisenditüübid</strong>: <code>e-posti teel</code>,<code>tel</code>,<code>url</code>,<code>number</code>,<code>aega</code>,<code>kuupäev</code>,<code>kuupäev Kellaaeg</code>,<code>datetime-local</code>, <code>kuus</code>,<code>nädal</code>, <code>vahemikus</code>, <code>otsing</code>,<code>värv</code>.</p> <p>Me võime vanemate brauseritega turvaliselt kasutada HTML5 sisenditüüpe, kuna need käituvad <code><input type="text"></code> brauserites, mis neid ei toeta.</p> <p>Vaatame, mis juhtub, kui kasutaja sisestab vale sisenditüübi. Ütle, et oleme loonud e-posti sisestusvälja järgmise koodiga:</p> <pre name="code"> <form name="form" action="#" method="post"> <label for="youremail">Sinu email:</label> <input type="email" name="email"> <input type="submit" value="Submit"> </form> </pre> <p>Kui kasutaja sisestab stringi, mis ei kasuta e-posti vormingut, siis piirangu valideerimise algoritm <strong>ei esita vormi</strong>, ja <strong>tagastab veateate</strong>:</p> <figure> <img src="//savtec.org/img/images_1/intro-into-html5-constraint-validation.jpg"></figure><p>Sama reegel kehtib ka teiste sisenditüüpide kohta, näiteks <code>type = "url"</code> kasutajad saavad esitada sisendi, mis järgib URL-vormingut (algab protokolliga, näiteks <code>http: //</code> või <code>ftp: //</code>).</p> <p>Mõned sisenditüübid kasutavad disaini <strong>isegi ei võimalda kasutajatel sisestada vale sisestusformaadi</strong>, näiteks <code>värv</code> ja <code>vahemikus</code>.</p> <pre name="code"> <form name="form" action="#" method="post"> <label for="bgcol">Taustavärv:</label> <input type="color" name="color"> <input type="submit" value="Submit"> </form> </pre> <p>Kui me seda kasutame <code>värv</code> sisenditüüp on kasutajal sunnitud kas värvivalijast värvi valima või jääma vaikevärviga. Sisend väli on <strong>piiratud</strong>, seetõttu ei jäta see kasutajale viga.</p> <figure> <img src="//savtec.org/img/images_1/intro-into-html5-constraint-validation_2.jpg"></figure><p>Kui see on asjakohane, tasub kaaluda selle kasutamist <code><select></code> HTML-silt, mis töötab sarnaselt nende piirangutega sisenditüüpidele; see võimaldab kasutajatel valida rippmenüüst.</p> <pre name="code"> <form name="form" action="#" method="post"> <label for="favfruit">Sinu lemmik puuviljad:</label> <select name="fruit"> <option value="apple">Apple</option> <option value="pear">Pirn</option> <option value="orange">Oranž</option> <option value="raspberry">Vaarika</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>Kasutage HTML5 valideerimise atribuute</h4> <p>Semantiliste sisenditüüpide kasutamine seab teatud piirangud sellele, mida kasutajad saavad esitada, kuid paljudel juhtudel tahame minna veidi kaugemale. See on siis, kui <strong>valideerimisega seotud atribuudid</strong> selle <code><input></code> silt võib meid aidata.</p> <p>Valideerimisega seotud atribuudid kuuluvad teatud sisenditüüpidesse (neid ei saa kasutada <em>kõik</em> tüübid), millele nad kehtestavad täiendavaid piiranguid.</p> <h5>1. <code>nõutud</code> kehtiva sisendi saamiseks kõigi vahenditega</h5> <p>The <code>nõutud</code> atribuut on kõige tuntum HTML valideerimise atribuut. See on <strong>boolean atribuut</strong> see tähendab seda <strong>ei võta mingit väärtust</strong>, me lihtsalt peame selle asetama <code><input></code> silt, kui soovime seda kasutada:</p> <pre name="code"> <input type="email" name="email" required> </pre> <p>Kui kasutaja unustab sisestada väärtuse soovitud sisestusväljale, siis brauser <strong>tagastab veateate</strong> mis hoiatab neid täitma, ja nad <strong>ei saa vormi esitada</strong> kuni nad on andnud kehtiva sisendi. Sellepärast on see alati oluline <strong>märkige visuaalselt</strong> kohustuslikud väljad kasutajatele.</p> <p>The <code>nõutud</code> atribuut võib olla <strong>kasutatakse koos järgmiste sisenditüüpidega</strong>: <code>teksti</code>, <code>otsing</code>, <code>url</code>, <code>tel</code>, <code>e-posti teel</code>, <code>parool</code>, <code>kuupäev</code>, <code>kuupäev Kellaaeg</code>, <code>datetime-local</code>, <code>kuus</code>, <code>nädal</code>,<code>aega</code>, <code>number</code>, <code>märkeruut</code>, <code>raadio</code>, <code>faili</code>, pluss koos <code><textarea></code>ja <code><select></code> HTML-märgendid.</p> <h5>2. <code>min</code>, <code>max</code> ja <code>samm</code> numbri valideerimiseks</h5> <p>The <code>min</code>, <code>max</code> ja <code>samm</code> atribuudid võimaldavad meil <strong>arvukate sisendväljade suhtes piiranguid</strong>. Neid saab kasutada koos <code>vahemikus</code>, <code>number</code>, <code>kuupäev</code>, <code>kuus</code>, <code>nädal</code>, <code>kuupäev Kellaaeg</code>, <code>datetime-local</code>, ja <code>aega</code> sisenditüübid.</p> <p>The <code>min</code> ja <code>max</code> atribuudid on suurepärane võimalus lihtsalt <strong>välistama ebamõistlikke andmeid</strong>. Näiteks allpool toodud näide sunnib kasutajaid esitama vanuse 18 kuni 120 aastat.</p> <pre name="code"> <form name="form" action="#" method="post"> <label for="yourage">Sinu vanus:</label> <input type="number" name="age" min="18" max="120"> <input type="submit" value="Submit"> </form> </pre> <p>Kui piirangute valideerimise algoritm kukub kasutaja sisendisse, mis on väiksem kui <code>min</code>, või suurem kui <code>max</code> väärtus takistab selle jõudmist taustaprogrammi ja tagastab veateate.</p> <figure> <img src="//savtec.org/img/images_1/intro-into-html5-constraint-validation_4.jpg"></figure><p>The <code>samm</code> atribuut <strong>määrab numbrilise intervalli</strong> numbrilise sisestusvälja õiguslike väärtuste vahel. Näiteks kui soovime, et kasutajad valiksid ainult hüppeaastatest, siis saame lisada <code>step = "4"</code> atribuut põllule. Allolevas näites kasutasin <code>number</code> sisenditüüp, kuna pole <code>type = "year"</code> HTML5-s.</p> <pre name="code"> <form name="form" action="#" method="post"> <label for="yourleapyear">Teie lemmikhüpe aasta:</label> <input type="number" name="leapyear" min="1972" max="2016" step="4"> <input type="submit" value="Submit"> </form> </pre> <p>Eelnevalt seatud piirangute abil saavad kasutajad valida ainult ajavahemike 1972 ja 2016 vahel, kui nad kasutavad väikest noolt, mis kaasneb <code>number</code> sisenditüüp. Nad võivad sisestada väärtuse ka käsitsi sisestusväljale, kuid juhul, kui see ei vasta piirangutele, tagastab brauser veateate.</p> <figure> <img src="//savtec.org/img/images_1/intro-into-html5-constraint-validation.gif"></figure><h5>3. <code>maksimaalne pikkus</code> teksti pikkuse valideerimiseks</h5> <p>The <code>maksimaalne pikkus</code> atribuut võimaldab <strong>määrake maksimaalne märgi pikkus</strong> tekstisiseste väljade jaoks. Seda saab kasutada koos <code>teksti</code>, <code>otsing</code>, <code>url</code>, <code>tel</code>, <code>e-posti teel</code> ja <code>parool</code> sisenditüübid ja <code><textarea></code> HTML-silt.</p> <p>The <code>maksimaalne pikkus</code> atribuut võib olla suurepärane lahendus telefoninumbriväljadele, millel ei saa olla rohkem kui teatud arvu märke, või kontaktivormidele, kus me ei soovi, et kasutajad kirjutaksid rohkem kui teatud pikkusega.</p> <p>Alltoodud koodilõigu näide on viimase näide, see piirab kasutaja sõnumeid 500 tähemärgiga. </p> <pre name="code"> <form name="form" action="#" method="post"> <label for="yourmsg">Sõnum (kuni 500 tähemärki):</label> <textarea name="msg" cols="25" rows="4" maxlength="500">

The maksimaalne pikkus atribuut ei anna veateadet, kuid brauser lihtsalt ei luba kasutajatel sisestada rohkem kui määratud tähemärk. Sellepärast on see ülioluline teavitada kasutajaid piirangust, vastasel juhul ei saa nad aru, miks nad ei saa kirjutada.

 
 * Teie parool: