Oversikt over validering av HTML-skjema
Nettformer er ofte den mest brukte og essensielle delen av webapplikasjoner. Skjemavalidering er prosessen med å validere dataene som er lagt inn av brukeren mot de forhåndsdefinerte reglene. Skjemavalideringen kan skje på enten klientsiden eller på serversiden. Validering av HTML-skjema er formen for validering av klientsiden der valideringen av data vil bli utført før du sender dataene til serveren. Validering av HTML-skjema er viktig og nyttig fordi det forbedrer brukergrensesnittet på klientsiden og ytelsen til webapplikasjonen.
Validering av HTML-skjema
Det er hovedsakelig to måter validering av HTML-skjema kan utføres på,
- Bruker HTML5 innebygd funksjonalitet
- Bruker JavaScript
1. Bruke HTML5 innebygd funksjonalitet
HTML5 gir denne funksjonen i formvalidering uten å bruke JavaScript. Skjemaelementer vil ha valideringsattributter lagt til som aktiverer skjemavalidering for oss automatisk. Valideringsattributter lar oss spesifisere ulike typer regler for skjemaelementene våre. De tillater oss å angi lengden på dataene, sette en begrensning i verdiene til dataene, etc.
La oss se det enkle eksempelet på validering av HTML-skjema ved hjelp av innebygde formvalideringselementer og fortsetter videre for HTML-validering ved hjelp av JavaScript.
Eksempel
Skjemavalidering ved bruk av HTML5 valideringsattributt - I dette eksemplet vil vi bruke skjemavalideringskode som kreves, noe som vil føre til at data i det feltet blir obligatorisk å legges inn, ellers blir ikke skjemaet sendt inn. Nedenfor er kodebiten for det samme sammen med litt styling av et nettskjema.
.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 veldig enkel nettform sammen med bare ett inndatafelt som "Navn". Vær oppmerksom på at vi har brukt påkrevd nøkkelord i inndatamerkelementet.
Utgang :
La oss prøve å sende skjemaet uten å legge inn noen verdi i navnefeltet. Når du sender inn vil du få feilmeldingen som "Vennligst fyll ut dette feltet", og skjemaet vil ikke bli sendt inn.
Utgang med blanke data
Så det kan sees at feilmelding ikke blir lagt til av oss og blir levert av HTML selv.
Akkurat som påkrevd attributt levert av HTML, er det forskjellige formkoder som er tilgjengelige å bruke. Nedenfor er listen over noen formvalideringskoder,
- minelengde: Brukes til å stille inn den nødvendige minimumslengden på et element
- makslengde: Brukes til å stille inn den maksimale lengden på et element
- mønster: Brukes til å definere et vanlig uttrykk
2. Bruke JavaScript
JavaScript brukes mye til validering av HTML-skjema, ettersom det gir flere måter å tilpasse og angi valideringsreglene, også noen av kodene som er gitt i HTML5 støttes ikke i de eldre versjonene av Internet Explorer. JavaScript brukes i lang tid for skjemavalidering.
I validering av JavaScript-skjema definerer vi i utgangspunktet funksjoner for å validere dataene før vi sender dem til serveren. Vi kan implementere all logikk som er nødvendig for å oppnå valideringsreglene. JavaScript er mer fleksibelt på denne måten fordi det ikke er noen begrensning i å definere regler. Men det er nødvendig å ha kunnskap om JavaScript for å implementere dette sammenlignet med skjemavalidering ved hjelp av innebygde tagger.
La oss se eksemplet på skjemavalidering ved hjelp av JavaScript. Vi vil implementere det samme eksemplet på skjemaet med bare ett innspill 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 forrige eksempel har vi fjernet den nødvendige koden fra formelementet "navn". I stedet har vi lagt til en tag onsubmit i skjemaelementet. Som nevnt før, vil vi skrive funksjon for validering som koden legges til.
Vi har skrevet en funksjon som heter validateForm () som vil gjøre valideringen. Vi implementerer den samme regelen for å sjekke om de angitte dataene i navnefeltet er blanke eller ikke. Logikken for å sjekke dette er ved et klikk på sende-knappen, denne funksjonen vil bli kalt og den inntastede verdien blir sjekket om den er null eller enten tom. Funksjonen vil gå tilbake i tilfelle data ikke er null eller blanke, men hvis dataene er tomme eller null, vises feilmeldingen for brukeren.
Produksjon
Hvis vi prøver å sende inn skjemaet uten å legge inn noen data, bør vi få feilmeldingen på skjermen. Som det fremgår av eksemplet at vi har designet feilmeldingen på samme måte som mulig.
Utgang med blanke data
Konklusjon- HTML-skjemavalidering
Så vi har sett et veldig enkelt eksempel på formvalidering på klientsiden. Det er hovedsakelig to måter å utføre HTML-skjemavalidering. Først bruker den innebygde funksjonaliteten gitt i HTML5, og den andre er å bruke JavaScript. Ved å bruke den første metoden trenger vi ikke å skrive ekstra kode.
Anbefalte artikler
Dette har vært en guide til HTML Form Validation. Her diskuterer vi oversikten og to måter HTML Form Validation som de kan utføres på. Du kan også se på følgende artikler for å lære mer -
- HTML-hendelser
- Versjoner av HTML
- HTML5-elementer
- Bruksområder for HTML