Intro till HTML5-begränsningsvalidering

Interaktiva webbplatser och applikationer kan inte föreställa sig utan formulär som gör det möjligt för oss att ansluta till våra användare, och till skaffa data Vi behöver för att säkerställa smidiga transaktioner med dem. Vi behöver Giltig användarinmatning, men vi måste förvärva det på ett sätt som frustrerar inte våra användare för mycket.

Medan vi kan förbättra användbarheten hos våra former med smart utvalda UX-designmönster, har HTML5 också en inbyggd mekanism för begränsningsvalidering som tillåter oss att fånga inmatningsfel direkt i fronten.

I det här inlägget fokuserar vi på webbläsar-levererad begränsning validering, och titta på hur frontend utvecklare kan säkra giltig användarinmatning med hjälp av HTML5.

Varför behöver vi Input Validation

Input validering har två huvudmål. Innehållet vi får behöver vara:

1. Användbar

Vi behöver användbara data vi kan arbeta med. Vi måste få folk att komma in realistiska data i rätt format. Till exempel, ingen som lever idag är född för 200 år sedan. Att få data som detta kan tyckas roligt först, men på lång sikt är det irriterande och fyller vår databas med värdelösa data.

2. Säkra

När vi hänvisar till säkerhet betyder det att vi behöver förhindra injektion av skadligt innehåll - oavsiktligt eller oavsiktligt.

Användbarhet (få rimliga data) kan uppnås bara på klientsidan, backend-laget kan inte hjälpa för mycket med detta. Att uppnå säkerhet, Front- och backend-utvecklare behöver arbeta tillsammans.

Om frontendutvecklare korrekt validerar inmatningen på klientsidan, ska backend team kommer att behöva hantera mycket mindre sårbarheter. Hacking (en sida) innebär ofta skicka in extra data, eller data i fel format. Utvecklare kan kämpa med säkerhetshål som dessa, kämpa framgångsrikt från fronten.

Till exempel rekommenderar denna PHP säkerhetsguide att kontrollera allt vi kan på klientsidan. De betonar vikten av input-validering genom att ge många exempel, såsom:

"Input validering fungerar bäst med extremt begränsade värden, t ex när något måste vara ett heltal, eller en alfanumerisk sträng eller en HTTP-URL."

I frontend-inmatningsvalideringen är vårt jobb att ålägga rimliga hinder på användarinmatning. HTML5: s begränsningsvalideringsfunktion ger oss möjligheterna att göra det.

Validering av HTML5-begränsning

Innan HTML5 var frontendutvecklare begränsade till validering av användarinmatning med JavaScript, vilket var en tråkig och felaktig process. För att förbättra validering av klientsidans formulär har HTML5 introducerat en begränsning validering algoritm som körs i moderna webbläsare, och kontrollerar giltigheten för den inlämnade inmatningen.

För att göra utvärderingen använder algoritmen valideringsrelaterade attribut för inmatningselement, som , </code>, och <code><select></code>. Om du vill veta hur begränsningsvalideringen sker stegvis i webbläsaren kolla in det här WhatWG doc.</p> <p>Tack vare HTML5: s begränsningsvalideringsfunktion kan vi utföra allt <strong>standardinmatningsvalideringsuppgifter</strong> på klientsidan <strong>utan JavaScript, enbart med HTML5</strong>.</p> <p>För att utföra mer komplexa valideringsrelaterade uppgifter, ger HTML5 oss en <strong>Begränsa validering JavaScript API</strong> Vi kan använda för att konfigurera våra anpassade valideringsskript.</p> <h4>Validera med semantiska ingångstyper</h4> <p>HTML5 har introducerat <strong>semantiska ingångstyper</strong> det kan - förutom att ange betydelsen av elementet för användaragenter - också användas <strong>validera användarinmatning</strong> genom att begränsa användarna till ett visst inmatningsformat.</p> <p>Förutom de ingångstyper som redan existerat före HTML5 (<code>text</code>, <code>Lösenord</code>, <code>lämna</code>, <code>återställa</code>, <code>radio</code>, <code>checkbox</code>, <code>knapp</code>, <code>dold</code>), kan vi också använda följande <strong>semantiska HTML5 inmatningstyper</strong>: <code>e-post</code>,<code>tel</code>,<code>url</code>,<code>siffra</code>,<code>tid</code>,<code>datum</code>,<code>datum Tid</code>,<code>datetime-lokal</code>, <code>månad</code>,<code>vecka</code>, <code>räckvidd</code>, <code>Sök</code>,<code>Färg</code>.</p> <p>Vi kan säkert använda HTML5-inmatningstyper med äldre webbläsare, eftersom de kommer att verka som en <code><input type="text"></code> fält i webbläsare som inte stöder dem.</p> <p>Låt oss se vad som händer när användaren går in i fel inmatningstyp. Säg att vi har skapat ett e-postinmatningsfält med följande kod:</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 användaren skriver en sträng som inte använder ett e-postformat, är begränsningsvalideringsalgoritmen <strong>skickar inte formuläret</strong>, och <strong>returnerar ett felmeddelande</strong>:</p> <figure> <img src="//savtec.org/img/images_1/intro-into-html5-constraint-validation.jpg"></figure><p>Samma regel gäller även andra ingående typer, till exempel för <code>type = "URL"</code> Användare kan bara skicka in en inmatning som följer URL-formatet (börjar med ett protokoll, t.ex. <code>http: //</code> eller <code>ftp: //</code>).</p> <p>Vissa ingångstyper använder en design som <strong>tillåter inte ens användarna att ange ett felaktigt inmatningsformat</strong>, till exempel <code>Färg</code> och <code>räckvidd</code>.</p> <pre name="code"> <form name="form" action="#" method="post"> <label for="bgcol">Bakgrundsfärg:</label> <input type="color" name="color"> <input type="submit" value="Submit"> </form> </pre> <p>Om vi ​​använder <code>Färg</code> Inmatningstyp Användaren är tvungen att antingen välja en färg från färgväljaren eller stanna med standard svart. Inmatningsfältet är <strong>begränsad av designen</strong>, Därför lämnar det inte mycket chans för användarfel.</p> <figure> <img src="//savtec.org/img/images_1/intro-into-html5-constraint-validation_2.jpg"></figure><p>När det är lämpligt är det värt att överväga att använda <code><select></code> HTML-tagg som fungerar på samma sätt som dessa ingångstyper av begränsad typ. det låter användarna välja från en rullgardinslista.</p> <pre name="code"> <form name="form" action="#" method="post"> <label for="favfruit">Din favoritfrukt:</label> <select name="fruit"> <option value="apple">Äpple</option> <option value="pear">Päron</option> <option value="orange">Orange</option> <option value="raspberry">Hallon</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>Använd HTML5: s Validation Attributes</h4> <p>Att använda semantiska ingångstyper ställer vissa begränsningar på vad användarna får lämna in, men i många fall vill vi gå lite längre. Det här är när <strong>valideringsrelaterade attribut</strong> av <code><input></code> tagg kan hjälpa oss.</p> <p>Valideringsrelaterade attribut hör till vissa typer av inmatningar (de kan inte användas på <em>Allt</em> typer) som de påför ytterligare begränsningar.</p> <h5>1. <code>nödvändig</code> för att få en giltig inmatning med alla medel</h5> <p>De <code>nödvändig</code> Attribut är det mest kända HTML-valideringsattributet. Det är en <strong>booleskt attribut</strong> vilket betyder det <strong>tar inget värde</strong>, vi måste helt enkelt placera den inuti <code><input></code> tagga om vi vill använda det:</p> <pre name="code"> <input type="email" name="email" required> </pre> <p>Om användaren glömmer att ange ett värde i ett obligatoriskt inmatningsfält, ska webbläsaren <strong>returnerar ett felmeddelande</strong> som varnar dem för att fylla i fältet, och de <strong>kan inte lämna in formuläret</strong> tills de har gett en giltig inmatning. Därför är det viktigt att alltid <strong>markera visuellt</strong> obligatoriska fält till användare.</p> <p>De <code>nödvändig</code> attributet kan vara <strong>används tillsammans med följande ingångstyper</strong>: <code>text</code>, <code>Sök</code>, <code>url</code>, <code>tel</code>, <code>e-post</code>, <code>Lösenord</code>, <code>datum</code>, <code>datum Tid</code>, <code>datetime-lokal</code>, <code>månad</code>, <code>vecka</code>,<code>tid</code>, <code>siffra</code>, <code>checkbox</code>, <code>radio</code>, <code>fil</code>, plus med <code><textarea></code>och <code><select></code> HTML-taggar.</p> <h5>2. <code>min</code>, <code>max</code> och <code>steg</code> för nummervalidering</h5> <p>De <code>min</code>, <code>max</code> och <code>steg</code> attribut gör det möjligt för oss att <strong>sätta begränsningar på antal inmatningsfält</strong>. De kan användas tillsammans med <code>räckvidd</code>, <code>siffra</code>, <code>datum</code>, <code>månad</code>, <code>vecka</code>, <code>datum Tid</code>, <code>datetime-lokal</code>, och <code>tid</code> inmatningstyper.</p> <p>De <code>min</code> och <code>max</code> attribut ger ett bra sätt att enkelt <strong>utesluta orimliga uppgifter</strong>. Exempelvis tvingar exemplet nedan användarna att skicka en ålder mellan 18 och 120.</p> <pre name="code"> <form name="form" action="#" method="post"> <label for="yourage">Din ålder:</label> <input type="number" name="age" min="18" max="120"> <input type="submit" value="Submit"> </form> </pre> <p>När begränsningsvalideringsalgoritmen stöter på en användarinmatning mindre än <code>min</code>, eller större än <code>max</code> värde, hindrar det från att nå baksidan och returnerar ett felmeddelande.</p> <figure> <img src="//savtec.org/img/images_1/intro-into-html5-constraint-validation_4.jpg"></figure><p>De <code>steg</code> attribut <strong>anger ett numeriskt intervall</strong> mellan de lagliga värdena för ett numeriskt inmatningsfält. Till exempel, om vi vill att användarna bara ska välja från språngår kan vi lägga till <code>steg = "4"</code> attribut till fältet. I exemplet nedan använde jag <code>siffra</code> ingångstyp, eftersom det inte finns något <code>type = "år"</code> i HTML5.</p> <pre name="code"> <form name="form" action="#" method="post"> <label for="yourleapyear">Ditt favoritskottår:</label> <input type="number" name="leapyear" min="1972" max="2016" step="4"> <input type="submit" value="Submit"> </form> </pre> <p>Med de förinställda begränsningarna kan användarna bara välja mellan språngår mellan 1972 och 2016 om de använder den lilla upp-pilen som följer med <code>siffra</code> inmatningstyp. De kan också skriva ett värde manuellt i inmatningsfältet, men om det inte uppfyller begränsningarna kommer webbläsaren att returnera ett felmeddelande.</p> <figure> <img src="//savtec.org/img/images_1/intro-into-html5-constraint-validation.gif"></figure><h5>3. <code>Maxlängd</code> för val av textlängd</h5> <p>De <code>Maxlängd</code> attribut gör det möjligt att <strong>Ange maximal teckenlängd</strong> för textinmatningsfält. Den kan användas tillsammans med <code>text</code>, <code>Sök</code>, <code>url</code>, <code>tel</code>, <code>e-post</code> och <code>Lösenord</code> ingångstyper och med <code><textarea></code> HTML-tagg.</p> <p>De <code>Maxlängd</code> Attribut kan vara en utmärkt lösning för telefonnummerfält som inte kan ha mer än ett visst antal tecken, eller för kontaktformulär där vi inte vill att användarna ska skriva mer än en viss längd.</p> <p>Kodsrutan nedan visar ett exempel på det senare, det begränsar användarmeddelanden till 500 tecken. </p> <pre name="code"> <form name="form" action="#" method="post"> <label for="yourmsg">Meddelande (max 500 tecken):</label> <textarea name="msg" cols="25" rows="4" maxlength="500">

De Maxlängd attribut returnerar inte ett felmeddelande, men webbläsaren låter helt enkelt inte skriva in mer än det angivna teckennumret. Därför är det viktigt att informera användarna om begränsningen, annars förstår de inte varför de inte kan fortsätta med att skriva.

 
 * Ditt lösenord: