En introduktion til formulering af valideringsmetoder

Som de fleste af jer allerede ved, er formularer en fantastisk måde at indsamle information fra dine besøgende og give dem mulighed for at indsende oplysninger til din webserver (er) til behandling på dit websted. Dette inkluderer typisk en databaseforbindelse til at tjene, behandle og oprette poster til at gemme informationen. Formularer tillader også dine kunder at interagere med dit websted, for eksempel ved at søge efter specifikke oplysninger eller ved at indsende kommentarer til en specificeret afdeling eller e-mail-adresse. Ofte er der tidspunkter, hvor du ønsker at sikre, at kunder ikke lader specifikke formularfelter være tomme, eller du vil begrænse et felt til en bestemt type input, f.eks. Tegn, numre, e-mail-adresse, postnummer, telefonnummer, eller en liste med forudindstillede indstillinger fra en rullemenu.

Denne artikel er del af en serie med flere dele om udforskning af forskellige metoder til validering af formularer, fejlmeddelelser, feedbackteknikker og fremgangsmåder til implementering af webstedets formvalidering.

I en perfekt verden indtaster dine webbesøg de korrekte og nødvendige oplysninger og afslutter opgaven med succes. Imidlertid begår mennesker i den virkelige verden ofte fejl eller misbruger processen, og det er her validering af form ser ud til. Det endelige slutresultat er at sikre, at de besøgende leverer de rigtige og korrekt formaterede oplysninger for at udfylde formularindgivelsen.

Valideringsskripts på serversiden er ikke afhængige af eller slet med JavaScript-understøttelse i brugerens webbrowser; følgelig påvirkes de ikke af tilstedeværelsen eller fraværet af JavaScript-support i brugerens webbrowser. Med validering på serversiden sendes information til serveren og valideres ved hjælp af et af mange sprog på serversiden. Hvis valideringen mislykkes, sendes svarmeddelelsen derefter tilbage til klienten, og siden, der indeholder webformularen, opdateres, og en feedbackmeddelelse vises. Dette er en mere sikker metode og fungerer, selvom JavaScript er slået fra i browseren, og det ikke nemt omgås af brugere med ondsindet intention. Ulempen med validering på serversiden er, at brugerne bliver nødt til at udfylde informationen uden at få et svar, kun indtil de klikker på knappen Send, og dette resulterer typisk i en langsommere samlet responstid for brugeroplevelsen.

En undtagelse fra typisk validering på serversiden er brugen af ​​Ajax-opkald til serveren ved hjælp af jQuery; som brugeren indtaster oplysningerne, giver den øjeblikkelig feedback fra formularvalidering. Brug af Ajax i forbindelse med validering på klientsiden kan det med forbehold validerer formularer ved hjælp af de samme klientsidevilkår ved indsendelse af formular.

Validering af klientsiden ved hjælp af JavaScript giver en samlet bedre slutbrugeroplevelse, da brugerinputen kan valideres, når den indtastes, idet der sendes øjeblikkeligt feedback svar med en mislykket bekræftelse. En ulempe ved validering af klientsiden er, at nogle besøgende har JavaScript-understøttelse deaktiveret i deres browser, enten med vilje eller ubevidst. Sådanne brugere kan omgå JavaScript-valideringsrutiner og indsende en formular, uanset om den opfylder valideringsreglerne.

For at forhindre, at "affald" -formularer indsendes fra besøgende, supplerer webapplikationsudviklere typisk JavaScript-validering på klientsiden med valideringsskripts på serversiden. De fleste webapplikationer i dag bruger både validering af klientsiden med JavaScript og serversiden validering, for eksempel ColdFusion og Perl / CGI valideringsrutiner til at registrere problemer med brugerindtastede formdata og således forhindre indsendelse af forkerte data.

Der er flere typer validering, som du kan udføre, og disse falder typisk ind i en af ​​tre kategorier, herunder krævet information, korrekt format og bekræftelse.

Det første sæt information, der skal valideres, er de krævede oplysninger, og dette angives typisk enten med en stjerne (*) eller en "påkrævet" erklæring ved siden af ​​feltet eller deklareret forud for formularen. Medmindre alle felter er påkrævet, skal en sådan indikation gives for at give de besøgende en passende retning for udfyldning af formularfelterne.

For universal design og adgang skal de krævede dataregistreringsfelter klart og konsekvent adskilles fra valgfri dataregistreringsfelter. Den klassificerede standard bør omfatte følgende:

  • Angiv en stjerne (*) foran etiketten for alle krævede felter, og inkluder en sætning, der går forud for begyndelsen af ​​dataregistreringsformularen, for eksempel "Et felt med en stjerne (*), før det er et påkrævet felt."
  • Angiv ordet "krævet" foran eller under etiketten for hvert obligatorisk felt. Derudover skal der gives en erklæring, der angiver de påkrævede felter i begyndelsen af ​​dataregistreringsformularen. For eksempel er "Alle påkrævede felter angivet med ordet" påkrævet "sammen med etiketten.
  • Adskil de valgfri og påkrævede felter, når det er relevant og praktisk. Alle grupperinger skal mærkes i overensstemmelse hermed "Krævet" eller "Valgfrit" for at hjælpe slutbrugeren.
Ved at overholde Afsnit 508 (Web Compliance Framework, Department of Health and Human Services) er det ikke nok at bruge farve eller fed til at fremhæve de krævede felter til at skelne dem fra valgfri felter. Brugere af farveblind eller dem, der bruger skærmlæsere, skelner ikke mellem påkrævede eller valgfrie dataregistreringsfelter baseret på farve eller dristige indikationer. Eksemplet i figur A viser, hvordan de krævede felter er indikeret med en stjerne (*).

Figur A

Korrekt format validerer for at sikre, at URL'er, telefonnumre, e-mail-adresser, numre, adgangskoder og andre oplysninger indtastes i den acceptable syntaksindstilling. Selvom det er fristende at begrænse formatet og syntaks for specifikke datatyper, er det til tider god praksis at tillade en række forskellige formater, der giver applikationen mulighed for at fortolke dataene, og derfor bruger man et tilgivende designmønster for brugerinput. I eksemplet, der er vist i figur B fra iStockphoto.com, godkender tilmeldingsformularen e-mail-adressen og adgangskoden, hvilket giver en fejlmeddelelse og forslag til korrektion af posterne med øjeblikkelig feedback inden indsendelse.

Figur B

Bekræftelsesfelter sikrer, at brugerne bekræfter de indtastede data med to felter, der er angivet til de samme oplysninger, f.eks. Kræver adgangskoder og e-mail-adresser typisk en dobbelt indtastning for at bekræfte rigtigheden. Disse duplikatfelter er typisk placeret direkte ved siden af ​​hinanden og er tydeligt markeret, så brugeren kender deres formål foran. Når de to poster matcher, indsendes formularen med succes; hvis ikke, skal en fejlmeddelelse indikere, at de to poster er forskellige. Et godt eksempel på bekræftelse af felter vises i figur C fra Angies liste.

Fig

De fleste webforfatterværktøjer har typisk kraftfulde indbyggede funktioner, som kan hjælpe med at skabe valideringsfelter inden for en form, der sikrer, at felterne udfyldes korrekt af de online brugere. I Dreamweaver's Validate Form Adfærd bruger den for eksempel JavaScript til at håndhæve de regler, du angiver for en bestemt formular til webdokument. Når en webstedsbruger forsøger at indsende en formular, der indeholder tomme felter og / eller har indtastet upassende data, modtager de et pop-up-vindue, der viser en fejlmeddelelse, der angiver det specifikke problem, hvilket resulterer i annullering eller midlertidig stop af formularen, der indsendes indtil problemet er rettet. Når brugeren har foretaget korrektionerne og den / de valideringsregel (er), du har oprettet, er blevet opfyldt ved hjælp af valideringsadfærd, vil formularen blive sendt.

De fleste indbyggede valideringsværktøjer, herunder Dreamweavers validitetsformadfærd, kan kun validere indholdet af tekstfelter og kan ikke kontrollere, at de korrekte radioknapper, afkrydsningsfelter, rullelister osv. Er valgt af brugeren. Hvad du kan gøre er at bruge Valider formadfærd for at sikre, at tekstfelter opfylder følgende kriterier og betingelser:

  • Indeholder kun tal. Du kan afvise en formularindgivelse, hvis et tekstfelt indeholder andet end cifre.
  • Har en numerisk værdi inden for et interval. Du kan afvise en formularindgivelse, hvis nummeret i et tekstfelt ligger uden for det specificerede interval.
  • Indeholder en e-mail-adresse. Det er dog vigtigt at bemærke, at validering typisk kun tjekker for tilstedeværelsen af ​​et @ -symbol i e-mail-adressen, og ikke kontrollerer, om det er en korrekt konstrueret e-mail-adresse, såsom _name.com
  • Indeholder noget. Du kan afvise en formularindsendelse, hvis der ikke findes nogen oplysninger i tekstfeltet.

I det næste segment vil jeg demonstrere, hvordan jeg opretter en enkel form, der udfører validering af flere forskellige tekstfelter på en web-dokumentside ved hjælp af Dreamweaver i eksemplerne.

Fremtidige segmenter dykker dybere ned i formvalideringskodningsmetoder, samt gennemgår valideringsfeedback, validering ved indsendelse, realtidsvalidering, tilføjer nyttige tip, dynamiske tip, maskering og omformaterer brugerindgange og tilføjer captcha-kode for at sikre det menneskelige interface. Jeg vil derefter sammensætte en liste over formularvalideringsressourcer. Fortæl mig, om der er særlige spørgsmål til validering af formularer, som du har i diskussionsområdet nedenfor.

© Copyright 2020 | mobilegn.com