Klienta puses formu / veidlapu validācija, izmantojot HTML5

Veidojot tīmekļa lietojumprogrammas, ir svarīgi nopietni uztvert drošību, it īpaši, ja tas ir saistīts ar datu vākšanu no lietotājiem.

“Nevienam neuzticēties” tas ir labs un izplatīts drošības princips! Tāpēc nekad neuzticieties tam, ka lietotājs ievadīs pareizas ,vai derīgas formas vērtības. Piemēram, e-pasta veidlapas laukā tā vietā, lai ievadītu derīgu e-pasta adresi, lietotājs var ievadīt nederīgu adresi vai ļaunprātīgus datus, acīmredzami ignorējot pieprasījuma nolūku.

Kad runa ir par veidlapu vērtību apstiprināšanu, to var izdarīt klienta pusē (tīmekļa pārlūkprogrammā) un servera pusē (izmantojot vēlamo servera puses valodu).

Agrāk klienta puses validāciju varēja panākt, tikai izmantojot JavaScript ,vai izmantojot ietvaru bibliotēkas (piemēram jQuery validācijas spraudni) Bet tas viss tagad mainās ,vai drīzāk ir mainījies un uzlabojies, jo validāciju tagad var veikt, izmantojot HTML5 un nerakstot sarežģītu JavaScript validācijas kodu.

Veidlapu validācija ar HTML5

HTML5 ietver diezgan stabilu formas validācijas mehānismu, ko darbina šādi <input /> atribūti: tips, modelis un prasība. ( typepattern, un require ) Pateicoties šiem jaunajiem HTML5 atribūtiem, dažas datu pārbaudes funkcijas varat deleģēt pārlūkprogrammai.

Apskatīsim šos jaunos veidlapas atribūtus, lai noskaidrotu, kā tie var palīdzēt veidlapas validācijā.

Tipa Atribūts <type>

Šis formas atribūts norāda, kāda veida ievades vadīklas ir jārāda, piemēram, populāro <input type=”text” /> vienkāršu teksta datu apstrādei.

Dažas veidlapas vadīklas pārmanto validācijas sistēmas, nerakstot nekādu kodu. Piemēram, <input type=”email” /> apstiprina lauku, lai pārliecinātos, ka ievadītie dati patiešām ir derīga e-pasta adrese. Ja laukā ir nederīga vērtība, veidlapu nevar iesniegt apstrādei, kamēr tā nav izlabota.

<script type="text/css" src="/epasta_validacijas_stils.css"></script>


<form>
    <h2>Epasta validācijas piemērs</h2>
    <input type="email" value="epasts" placeholder="nosaukums@email.lv" required />
    <input type="submit" value="Apstiprināt" />
</form>
/epasta_validacijas_stils.css
input[type="email"] {
    border: 1px solid #ddd;
    padding: 4px 8px;
  }
 
  input[type="email"]:focus {
    border: 1px solid #000;
  }
 
  input[type="submit"] {
    font-weight: bold;
    padding: 4px 8px;
    border:1px solid #000;
    background: #3b5998;
    color:#fff;
  }
 
  form {
    width: 50%;
  }
Sagaidāmais iznākums:

Ir arī <input type=”number” />, <input type=”url” /> un <input type=”tel” />, lai pārbaudītu attiecīgi numurus, URL un tālruņu numurus.

Piezīme. Tālruņa numuru formatējums dažādās valstīs atšķiras garuma un formātu nekonsekvences dēļ. Rezultātā specifikācijā nav noteikts algoritms to apstiprināšanai, tāpēc rakstīšanas laikā tā netiek atbalstīta tīmekļa pārlūkprogrammās.

Ņemiet vērā, ka apstiprinājumu var nodrošināt uz tel, izmantojot modeļa atribūtu ( pattern ), kas pieņem regulārās izteiksmes virkni un kuru mēs apsvērsim tālāk.

 

Modeļa atribūts <pattern>

Modeļa atribūts, iespējams, iepriecinās daudzus izstrādātājus, īpaši tos, kas strādā Front-End  izstrādes jomā. Šis atribūts norāda formātu (JavaScript regulārās izteiksmes veidā), ar kuru tiek pārbaudīta lauka vērtība.

Regulārās izteiksmes ir valoda, ko izmanto teksta parsēšanai un manipulēšanai. Tos bieži izmanto, lai veiktu sarežģītas meklēšanas un aizstāšanas darbības un nodrošinātu teksta datu pareizu formu.

Mūsdienās regulārās izteiksmes ir iekļautas lielākajā daļā programmēšanas valodu, kā arī daudzās skriptu valodās, redaktoros, lietojumprogrammās, datu bāzēs un komandrindas rīkos.

Regulārās izteiksmes ( RegEX ) nodrošina jaudīgu, kodolīgu un elastīgu līdzekli teksta virkņu, piemēram, noteiktu rakstzīmju, vārdu vai rakstzīmju modeļu, saskaņošanai.

Nododot RegEX virkni kā modeļa atribūta vērtību, varat noteikt, kura vērtība ir pieņemama veidlapas laukā, kā arī informēt lietotāju par kļūdām.

Apskatīsim dažus piemērus regulāro izteiksmju izmantošanai veidlapas lauka datu validēšanai.

Tālruņa numuri:

Kā minēts, tīmekļa pārlūkprogrammas pilnībā neatbalsta tālruņa ievades veidu, jo dažādās valstīs ir nekonsekvents tālruņa numuru formāts.

Piemēram, Latvijā tālruņa formāts ir xxx-xx-xxxxxx, kas būtu kaut kas līdzīgs 371-28-123456

RegEX ^\d{3}-\d{2}-\d{6}$ atbilst formātam, tāpēc ievades elements izskatītos šādi:

<label for="phonenum">Telefona Nr:</label> <input type="tel" pattern="^\d{3}-\d{2}-\d{6}$" >

,bet HTML kodā šī ievades forma izskatītos šādi:

<form>
  <h2>Telefona numuru validācija</h2>
  <label for="phonenum">Telefona numurs (formāts: xxx-xx-xxxxxx):</label><br/>
  <input id="phonenum" type="tel" pattern="^\d{3}-\d{2}-\d{6}$" required >
 
  <input type="submit" value="Apstiprināt">
 
</form>

Ja kāds kļūdītos ar ievadi, tad tiktu brīdināts, lai izlabo savu ievadi šādi:

telefona numuru validācija

Alfa-ciparu vērtības

Šis atbilst burtciparu (alfabētu un ciparu kombinācijas) rakstzīmei.

<input type="text" pattern="[a-zA-Z0-9]+" >
<form>
    <h2>Alfa numeriko rakstzīmju validācija</h2>
    <label for="alpha">Alfa-numerisks:</label><br/>
 
    <input id="alpha" type="text" pattern="[a-zA-Z0-9]+" required>
   
    <input type="submit" value="Nosūtīt">
   
  </form>

Piemēram Twitter lietotājvārda ievade:

<input type="text" pattern="^@[A-Za-z0-9_]{1,15}$" >

HTML kods ar validāciju:

<form>
    <h2>Twitter lietotājvārda validācija</h2>
    <label for="twitter">Twitter lietotājvārds (ar @):</label><br/>
    <input id="twitter" type="text" pattern="^@[A-Za-z0-9_]{1,15}$" required>
    <input type="submit" value="Iesniegt">
   
   
  </form>

HEX krāsu koda ievades validācija:

<form>
    <h2>Hex-krāsu koda ievades validācija</h2>
    <label for="hex">Hex-krāsu kods</label> <br />
    <input id="hex" type="text" pattern="^#+([a-fA-F0-9]{6}|[a-fA-F0-9]{3})$" />


    <input type="submit" value="Nosūtīt" />


</form>

Padomu sniegšana, jeb HINTS

Lai sniegtu lietotājam modeļa pattern aprakstu vai kļūdas ziņojumu laukā, ja ievadīta nederīga vērtība, varat izmantot atribūtu title, piemēram:

<input type="text" name="EAN"
       pattern="^\d{3}-\d{2}-\d{4}$"
       title="Ievadi EAN svītrkoda ciparus" />

Pilns HTML kods izskatīsies šādi:

<form>
  <h2>Ievades atribūti HINTS</h2>
 
 
  <input type="text" name="ssn" pattern="^\d{3}-\d{2}-\d{4}$" title="Ievadi EAN svītrkoda ciparus" />
 
  <input type="submit" value="Apstiprināt" />
 
 
</form>

hints

Pieprasījuma, jeb nepieciešamības atribūts REQUIRED

Šis ir Būlean atribūts, ko izmanto, lai norādītu, ka veidlapas iesniegšanai ir nepieciešama noteikta ievades lauka vērtība. Pievienojot šo atribūtu veidlapas laukam, pārlūkprogramma pieprasa lietotājam ievadīt datus šajā laukā pirms veidlapas iesniegšanas.

Tas aizstāj pamata veidlapas validāciju, kas pašlaik tiek ieviesta ar JavaScript, padarot lietas nedaudz lietojamākas un ietaupot mums izstrādes laiku.

Piemērs: XHTML saderībai <input type=”text” name=”my_name” required /> vai <input type=”text” name=”my_name” required=”required” />.

Šis atribūts neļaus lietotājam iesniegt tukšu veidlapu neaizpildot pieprasītos laukus.

Kopsavilkums

Pārlūkprogrammas atbalsts veidlapu validācijas funkcijām ir diezgan spēcīgs, un vajadzības gadījumā varat tos viegli aizpildīt.

Ir vērts atzīmēt, ka paļaušanās tikai uz pārlūkprogrammu (klienta puses) validācijai var būt bīstama, jo to var apiet ļaunprātīgs lietotājs vai datoru roboti.

Ne visas pārlūkprogrammas atbalsta HTML5, un ne visa ievade, kas nosūtīta uz jūsu skriptu, tiks iegūta no veidlapas. Tas nozīmē, ka servera puses validācijai ir jābūt ieviestai arī pirms veidlapas datu nosūtīšanas uz serveri apstrādei.

 

Loading

Noderīgs raksts? Dalies ar citiem: