Ievads HTML5 ierobežojuma validācijā

Interaktīvas tīmekļa vietnes un lietojumprogrammas nevar iedomāties bez veidlapām, kas ļauj mums sazināties ar mūsu lietotājiem, un uz iegūt datus mums ir nepieciešams, lai nodrošinātu vienmērīgus darījumus ar viņiem. Mums vajag derīga lietotāja ievade, tomēr mums tas ir jāiegūst tādā veidā neapgrūtina mūsu lietotājiem pārāk daudz.

Lai gan mēs varam uzlabot mūsu veidlapu lietojamību ar gudri izvēlētiem UX dizaina modeļiem, HTML5 ir arī vietējais ierobežojumu apstiprināšanas mehānisms, kas ļauj mums nozvejas ievades kļūdas tieši priekšējā galā.

Šajā ziņojumā mēs pievērsīsim uzmanību pārlūkprogrammas piegādātā ierobežojuma validācija, un izpētīt, kā frontend izstrādātāji var drošu lietotāja ievadi, izmantojot HTML5.

Kāpēc mums ir vajadzīgs priekšējās ievades apstiprinājums

Ievades validācija ir divi galvenie mērķi. Saturs, kas mums nepieciešams, ir:

1. Noderīgi

Mums vajag izmantojamie dati, ar kuriem mēs varam strādāt. Mums ir jāievieš cilvēki reālus datus pareizajā formātā. Piemēram, neviens, kas šodien dzīvo, nav dzimis pirms 200 gadiem. Tādu datu iegūšana sākumā var likties smieklīgi, bet ilgtermiņā tas ir kaitinoši, un mūsu datu bāze tiek izmantota bezjēdzīgi dati.

2. Droši

Atsaucoties uz drošību, tas nozīmē, ka mums ir nepieciešams novērstu ļaunprātīga satura injicēšanu - apzināti vai nejauši.

Var sasniegt lietderību (iegūt saprātīgus datus) tikai klienta pusē, backend komanda nevar ar to pārāk daudz palīdzēt. Lai sasniegtu drošību, priekšējiem un aizmugurējiem izstrādātājiem ir jāstrādā kopā.

Ja frontend izstrādātāji pareizi apstiprina ievadi klienta pusē, backend komandai būs jārisina daudz mazāk neaizsargātību. Datorurķēšana (vietne) bieži ir saistīta ar papildu datu iesniegšana, vai datus nepareizā formātā. Izstrādātāji var cīnīties pret tādiem drošības caurumiem kā veiksmīgi cīnīties no priekšpuses.

Piemēram, šis PHP drošības ceļvedis iesaka pārbaudīt visu, kas iespējams klienta pusē. Viņi uzsver, ka liela nozīme ir priekšplāna ievades validācijai, sniedzot daudzus piemērus, piemēram:

"Ievades validācija vislabāk darbojas ar ļoti ierobežotām vērtībām, piemēram, ja kaut kas ir vesels skaitlis, vai burtu un ciparu virkne, vai HTTP URL."

Frontend ievades validācijā mūsu uzdevums ir noteikt saprātīgus ierobežojumus lietotāja ievadā. HTML5 ierobežojuma apstiprināšanas funkcija sniedz mums līdzekļus, lai to izdarītu.

HTML5 ierobežojuma validācija

Pirms HTML5 frontend izstrādātāji bija ierobežoti lietotāja ievades apstiprināšana ar JavaScript, kas bija garlaicīgs un kļūdainu procesu. Lai uzlabotu klienta puses formas apstiprināšanu, HTML5 ir ieviesusi a ierobežojumu apstiprināšana algoritms, kas darbojas modernās pārlūkprogrammās, un pārbauda iesniegto datu derīgumu.

Lai veiktu novērtējumu, algoritms izmanto ar ievades elementiem saistītie atribūti, piemēram, , </code>, un <code><select></code>. Ja vēlaties uzzināt, kā pārlūkprogrammā pārlūkprogrammā notiek ierobežojumu apstiprināšana, pārbaudiet šo WhatWG doc.</p> <p>Pateicoties HTML5 ierobežojuma validācijas funkcijai, mēs varam izpildīt visus <strong>standarta ievades validācijas uzdevumi</strong> klienta pusē <strong>bez JavaScript, tikai ar HTML5</strong>.</p> <p>Lai veiktu sarežģītākus validācijas uzdevumus, HTML5 sniedz mums a <strong>Ierobežojuma validācijas JavaScript API</strong> mēs varam izmantot, lai iestatītu mūsu pielāgotos validācijas skriptus.</p> <h4>Apstipriniet ar semantisko ievades tipu</h4> <p>HTML5 ir ieviests <strong>semantisko ievades tipu</strong> var arī pierādīt, ka, neņemot vērā elementu nozīmi lietotāju aģentiem <strong>apstiprināt lietotāja ievadi</strong> ierobežojot lietotājus ar noteiktu ievades formātu.</p> <p>Bez ievades tipiem, kas jau pastāvēja pirms HTML5 (<code>tekstu</code>, <code>parole</code>, <code>Iesniegt</code>, <code>atiestatīt</code>, <code>radio</code>, <code>izvēles rūtiņu</code>, <code>poga</code>, <code>slēpta</code>), mēs varam izmantot arī šādus <strong>semantiskā HTML5 ievades veidi</strong>: <code>e-pastu</code>,<code>tel</code>,<code>URL</code>,<code>numuru</code>,<code>laiks</code>,<code>datums</code>,<code>datums Laiks</code>,<code>datetime-local</code>, <code>mēnesī</code>,<code>nedēļu</code>, <code>diapazonā</code>, <code>Meklēt</code>,<code>krāsa</code>.</p> <p>Mēs varam droši izmantot HTML5 ievades tipus ar vecākām pārlūkprogrammām, jo ​​tās darbosies kā <code><input type="text"></code> pārlūkprogrammās, kas tos neatbalsta.</p> <p>Redzēsim, kas notiek, kad lietotājs ievada nepareizu ievades veidu. Sakiet, ka esam izveidojuši e-pasta ievades lauku ar šādu kodu:</p> <pre name="code"> <form name="form" action="#" method="post"> <label for="youremail">Tavs e-pasts:</label> <input type="email" name="email"> <input type="submit" value="Submit"> </form> </pre> <p>Kad lietotājs ieraksta virkni, kas neizmanto e-pasta formātu, ierobežojuma validācijas algoritms <strong>neiesniedz veidlapu</strong>, un <strong>atgriež kļūdas ziņojumu</strong>:</p> <figure> <img src="//savtec.org/img/images_1/intro-into-html5-constraint-validation.jpg"></figure><p>Tas pats noteikums attiecas arī uz citiem ievades tipiem, piemēram, <code>type = "url"</code> lietotāji var iesniegt tikai ievadi, kas atbilst URL formātam (sākas ar protokolu, piemēram, <code>http: //</code> vai <code>ftp: //</code>).</p> <p>Daži ievades veidi izmanto dizainu <strong>pat neļauj lietotājiem ievadīt nepareizu ievades formātu</strong>, piemēram <code>krāsa</code> un <code>diapazonā</code>.</p> <pre name="code"> <form name="form" action="#" method="post"> <label for="bgcol">Fona krāsa:</label> <input type="color" name="color"> <input type="submit" value="Submit"> </form> </pre> <p>Ja mēs izmantojam <code>krāsa</code> ievades veids lietotājam ir spiests izvēlēties krāsu no krāsu atlasītāja vai palikt ar melno noklusējumu. Ievades lauks ir <strong>ierobežota ar dizainu</strong>, tāpēc tas neļauj daudz kļūdu lietotājam.</p> <figure> <img src="//savtec.org/img/images_1/intro-into-html5-constraint-validation_2.jpg"></figure><p>Ja tas ir lietderīgi, ir vērts apsvērt iespēju izmantot <code><select></code> HTML birkas, kas darbojas līdzīgi šiem ierobežotajiem ievades tipiem; tas ļauj lietotājiem izvēlēties no nolaižamā saraksta.</p> <pre name="code"> <form name="form" action="#" method="post"> <label for="favfruit">Jūsu mīļākie augļi:</label> <select name="fruit"> <option value="apple">Apple</option> <option value="pear">Bumbieri</option> <option value="orange">apelsīns</option> <option value="raspberry">Aveņu</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>Izmantojiet HTML5 validācijas atribūtus</h4> <p>Semantisko ievades veidu izmantošana nosaka noteiktus ierobežojumus tam, ko lietotāji drīkst iesniegt, bet daudzos gadījumos mēs vēlamies iet nedaudz tālāk. Tas ir tad, kad <strong>ar validāciju saistītie atribūti</strong> no <code><input></code> tag var palīdzēt mums.</p> <p>Ar validāciju saistītie atribūti pieder pie noteiktiem ievades tipiem (tos nevar izmantot <em>viss</em> veidiem), uz kuriem tie nosaka papildu ierobežojumus.</p> <h5>1. <code>nepieciešams</code> lai iegūtu pareizu ievadi ar visiem līdzekļiem</h5> <p>The <code>nepieciešams</code> atribūts ir pazīstamākais HTML validācijas atribūts. Tas ir <strong>būla atribūts</strong> tas nozīmē to <strong>nav nekādas vērtības</strong>, mums vienkārši ir jānovieto tā iekšpusē <code><input></code> tag, ja mēs to vēlamies izmantot:</p> <pre name="code"> <input type="email" name="email" required> </pre> <p>Ja lietotājs aizmirst ievadīt vērtību vajadzīgajā ievades laukā, pārlūks <strong>atgriež kļūdas ziņojumu</strong> kas brīdina viņus aizpildīt lauku, un viņi <strong>nevar iesniegt veidlapu</strong> līdz brīdim, kad tie ir iesnieguši derīgu ievadi. Tāpēc vienmēr ir svarīgi <strong>vizuāli atzīmējiet</strong> nepieciešamos laukus.</p> <p>The <code>nepieciešams</code> atribūts var būt <strong>izmanto kopā ar šādiem ievades tipiem</strong>: <code>tekstu</code>, <code>Meklēt</code>, <code>URL</code>, <code>tel</code>, <code>e-pastu</code>, <code>parole</code>, <code>datums</code>, <code>datums Laiks</code>, <code>datetime-local</code>, <code>mēnesī</code>, <code>nedēļu</code>,<code>laiks</code>, <code>numuru</code>, <code>izvēles rūtiņu</code>, <code>radio</code>, <code>failu</code>, plus ar <code><textarea></code>un <code><select></code> HTML tagi.</p> <h5>2. <code>min</code>, <code>maks</code> un <code>solis</code> numuru apstiprināšanai</h5> <p>The <code>min</code>, <code>maks</code> un <code>solis</code> atribūti ļauj mums <strong>ierobežojumu ievades laukiem</strong>. Tos var izmantot kopā ar <code>diapazonā</code>, <code>numuru</code>, <code>datums</code>, <code>mēnesī</code>, <code>nedēļu</code>, <code>datums Laiks</code>, <code>datetime-local</code>, un <code>laiks</code> ievades veidi.</p> <p>The <code>min</code> un <code>maks</code> atribūti nodrošina lielisku iespēju viegli <strong>izslēgt nepamatotus datus</strong>. Piemēram, zemāk redzamais piemērs liek lietotājiem iesniegt vecumu no 18 līdz 120 gadiem.</p> <pre name="code"> <form name="form" action="#" method="post"> <label for="yourage">Tavs vecums:</label> <input type="number" name="age" min="18" max="120"> <input type="submit" value="Submit"> </form> </pre> <p>Kad ierobežojuma validācijas algoritms sakrīt ar lietotāja ievadi, kas ir mazāka par <code>min</code>, vai lielāks par <code>maks</code> vērtību, tas neļauj tai sasniegt backend, un atgriež kļūdas ziņojumu.</p> <figure> <img src="//savtec.org/img/images_1/intro-into-html5-constraint-validation_4.jpg"></figure><p>The <code>solis</code> atribūts <strong>norāda skaitlisko intervālu</strong> starp ciparu ievades lauka juridiskajām vērtībām. Piemēram, ja mēs vēlamies, lai lietotāji izvēlētos tikai no lēciena gadiem, mēs varam pievienot <code>step = "4"</code> atribūtu laukam. Turpmākajā piemērā es izmantoju <code>numuru</code> ievades veids, jo nav <code>type = "gads"</code> HTML5.</p> <pre name="code"> <form name="form" action="#" method="post"> <label for="yourleapyear">Jūsu mīļākie lēciena gads:</label> <input type="number" name="leapyear" min="1972" max="2016" step="4"> <input type="submit" value="Submit"> </form> </pre> <p>Izmantojot iepriekš noteiktos ierobežojumus, lietotāji var izvēlēties tikai no lēciena gadiem no 1972. līdz 2016. gadam, ja viņi izmanto mazo bultiņu, kas nāk ar <code>numuru</code> ievades veids. Viņi var arī ievadīt vērtību manuāli ievades laukā, bet, ja tas neatbilst ierobežojumiem, pārlūks atgriezīs kļūdas ziņojumu.</p> <figure> <img src="//savtec.org/img/images_1/intro-into-html5-constraint-validation.gif"></figure><h5>3. <code>maksimālais garums</code> teksta garuma apstiprināšanai</h5> <p>The <code>maksimālais garums</code> atribūts ļauj <strong>iestatiet maksimālo rakstzīmju garumu</strong> teksta ievades laukiem. To var izmantot kopā ar <code>tekstu</code>, <code>Meklēt</code>, <code>URL</code>, <code>tel</code>, <code>e-pastu</code> un <code>parole</code> ievades tipi un <code><textarea></code> HTML tag.</p> <p>The <code>maksimālais garums</code> atribūts var būt lielisks risinājums tālruņa numuru laukiem, kuriem nevar būt vairāk par noteiktu rakstzīmju skaitu, vai kontaktu veidlapām, kur mēs nevēlamies, lai lietotāji rakstītu vairāk par noteiktu garumu.</p> <p>Tālāk redzamais koda fragments parāda pēdējo piemēru, tas ierobežo lietotāja ziņas līdz 500 rakstzīmēm. </p> <pre name="code"> <form name="form" action="#" method="post"> <label for="yourmsg">Ziņa (ne vairāk kā 500 rakstzīmes):</label> <textarea name="msg" cols="25" rows="4" maxlength="500">

The maksimālais garums atribūts neatgriež kļūdas ziņojumu, bet pārlūkprogramma vienkārši neļauj lietotājiem ievadīt vairāk par norādīto rakstzīmju skaitu. Tāpēc ir svarīgi, lai informēt lietotājus par ierobežojumu, pretējā gadījumā viņi nesaprot, kāpēc viņi nevar turpināt rakstīt.

 
 * Tava parole: