Oversigt over validering af HTML-form
Webformularer er ofte den mest anvendte og væsentligste del af webapplikationer. Formularvalidering er processen med validering af de data, som brugeren indtaster mod de foruddefinerede regler. Formvalideringen kan finde sted på enten klientsiden eller på serversiden. Validering af HTML-form er formen for validering på klientsiden, hvor validering af data udføres, før dataene sendes til serveren. Validering af HTML-form er betydelig og nyttig, fordi det forbedrer brugergrænsefladen på klientsiden og ydelsen af webapplikationen.
Validering af HTML-form
Der er hovedsageligt to måder, hvorpå HTML-formvalidering kan udføres,
- Brug af HTML5 indbygget funktionalitet
- Brug af JavaScript
1. Brug af HTML5 indbygget funktionalitet
HTML5 giver denne funktion af formvalidering uden brug af JavaScript. Formelementer tilføjes valideringsattributter, som automatisk aktiverer formvalidering for os. Valideringsattributter giver os mulighed for at specificere forskellige slags regler for vores formelementer. De giver os mulighed for at indstille længden på dataene, indstille en begrænsning af dataværdierne osv.
Lad os se det ene enkle eksempel på validering af HTML-form ved hjælp af indbygget form-valideringselementer og fortsætter derefter videre til HTML-formvalidering ved hjælp af JavaScript.
Eksempel
Formvalidering ved hjælp af HTML5-valideringsattribut - I dette eksempel bruger vi formularvalideringsmærke, der kræver, at data i det felt skal obligatorisk indtastes, ellers bliver formularen ikke sendt. Nedenfor er kodestykket for det samme sammen med en vis styling af en webform.
.formData (
padding-top: 20px;
padding-bottom: 20px;
padding-left: 10px;
background-color: darkcyan;
)
form (
font-size: 30px;
)
form input (
margin-left: 10px;
font-size: 15px;
)
Name:
Så vi har meget enkel webform sammen med kun et inputdatafelt som "Navn". Bemærk, at vi har brugt det krævede nøgleord i input-tagelementet.
Output :
Lad os prøve at indsende formularen uden at indtaste nogen værdi i navnefeltet. Når du indsender, får du fejlmeddelelsen som "Udfyld venligst dette felt", og formularen vil ikke blive sendt.
Output med tomme data
Så det kan ses, at fejlmeddelelsen ikke tilføjes af os og leveres af HTML selv.
Ligesom den påkrævede attribut leveret af HTML er der forskellige formkoder, der er tilgængelige til brug. Nedenfor er listen over nogle formularvalideringskoder,
- minlængde: Bruges til at indstille den krævede minimumslængde for et element
- maxlength: Bruges til at indstille den krævede maksimale længde på et element
- mønster: Bruges til at definere et regulært udtryk
2. Brug af JavaScript
JavaScript bruges meget til validering af HTML-form, da det giver flere måder at tilpasse og indstille valideringsreglerne, også nogle af de tags, der leveres i HTML5, understøttes ikke i de ældre versioner af Internet Explorer. JavaScript bruges i lang tid til formularvalidering.
I JavaScript-formvalidering definerer vi dybest set funktioner til validering af dataene, inden de indsendes til serveren. Vi kan implementere enhver logik, der kræves for at nå valideringsreglerne. JavaScript er mere fleksibelt på denne måde, fordi der ikke er nogen begrænsning i at definere regler. Men det er nødvendigt at have kendskab til JavaScript for at implementere dette sammenlignet med formvalidering ved hjælp af indbyggede tags.
Lad os se eksemplet på formvalidering ved hjælp af JavaScript. Vi implementerer det samme eksempel på formularen med kun et input som navnelement.
Eksempel:
.formData (
padding-top: 20px;
padding-bottom: 20px;
padding-left: 10px;
background-color: darkcyan;
position: absolute;
width: 100%;
)
form (
font-size: 30px;
)
form input (
margin-left: 10px;
font-size: 15px;
)
.errorMessage (
background-color: white;
width: 143px;
padding-left: 10px;
padding-right: 10px;
padding-top: 5px;
padding-bottom: 5px;
margin-left: 107px;
visibility: hidden;
border-radius: 10px;
position: relative;
float: left;
)
.errorMessage.top-arrow:after (
content: " ";
position: absolute;
right: 90px;
top: -15px;
border-top: none;
border-right: 10px solid transparent;
border-left: 10px solid transparent;
border-bottom: 15px solid white;
)
Name:
function validateForm() (
var nameVal = document.forms("simpleForm")("name").value;
if(nameVal == null || nameVal == "") (
document.getElementsByClassName( "errorMessage" )(0).style.visibility = "visible";
document.getElementsByClassName( "errorMessage" )(0).innerHTML = "Please Fill out this field";
return false;
) else (
return true;
)
)
Fra det foregående eksempel har vi fjernet det krævede tag fra formelementet "navn". I stedet har vi tilføjet et tag onsubmit i formelementet. Som nævnt før vil vi skrive funktion til validering, for hvilket tag tilføjes.
Vi har skrevet en funktion kaldet validateForm (), som vil udføre valideringen. Vi implementerer den samme regel for at kontrollere, om de indtastede data i navnefeltet er blanke eller ikke. Logikken for at kontrollere dette er ved et klik på indsende-knappen, denne funktion kaldes, og den indtastede værdi kontrolleres, om den er null eller enten tom. Funktionen vender tilbage i tilfælde af, at data ikke er nul eller tomme, men hvis dataene er tomme eller nul, vises fejlmeddelelsen for brugeren.
Produktion
Hvis vi prøver at indsende formularen uden at indtaste nogen data, skal vi få fejlmeddelelsen på skærmen. Som det ses af eksemplet, at vi har designet fejlmeddelelsen på samme måde som muligt.
Output med tomme data
Konklusion - HTML form validering
Så vi har set et meget simpelt eksempel på formvalidering på klientsiden. Der er hovedsageligt to måder at udføre HTML-formvalidering. Først bruger den indbyggede funktionalitet, der leveres i HTML5, og for det andet ved hjælp af JavaScript. Ved hjælp af den første metode behøver vi ikke at skrive ekstra kode.
Anbefalede artikler
Dette har været en guide til validering af HTML-form. Her diskuterer vi oversigten og to måder til HTML Form Validation, hvorpå de kan udføres. Du kan også se på de følgende artikler for at lære mere -
- HTML-begivenheder
- Versioner af Html
- HTML5-elementer
- Anvendelser af HTML