Startpagina » Webontwerp » Intro in HTML5 Constraint Validation

    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 ,

    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.

    4. patroon voor Regex-validatie

    De patroon kenmerk staat ons toe om gebruik reguliere expressies in ons inputvalidatieproces. Een reguliere expressie is een voorgedefinieerde set tekens die een bepaald patroon vormen. We kunnen het gebruiken om te zoeken naar reeksen die het patroon volgen, of om een ​​bepaald formaat af te dwingen dat door het patroon wordt gedefinieerd.

    Met de patroon attribuut kunnen we dit doen - beperk gebruikers om hun input in een formaat in te dienen komt overeen met de gegeven reguliere expressie.

    De patroon kenmerk heeft veel gebruiksgevallen, maar het kan vooral nuttig zijn wanneer we dat willen valideer een wachtwoordveld.

    In het onderstaande voorbeeld moeten gebruikers een wachtwoord invoeren dat minimaal 8 tekens lang is en dat ten minste één letter en één cijfer bevat (bron van de gebruikte regex).

     

    Nog een paar dingen

    In dit artikel hebben we gekeken hoe we gebruik kunnen maken van de Door de browser geleverde formuliervalidatie geleverd door het native validatie-algoritme voor constraint van HTML5. Voor het maken van onze aangepaste validatiescripts moeten we de Constraint Validation API gebruiken, wat een volgende stap kan zijn in het verfijnen van formuliervalidatievaardigheden.

    HTML5-formulieren zijn toegankelijk via ondersteunende technologieën, dus we hoeven niet noodzakelijk de. Te gebruiken aria-vereiste ARIA-kenmerk om vereiste invoervelden voor schermlezers te markeren. Het kan echter nog steeds nuttig zijn om toegankelijkheidsondersteuning toe te voegen voor oudere browsers. Het is ook mogelijk om opt-out van constraint-validatie door het toevoegen van de novalidate boolean attribute to the

    element.