Intro til HTML5-begrænsning Validering

Interaktive hjemmesider og applikationer kan ikke forestilles uden formularer, der gør det muligt for os forbinde med vores brugere, og til få dataene vi har brug for for at sikre glatte transaktioner med dem. Vi har brug for gyldig brugerindgang, men vi skal erhverve det på en sådan måde ikke frustrerer vores brugere for meget.

Mens vi kan forbedre anvendeligheden af ​​vores formularer med smart udvalgt UX-designmønstre, har HTML5 også en indbygget mekanisme til begrænsning af validering, der tillader os at fange inputfejl lige i forenden.

I dette indlæg vil vi fokusere på browser-leveret begrænsning validering, og se på, hvordan frontend-udviklere kan Sikker gyldig brugerindgang ved hjælp af HTML5.

Hvorfor har vi brug for validering af indgangen til slutningen

Input validering har to hovedmål. Det indhold, vi får, er:

1. Nyttige

Vi behøver anvendelige data, vi kan arbejde med. Vi skal få folk til at komme ind realistiske data i det rigtige format. For eksempel er ingen, der lever i dag, født for 200 år siden. At få data som dette kan virke sjovt i starten, men på lang sigt er det irriterende og fylder vores database med ubrugelige data.

2. Secure

Når vi henviser til sikkerhed, betyder det, at vi skal forhindre injektion af ondsindet indhold - enten bevidst eller ved et uheld.

Nyttighed (at få rimelige data) kan opnås kun på klientsiden, backend teamet kan ikke hjælpe for meget med dette. At opnå sikkerhed, front- og backend-udviklere skal arbejde sammen.

Hvis frontend-udviklere korrekt validerer input på klientsiden, vil backend team bliver nødt til at håndtere meget mindre sårbarheder. Hacking (et websted) indebærer ofte indsender ekstra data, eller data i det forkerte format. Udviklere kan kæmpe mod sikkerhedshuller som disse, kæmpe succesfuldt fra fronten.

For eksempel anbefaler denne PHP sikkerhedsvejledning at kontrollere alt, hvad vi kan på klientsiden. De understreger vigtigheden af ​​frontend-input validering ved at give mange eksempler, såsom:

"Input validering fungerer bedst med ekstremt begrænsede værdier, fx når noget skal være et helt tal eller en alfanumerisk streng eller en HTTP-URL."

I frontend input validering er vores job til pålægge rimelige begrænsninger på brugerindgang. HTML5's begrænsningsvalideringsfunktion giver os mulighed for at gøre det.

HTML5-begrænsning validering

Før HTML5 var frontend-udviklere begrænset til validering af brugerindgang med JavaScript, som var en kedelig og fejlagtig proces. For at forbedre validering af klientsideformularer har HTML5 introduceret en begrænsning validering algoritme, der kører i moderne browsere, og kontrollerer gyldigheden af ​​det indsendte input.

For at foretage evalueringen bruger algoritmen den valideringsrelaterede attributter af inputelementer, såsom , </code>, og <code><select></code>. Hvis du vil vide, hvordan begrænsning af validering sker trin for trin i browseren, skal du tjekke denne WhatWG doc.</p> <p>Takket være HTML5's begrænsningsvalideringsfunktion kan vi udføre alle <strong>standard input validering opgaver</strong> på klientsiden <strong>uden JavaScript, udelukkende med HTML5</strong>.</p> <p>For at udføre mere komplekse valideringsrelaterede opgaver giver HTML5 os en <strong>Begræns validering JavaScript API</strong> vi kan bruge til at oprette vores brugerdefinerede validering scripts.</p> <h4>Validér med semantiske indgangstyper</h4> <p>HTML5 har introduceret <strong>semantiske inputtyper</strong> at det - udover at angive betydningen af ​​elementet for brugeragenter - også kan bruges til <strong>validere brugerindgang</strong> ved at begrænse brugerne til et bestemt inputformat.</p> <p>Udover de inputtyper, der allerede har eksisteret før HTML5 (<code>tekst</code>, <code>adgangskode</code>, <code>Indsend</code>, <code>Nulstil</code>, <code>radio</code>, <code>afkrydsningsfeltet</code>, <code>knap</code>, <code>skjult</code>), kan vi også bruge følgende <strong>semantiske HTML5 inputtyper</strong>: <code>e-mail</code>,<code>tel</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>uge</code>, <code>rækkevidde</code>, <code>Søg</code>,<code>farve</code>.</p> <p>Vi kan sikkert bruge HTML5-inputtyper med ældre browsere, da de opfører sig som en <code><input type="text"></code> felt i browsere, der ikke understøtter dem.</p> <p>Lad os se, hvad der sker, når brugeren indtaster den forkerte indtastningstype. Sig, at vi har oprettet et e-mail-indtastningsfelt med følgende kode:</p> <pre name="code"> <form name="form" action="#" method="post"> <label for="youremail">Din email:</label> <input type="email" name="email"> <input type="submit" value="Submit"> </form> </pre> <p>Når brugeren skriver en streng, der ikke bruger et e-mail-format, er begrænsningsvalideringsalgoritmen <strong>Indsender ikke formularen</strong>, og <strong>returnerer en fejlmeddelelse</strong>:</p> <figure> <img src="//savtec.org/img/images_1/intro-into-html5-constraint-validation.jpg"></figure><p>Den samme regel gælder også andre inputtyper, for eksempel til <code>type = "url"</code> Brugere kan kun indsende et input, der følger URL-formatet (starter med en protokol, f.eks <code>http: //</code> eller <code>ftp: //</code>).</p> <p>Nogle inputtyper bruger et design som <strong>Tillader ikke engang brugere at indtaste et forkert inputformat</strong>, for eksempel <code>farve</code> og <code>rækkevidde</code>.</p> <pre name="code"> <form name="form" action="#" method="post"> <label for="bgcol">Baggrundsfarve:</label> <input type="color" name="color"> <input type="submit" value="Submit"> </form> </pre> <p>Hvis vi bruger <code>farve</code> input type brugeren er begrænset til enten at vælge en farve fra farvevælgeren eller opholde sig med standard sorten. Indtastningsfeltet er <strong>begrænset af design</strong>, derfor giver det ikke meget chance for brugerfejl.</p> <figure> <img src="//savtec.org/img/images_1/intro-into-html5-constraint-validation_2.jpg"></figure><p>Når det er hensigtsmæssigt, er det værd at overveje at bruge <code><select></code> HTML-tag, der virker på samme måde som disse indbyggede begrænsninger; det lader brugerne vælge fra en dropdown liste.</p> <pre name="code"> <form name="form" action="#" method="post"> <label for="favfruit">Din favoritfrugt:</label> <select name="fruit"> <option value="apple">Æble</option> <option value="pear">Pære</option> <option value="orange">orange</option> <option value="raspberry">Hindbæ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>Brug HTML5's Validation Attributes</h4> <p>Brug af semantiske inputtyper sætter visse begrænsninger på, hvad brugere må indsende, men i mange tilfælde ønsker vi at gå lidt længere. Dette er når <strong>valideringsrelaterede attributter</strong> af <code><input></code> tag kan hjælpe os ud.</p> <p>Valideringsrelaterede attributter tilhører bestemte inputtyper (de kan ikke bruges på <em>alle</em> typer), som de pålægger yderligere begrænsninger for.</p> <h5>1. <code>påkrævet</code> for at få en gyldig input på alle måder</h5> <p>Det <code>påkrævet</code> Attribut er den mest kendte HTML-valideringsattribut. Det er en <strong>boolesk attribut</strong> hvilket betyder det <strong>tager ikke nogen værdi</strong>, vi skal bare simpelthen placere den inde i <code><input></code> tag hvis vi vil bruge det:</p> <pre name="code"> <input type="email" name="email" required> </pre> <p>Hvis brugeren glemmer at indtaste en værdi i et påkrævet inputfelt, skal browseren <strong>returnerer en fejlmeddelelse</strong> Det advarer dem om at udfylde marken, og de <strong>kan ikke indsende formularen</strong> indtil de har givet et gyldigt input. Derfor er det vigtigt altid <strong>markere visuelt</strong> krævede felter til brugere.</p> <p>Det <code>påkrævet</code> attributten kan være <strong>bruges sammen med følgende inputtyper</strong>: <code>tekst</code>, <code>Søg</code>, <code>url</code>, <code>tel</code>, <code>e-mail</code>, <code>adgangskode</code>, <code>dato</code>, <code>dato tid</code>, <code>datetime-local</code>, <code>måned</code>, <code>uge</code>,<code>tid</code>, <code>nummer</code>, <code>afkrydsningsfeltet</code>, <code>radio</code>, <code>fil</code>, plus med <code><textarea></code>og <code><select></code> HTML tags.</p> <h5>2. <code>min</code>, <code>max</code> og <code>trin</code> for nummer validering</h5> <p>Det <code>min</code>, <code>max</code> og <code>trin</code> attributter sætter os i stand til <strong>sætte begrænsninger på nummer input felter</strong>. De kan bruges sammen med <code>rækkevidde</code>, <code>nummer</code>, <code>dato</code>, <code>måned</code>, <code>uge</code>, <code>dato tid</code>, <code>datetime-local</code>, og <code>tid</code> input typer.</p> <p>Det <code>min</code> og <code>max</code> attributter giver en god måde at nemt <strong>udelukker urimelige data</strong>. Eksempelet nedenfor nedenfor tvinger brugerne til at indgive en alder mellem 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 begrænsningsvalideringsalgoritmen støder på en brugerindgang mindre end <code>min</code>, eller større end <code>max</code> værdi forhindrer det i at nå bagenden og returnerer en fejlmeddelelse.</p> <figure> <img src="//savtec.org/img/images_1/intro-into-html5-constraint-validation_4.jpg"></figure><p>Det <code>trin</code> attribut <strong>angiver et numerisk interval</strong> mellem de retlige værdier af et numerisk indtastningsfelt. For eksempel, hvis vi ønsker, at brugerne kun vælger fra springår, kan vi tilføje <code>trin = "4"</code> attribut til feltet. I eksemplet nedenfor brugte jeg <code>nummer</code> input type, da der ikke er nogen <code>type = "år"</code> i HTML5.</p> <pre name="code"> <form name="form" action="#" method="post"> <label for="yourleapyear">Dit foretrukne springår:</label> <input type="number" name="leapyear" min="1972" max="2016" step="4"> <input type="submit" value="Submit"> </form> </pre> <p>Med de forudbestemte begrænsninger kan brugerne kun vælge mellem springårene mellem 1972 og 2016, hvis de bruger den lille pil op, der følger med <code>nummer</code> input type. De kan også indtaste en værdi manuelt i inputfeltet, men hvis det ikke overholder begrænsningerne, returnerer browseren en fejlmeddelelse.</p> <figure> <img src="//savtec.org/img/images_1/intro-into-html5-constraint-validation.gif"></figure><h5>3. <code>MAXLENGTH</code> til validering af tekstlængde</h5> <p>Det <code>MAXLENGTH</code> attribut gør det muligt at <strong>Indstil en maksimal tegnlængde</strong> for tekstindtastningsfelter. Den kan bruges sammen med <code>tekst</code>, <code>Søg</code>, <code>url</code>, <code>tel</code>, <code>e-mail</code> og <code>adgangskode</code> inputtyper og med <code><textarea></code> HTML-tag.</p> <p>Det <code>MAXLENGTH</code> attribut kan være en glimrende løsning til telefonnummerfelter, der ikke kan have mere end et bestemt antal tegn, eller for kontaktformularer, hvor vi ikke ønsker, at brugerne skal skrive mere end en bestemt længde.</p> <p>Kodestykket nedenfor viser et eksempel på sidstnævnte, det begrænser brugerbeskeder til 500 tegn. </p> <pre name="code"> <form name="form" action="#" method="post"> <label for="yourmsg">Besked (maks 500 tegn):</label> <textarea name="msg" cols="25" rows="4" maxlength="500">

Det MAXLENGTH attribut returnerer ikke en fejlmeddelelse, men browseren lader simpelthen ikke brugere skrive mere end det angivne tegnnummer. Derfor er det afgørende at informere brugerne om begrænsningen, ellers forstår de ikke, hvorfor de ikke kan fortsætte med at skrive.

 
 * Dit kodeord: