Intro in HTML5 Constraint Validation

Interactieve websites en applicaties kunnen niet worden voorgesteld zonder formulieren die ons daartoe in staat stellen contact maken met onze gebruikers, en naar verkrijg de gegevens we nodig hebben om soepele transacties met hen te beveiligen. We hebben het nodig geldige gebruikersinvoer, we moeten het echter op een manier verkrijgen frustreert niet onze gebruikers te veel.

Hoewel we de bruikbaarheid van onze formulieren met slim gekozen UX-ontwerppatronen kunnen verbeteren, heeft HTML5 ook een eigen mechanisme voor beperkingsvalidatie dat ons in staat stelt om vang invoerfouten direct in de front-end.

In deze post zullen we ons concentreren op door de browser geleverde beperkingsvalidatie, en kijk hoe frontend-ontwikkelaars kunnen werken beveiligde geldige gebruikersinvoer beveiligen met HTML5.

Waarom hebben we Front-End Input Validatie nodig?

Inputvalidatie heeft twee hoofddoelen. De inhoud die we krijgen, moet zijn:

1. Handig

Wij hebben nodig bruikbare gegevens waarmee we kunnen werken. We moeten mensen binnen laten komen realistische gegevens in het juiste formaat. Niemand die nu nog leeft, is bijvoorbeeld 200 jaar geleden geboren. Dergelijke gegevens kunnen in het begin misschien grappig lijken, maar op de lange termijn is het vervelend en bevolkt onze database met nutteloze gegevens.

2. Veilig

Als het om beveiliging gaat, betekent dit dat we dat moeten doen voorkomen dat er schadelijke inhoud wordt geïnjecteerd - of opzettelijk of per ongeluk.

Nut (redelijke gegevens verkrijgen) kan worden bereikt alleen aan de kant van de klant, het backend-team kan hier niet teveel aan doen. Te bereiken veiligheid, ontwikkelaars van voor- en achterkant moeten samenwerken.

Als ontwikkelaars van frontend de ingang van de client goed valideren, is de Het backend-team zal met veel minder kwetsbaarheden te maken krijgen. Hacking (een site) houdt vaak in extra gegevens indienen, of gegevens in het verkeerde formaat. Ontwikkelaars kunnen beveiligingsgaten zoals deze bevechten, met succes vechten vanaf de voorkant.

Deze PHP-beveiligingsgids raadt bijvoorbeeld aan om alles wat we kunnen aan de kant van de klant te controleren. Ze benadrukken het belang van frontend invoervalidatie door veel voorbeelden te geven, zoals:

"Inputvalidatie werkt het beste met extreem beperkte waarden, bijvoorbeeld wanneer iets een geheel getal of een alfanumerieke tekenreeks of HTTP-URL moet zijn."

In frontend invoervalidatie is het onze taak redelijke beperkingen opleggen op gebruikersinvoer. De beperkingsvalidatiefunctie van HTML5 biedt ons de middelen om dit te doen.

HTML5 Constraint-validatie

Vóór HTML5 waren frontend-ontwikkelaars beperkt tot het valideren van gebruikersinvoer met JavaScript, dat was een vervelend en foutgevoelig proces. Om de validering van de clientzijde te verbeteren, heeft HTML5 een a constraint validatie algoritme dat wordt uitgevoerd in moderne browsers, en controleert de geldigheid van de ingezonden input.

Om de evaluatie te maken, gebruikt het algoritme de validatie-gerelateerde attributen van invoerelementen, zoals , </code>, en <code><select></code>. Als u wilt weten hoe constraint-validatie stap voor stap in de browser gebeurt, bekijk dan dit WhatWG-document.</p> <p>Dankzij de beperkingsvalidatiefunctie van HTML5 kunnen we alles uitvoeren <strong>standaard invoervalidatietaken</strong> aan de kant van de klant <strong>zonder JavaScript, alleen met HTML5</strong>.</p> <p>Voor het uitvoeren van complexere validatietaken, biedt HTML5 ons een <strong>Constraint Validation JavaScript API</strong> we kunnen gebruiken om onze aangepaste validatiescripts in te stellen.</p> <h4>Valideren met semantische invoertypen</h4> <p>HTML5 is geïntroduceerd <strong>semantische invoertypes</strong> dat - afgezien van het aangeven van de betekenis van het element voor gebruikersagenten - ook kan worden gebruikt voor <strong>valideren gebruikersinvoer</strong> door gebruikers te beperken tot een bepaald invoerformaat.</p> <p>Naast de invoertypen die al bestonden vóór HTML5 (<code>tekst</code>, <code>wachtwoord</code>, <code>voorleggen</code>, <code>reset</code>, <code>radio-</code>, <code>checkbox</code>, <code>knop</code>, <code>verborgen</code>), we kunnen ook het volgende gebruiken <strong>semantische HTML5-invoertypen</strong>: <code>e-mail</code>,<code>tel</code>,<code>url</code>,<code>aantal</code>,<code>tijd</code>,<code>datum</code>,<code>datum Tijd</code>,<code>datetime-local</code>, <code>maand</code>,<code>week</code>, <code>reeks</code>, <code>zoeken</code>,<code>kleur</code>.</p> <p>We kunnen HTML5-invoertypen veilig gebruiken met oudere browsers, aangezien deze zich als een <code><input type="text"></code> veld in browsers die ze niet ondersteunen.</p> <p>Laten we eens kijken wat er gebeurt als de gebruiker het verkeerde invoertype invoert. Stel dat we een invoerveld voor e-mail hebben gemaakt met de volgende code:</p> <pre name="code"> <form name="form" action="#" method="post"> <label for="youremail">Jouw email:</label> <input type="email" name="email"> <input type="submit" value="Submit"> </form> </pre> <p>Wanneer de gebruiker een tekenreeks typt die geen e-mailindeling gebruikt, wordt het beperkingsvalidatiealgoritme gebruikt <strong>verzendt het formulier niet</strong>, en <strong>geeft een foutmelding terug</strong>:</p> <figure> <img src="//savtec.org/img/images_1/intro-into-html5-constraint-validation.jpg"></figure><p>Dezelfde regel is ook van toepassing op andere invoertypen, bijvoorbeeld voor <code>type = "URL"</code> gebruikers kunnen alleen een invoer indienen die het URL-formaat volgt (begint met een protocol, zoals <code>http: //</code> of <code>ftp: //</code>).</p> <p>Sommige invoertypen gebruiken een ontwerp dat <strong>staat gebruikers zelfs niet toe om een ​​verkeerd invoerformaat in te voeren</strong>, bijvoorbeeld <code>kleur</code> en <code>reeks</code>.</p> <pre name="code"> <form name="form" action="#" method="post"> <label for="bgcol">Achtergrond kleur:</label> <input type="color" name="color"> <input type="submit" value="Submit"> </form> </pre> <p>Als we de <code>kleur</code> invoertype de gebruiker wordt beperkt tot het kiezen van een kleur uit de kleurkiezer of uit de standaardkleur zwart. Het invoerveld is <strong>beperkt door design</strong>, daarom laat het niet veel kans op gebruikersfouten.</p> <figure> <img src="//savtec.org/img/images_1/intro-into-html5-constraint-validation_2.jpg"></figure><p>Wanneer het passend is, is het de moeite waard om te overwegen het gebruik van de <code><select></code> HTML-tag die op dezelfde manier werkt als deze ingesloten invoertypen; hiermee kunnen gebruikers kiezen uit een vervolgkeuzelijst.</p> <pre name="code"> <form name="form" action="#" method="post"> <label for="favfruit">Je favoriete fruit:</label> <select name="fruit"> <option value="apple">appel</option> <option value="pear">Peer</option> <option value="orange">Oranje</option> <option value="raspberry">Framboos</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>Gebruik de Validation Attributes van HTML5</h4> <p>Het gebruik van semantische invoertypen stelt bepaalde beperkingen in aan wat gebruikers mogen indienen, maar in veel gevallen willen we een beetje verder gaan. Dit is wanneer het <strong>validatie gerelateerde attributen</strong> van de <code><input></code> tag kan ons helpen.</p> <p>Validatie-gerelateerde attributen behoren tot bepaalde invoertypen (ze kunnen niet worden gebruikt op <em>allemaal</em> typen) waarop zij verdere beperkingen stellen.</p> <h5>1. <code>verplicht</code> voor het verkrijgen van een geldige invoer op alle mogelijke manieren</h5> <p>De <code>verplicht</code> kenmerk is het meest bekende HTML-validatieattribuut. Het is een <strong>boolean-kenmerk</strong> wat betekent het <strong>heeft geen enkele waarde</strong>, we moeten het simpelweg in de <code><input></code> label als we het willen gebruiken:</p> <pre name="code"> <input type="email" name="email" required> </pre> <p>Als de gebruiker vergeet om een ​​waarde in te voeren in een vereist invoerveld, de browser <strong>geeft een foutmelding terug</strong> die hen waarschuwt om het veld in te vullen, en zij <strong>kan het formulier niet verzenden</strong> totdat ze een geldige invoer hebben verstrekt. Daarom is het altijd belangrijk om te doen <strong>markeer visueel</strong> verplichte velden voor gebruikers.</p> <p>De <code>verplicht</code> attribuut kan zijn <strong>gebruikt samen met de volgende invoertypen</strong>: <code>tekst</code>, <code>zoeken</code>, <code>url</code>, <code>tel</code>, <code>e-mail</code>, <code>wachtwoord</code>, <code>datum</code>, <code>datum Tijd</code>, <code>datetime-local</code>, <code>maand</code>, <code>week</code>,<code>tijd</code>, <code>aantal</code>, <code>checkbox</code>, <code>radio-</code>, <code>het dossier</code>, plus met de <code><textarea></code>en <code><select></code> HTML-tags.</p> <h5>2. <code>min</code>, <code>max</code> en <code>stap</code> voor nummervalidatie</h5> <p>De <code>min</code>, <code>max</code> en <code>stap</code> attributen stellen ons in staat om <strong>beperkingen stellen aan nummerinvoervelden</strong>. Ze kunnen samen met de. Worden gebruikt <code>reeks</code>, <code>aantal</code>, <code>datum</code>, <code>maand</code>, <code>week</code>, <code>datum Tijd</code>, <code>datetime-local</code>, en <code>tijd</code> invoertypes.</p> <p>De <code>min</code> en <code>max</code> attributen bieden een geweldige manier om eenvoudig te zijn <strong>sluit onredelijke gegevens uit</strong>. Het onderstaande voorbeeld dwingt gebruikers bijvoorbeeld om een ​​leeftijd tussen 18 en 120 in te dienen.</p> <pre name="code"> <form name="form" action="#" method="post"> <label for="yourage">Jouw leeftijd:</label> <input type="number" name="age" min="18" max="120"> <input type="submit" value="Submit"> </form> </pre> <p>Wanneer het beperkingsvalidatiealgoritme een gebruikersinvoer tegenkomt die kleiner is dan de <code>min</code>, of groter dan de <code>max</code> waarde, voorkomt het dat het de backend bereikt en retourneert een foutbericht.</p> <figure> <img src="//savtec.org/img/images_1/intro-into-html5-constraint-validation_4.jpg"></figure><p>De <code>stap</code> attribuut <strong>specificeert een numeriek interval</strong> tussen de wettelijke waarden van een numeriek invoerveld. Als we bijvoorbeeld willen dat gebruikers alleen kiezen uit schrikkeljaren, kunnen we het toevoegen <code>stap = "4"</code> attribuut aan het veld. In het onderstaande voorbeeld gebruikte ik de <code>aantal</code> invoertype, want er is geen <code>type = "jaar"</code> in HTML5.</p> <pre name="code"> <form name="form" action="#" method="post"> <label for="yourleapyear">Je favoriete schrikkeljaar:</label> <input type="number" name="leapyear" min="1972" max="2016" step="4"> <input type="submit" value="Submit"> </form> </pre> <p>Met de vooraf ingestelde beperkingen kunnen gebruikers alleen kiezen tussen schrikkeljaren tussen 1972 en 2016 als ze de kleine pijl naar boven gebruiken die bij de <code>aantal</code> invoertype. Ze kunnen ook handmatig een waarde in het invoerveld typen, maar in het geval dat het niet aan de beperkingen voldoet, zal de browser een foutmelding geven.</p> <figure> <img src="//savtec.org/img/images_1/intro-into-html5-constraint-validation.gif"></figure><h5>3. <code>maximale lengte</code> voor validatie van de tekstlengte</h5> <p>De <code>maximale lengte</code> kenmerk maakt het mogelijk om <strong>stel een maximale tekenlengte in</strong> voor tekstuele invoervelden. Het kan samen met de. Worden gebruikt <code>tekst</code>, <code>zoeken</code>, <code>url</code>, <code>tel</code>, <code>e-mail</code> en <code>wachtwoord</code> invoertypen en met de <code><textarea></code> HTML-tag.</p> <p>De <code>maximale lengte</code> kenmerk kan een uitstekende oplossing zijn voor telefoonnummersvelden die niet meer dan een bepaald aantal tekens kunnen bevatten, of voor contactformulieren waarbij we niet willen dat gebruikers meer dan een bepaalde lengte schrijven.</p> <p>Het codefragment hieronder toont een voorbeeld voor de laatste, het beperkt gebruikersberichten tot 500 tekens. </p> <pre name="code"> <form name="form" action="#" method="post"> <label for="yourmsg">Bericht (max. 500 tekens):</label> <textarea name="msg" cols="25" rows="4" maxlength="500">

De maximale lengte attribuut geeft geen foutmelding terug, maar de browser laat gebruikers simpelweg niet meer typen dan het opgegeven tekennummer. Dat is waarom het cruciaal is om informeer gebruikers over de beperking, anders zullen ze niet begrijpen waarom ze niet kunnen doorgaan met typen.

 
 * Uw wachtwoord: