Intro til HTML5-begrensnings validering

Interaktive nettsteder og applikasjoner kan ikke forestilles uten former som gjør det mulig for oss Koble til våre brukere, og til få dataene Vi trenger for å sikre jevne transaksjoner med dem. Vi trenger gyldig brukerinngang, men vi må anskaffe det på en slik måte ikke frustrerer våre brukere for mye.

Mens vi kan forbedre brukervennligheten av våre skjemaer med smart utvalgte UX-designmønstre, har HTML5 også en innfødt mekanisme for begrensningsvalidering som tillater oss å få innspillingsfeil rett foran.

I dette innlegget vil vi fokusere på nettleser-gitt begrensning validering, og se på hvordan frontend utviklere kan sikre gyldig brukerinngang ved hjelp av HTML5.

Hvorfor trenger vi inngangs validering på forhånd

Input validering har to hovedmål. Innholdet vi får må være:

1. Nyttig

Vi trenger brukbare data vi kan jobbe med. Vi må få folk til å skrive inn realistiske data i riktig format. For eksempel er ingen som lever i dag født for 200 år siden. Å få data som dette kan virke morsomt først, men på lang sikt er det irriterende og fyller databasen med ubrukelige data.

2. Sikre

Når det gjelder sikkerhet, betyr dette at vi må hindre injeksjon av skadelig innhold - enten bevisst eller ved et uhell.

Nyttig (å få fornuftige data) kan oppnås bare på klientsiden, Backend-teamet kan ikke hjelpe for mye med dette. Å oppnå sikkerhet, Front- og backend-utviklere trenger å jobbe sammen.

Hvis frontend utviklere korrekt validerer innspill på klientsiden, vil backend-teamet må håndtere mye mindre sårbarheter. Hacking (et nettsted) innebærer ofte sender inn ekstra data, eller data i feil format. Utviklere kan bekjempe sikkerhetshull som disse, lykkes med å kjempe fra fronten.

For eksempel anbefaler denne PHP-sikkerhetsguiden å sjekke alt vi kan på klientsiden. De legger vekt på viktigheten av inngangsvalidering av frontend ved å gi mange eksempler, for eksempel:

"Input validering fungerer best med ekstremt begrensede verdier, for eksempel når noe må være et heltall, eller en alfanumerisk streng eller en HTTP-URL."

I frontend inngangsvalidering er vår jobb til pålegge rimelige begrensninger på brukerinngang. HTML5s begrensningsvalideringsfunksjon gir oss muligheten til å gjøre det.

HTML5-begrensnings validering

Før HTML5 ble frontend utviklere begrenset til validering av brukerinngang med JavaScript, som var en kjedelig og feiltakelig prosess. For å forbedre validering av klientsiden, har HTML5 introdusert en begrensning validering algoritmen som kjører i moderne nettlesere, og sjekker gyldigheten av den innsendte innsatsen.

For å gjøre evalueringen bruker algoritmen valideringsrelaterte attributter av inngangselementer, som for eksempel , </code>, og <code><select></code>. Hvis du vil vite hvordan begrensning av validering skjer trinnvis i nettleseren, sjekk ut denne WhatWG doc.</p> <p>Takket være HTML5s begrensningsvalideringsfunksjon, kan vi utføre alle <strong>standardinngangsvalideringsoppgaver</strong> på klientsiden <strong>uten JavaScript, utelukkende med HTML5</strong>.</p> <p>For å utføre mer komplekse valideringsrelaterte oppgaver, gir HTML5 oss en <strong>Begrens validering JavaScript API</strong> Vi kan bruke til å konfigurere våre tilpassede valideringsskript.</p> <h4>Validere med semantiske inngangstyper</h4> <p>HTML5 har introdusert <strong>semantiske inngangstyper</strong> som også kan brukes til, bortsett fra å indikere betydningen av elementet for brukeragenter <strong>validere brukerinngang</strong> ved å begrense brukerne til et bestemt inngangsformat.</p> <p>Foruten inngangstyper som allerede har eksistert før HTML5 (<code>tekst</code>, <code>passord</code>, <code>sende inn</code>, <code>tilbakestille</code>, <code>radio</code>, <code>avkrysnings</code>, <code>knapp</code>, <code>skjult</code>), kan vi også bruke følgende <strong>semantiske HTML5 inngangstyper</strong>: <code>e-post</code>,<code>tlf</code>,<code>url</code>,<code>Nummer</code>,<code>tid</code>,<code>Dato</code>,<code>dato tid</code>,<code>datetime-local</code>, <code>måned</code>,<code>uke</code>, <code>område</code>, <code>Søke</code>,<code>farge</code>.</p> <p>Vi kan trygt bruke HTML5-inngangstyper med eldre nettlesere, da de vil oppføre seg som en <code><input type="text"></code> feltet i nettlesere som ikke støtter dem.</p> <p>La oss se hva som skjer når brukeren går inn i feil type. Si at vi har opprettet et e-post-felt med følgende kode:</p> <pre name="code"> <form name="form" action="#" method="post"> <label for="youremail">Din epost:</label> <input type="email" name="email"> <input type="submit" value="Submit"> </form> </pre> <p>Når brukeren skriver en streng som ikke bruker et e-postformat, er begrensningsvalideringsalgoritmen <strong>sender ikke skjemaet</strong>, og <strong>returnerer en feilmelding</strong>:</p> <figure> <img src="//savtec.org/img/images_1/intro-into-html5-constraint-validation.jpg"></figure><p>Den samme regelen gjelder også andre inngangstyper, for eksempel for <code>type = "URL"</code> Brukerne kan bare sende inn et innspill som følger URL-formatet (starter med en protokoll, for eksempel <code>http: //</code> eller <code>ftp: //</code>).</p> <p>Noen inngangstyper bruker et design som <strong>Tillater ikke at brukerne oppgir feil inngangsformat</strong>, for eksempel <code>farge</code> og <code>område</code>.</p> <pre name="code"> <form name="form" action="#" method="post"> <label for="bgcol">Bakgrunnsfarge:</label> <input type="color" name="color"> <input type="submit" value="Submit"> </form> </pre> <p>Hvis vi bruker <code>farge</code> inngangstype brukeren er begrenset til å velge en farge fra fargeplukeren eller oppholde seg med standard svart. Inntastingsfeltet er <strong>begrenset av design</strong>, derfor forlater det ikke mye sjanse for brukerfeil.</p> <figure> <img src="//savtec.org/img/images_1/intro-into-html5-constraint-validation_2.jpg"></figure><p>Når det er hensiktsmessig, er det verdt å vurdere å bruke <code><select></code> HTML-kode som fungerer på samme måte som disse innspillingsformene som er begrenset av design det lar brukerne velge fra en rullegardinliste.</p> <pre name="code"> <form name="form" action="#" method="post"> <label for="favfruit">Din favorittfrukt:</label> <select name="fruit"> <option value="apple">eple</option> <option value="pear">Pære</option> <option value="orange">oransje</option> <option value="raspberry">Bringebær</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>Bruk HTML5s Validation Attributes</h4> <p>Bruke semantiske inngangstyper setter visse begrensninger på hva brukerne har lov til å sende inn, men i mange tilfeller vil vi gå litt lenger. Dette er når <strong>valideringsrelaterte attributter</strong> av <code><input></code> tag kan hjelpe oss ut.</p> <p>Valideringsrelaterte attributter tilhører bestemte typer input (de kan ikke brukes på <em>alle</em> typer) som de pålegger ytterligere begrensninger på.</p> <h5>1. <code>nødvendig</code> for å få en gyldig innsats for all del</h5> <p>De <code>nødvendig</code> Attributt er det mest kjente HTML-valideringsattributtet. Det er en <strong>boolesk attributt</strong> som betyr det <strong>tar ingen verdi</strong>, vi må bare bare plassere den inne i <code><input></code> merk hvis vi vil bruke det:</p> <pre name="code"> <input type="email" name="email" required> </pre> <p>Hvis brukeren glemmer å legge inn en verdi i et obligatorisk innfelt, må nettleseren <strong>returnerer en feilmelding</strong> Det advarer dem om å fylle i feltet, og de <strong>kan ikke sende skjemaet</strong> inntil de har gitt en gyldig inngang. Derfor er det viktig å alltid <strong>Merk visuelt</strong> obligatoriske felt til brukere.</p> <p>De <code>nødvendig</code> attributt kan være <strong>brukes sammen med følgende inngangstyper</strong>: <code>tekst</code>, <code>Søke</code>, <code>url</code>, <code>tlf</code>, <code>e-post</code>, <code>passord</code>, <code>Dato</code>, <code>dato tid</code>, <code>datetime-local</code>, <code>måned</code>, <code>uke</code>,<code>tid</code>, <code>Nummer</code>, <code>avkrysnings</code>, <code>radio</code>, <code>fil</code>, pluss med <code><textarea></code>og <code><select></code> HTML-koder.</p> <h5>2. <code>min</code>, <code>max</code> og <code>skritt</code> for nummer validering</h5> <p>De <code>min</code>, <code>max</code> og <code>skritt</code> attributter gjør det mulig for oss å <strong>sette begrensninger på nummerinngangsfeltene</strong>. De kan brukes sammen med <code>område</code>, <code>Nummer</code>, <code>Dato</code>, <code>måned</code>, <code>uke</code>, <code>dato tid</code>, <code>datetime-local</code>, og <code>tid</code> input typer.</p> <p>De <code>min</code> og <code>max</code> attributter gir en fin måte å enkelt <strong>utelukker urimelige data</strong>. Eksempelet nedenfor nedenfor krever at brukere sender en alder mellom 18 og 120.</p> <pre name="code"> <form name="form" action="#" method="post"> <label for="yourage">Din alder:</label> <input type="number" name="age" min="18" max="120"> <input type="submit" value="Submit"> </form> </pre> <p>Når begrensningsvalideringsalgoritmen støter på en brukerinngang mindre enn <code>min</code>, eller større enn <code>max</code> verdi, hindrer den fra å nå baksiden, og returnerer en feilmelding.</p> <figure> <img src="//savtec.org/img/images_1/intro-into-html5-constraint-validation_4.jpg"></figure><p>De <code>skritt</code> Egenskap <strong>angir et numerisk intervall</strong> mellom de juridiske verdiene til et numerisk inntastingsfelt. For eksempel, hvis vi vil at brukerne skal velge bare fra springår, kan vi legge til <code>trinn = "4"</code> attributt til feltet. I eksemplet nedenfor brukte jeg <code>Nummer</code> inngangstype, da det ikke er noe <code>type = "år"</code> i HTML5.</p> <pre name="code"> <form name="form" action="#" method="post"> <label for="yourleapyear">Ditt favorittspillår:</label> <input type="number" name="leapyear" min="1972" max="2016" step="4"> <input type="submit" value="Submit"> </form> </pre> <p>Med de forhåndsinnstilte begrensningene kan brukerne bare velge mellom springårene mellom 1972 og 2016 hvis de bruker den lille opp-pilen som følger med <code>Nummer</code> inngangstype. De kan også skrive inn en verdi manuelt i inntastingsfeltet, men hvis det ikke oppfyller begrensningene, vil nettleseren returnere en feilmelding.</p> <figure> <img src="//savtec.org/img/images_1/intro-into-html5-constraint-validation.gif"></figure><h5>3. <code>maks lengde</code> for validering av tekstlengde</h5> <p>De <code>maks lengde</code> attributt gjør det mulig å <strong>sett inn en maksimal tegnlengde</strong> for tekstfelt. Den kan brukes sammen med <code>tekst</code>, <code>Søke</code>, <code>url</code>, <code>tlf</code>, <code>e-post</code> og <code>passord</code> inntastetyper, og med <code><textarea></code> HTML-taggen.</p> <p>De <code>maks lengde</code> Attributt kan være en utmerket løsning for telefonnummerfelt som ikke kan ha mer enn et visst antall tegn, eller for kontaktskjemaer der vi ikke vil at brukerne skal skrive mer enn en bestemt lengde.</p> <p>Kodestykket nedenfor viser et eksempel på sistnevnte, det begrenser brukermeldinger til 500 tegn. </p> <pre name="code"> <form name="form" action="#" method="post"> <label for="yourmsg">Melding (maks 500 tegn):</label> <textarea name="msg" cols="25" rows="4" maxlength="500">

De maks lengde Egenskap returnerer ikke en feilmelding, men nettleseren lar ikke brukerne skrive mer enn det angitte tegnnummeret. Derfor er det viktig å informere brukerne om begrensningen, ellers forstår de ikke hvorfor de ikke kan fortsette med å skrive.

 
 * Ditt passord: