Hemsida » Webbdesign » Intro till HTML5-begränsningsvalidering

    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 ,

    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.

    4. mönster för Regex validering

    De mönster attribut tillåter oss att använd regelbundna uttryck i vår inmatningsvalideringsprocess. Ett reguljärt uttryck är a fördefinierade uppsättning tecken som bildar ett visst mönster. Vi kan använda den antingen för att söka strängar som följer mönstret, eller för att genomdriva ett visst format definierat av mönstret.

    Med mönster attribut vi kan göra det senare - begränsa användarna att skicka in deras inmatning i ett format som matchar det angivna reguljära uttrycket.

    De mönster Attributet har många användningsfall, men det kan vara särskilt användbart när vi vill validera ett lösenordsfält.

    I exemplet nedan krävs att användare anger ett lösenord som är minst 8 tecken långt och innehåller minst en bokstav och ett nummer (källan till den regex jag använde).

     

    Några fler saker

    I den här artikeln tittade vi på hur man använder sig av webbformulär validering av webbläsare tillhandahållen av HTML5: s nativa begränsningsvalideringsalgoritm. För att skapa våra anpassade valideringsskript måste vi använda API för begränsningsvalidering som kan vara nästa steg i validering av raffinering.

    HTML5-formulär är tillgängliga med hjälpteknik, så vi behöver inte nödvändigtvis använda aria-required ARIA-attribut för att markera obligatoriska inmatningsfält för skärmsläsare. Det kan dock fortfarande vara användbart att lägga till tillgänglighetsstöd för äldre webbläsare. Det är också möjligt att välja bort från begränsningsvalideringen genom att lägga till novalidate booleskt attribut till

    element.