Validering av JavaScript-skjema - Ulike typer validering av JavaScript-skjema

Introduksjon til JavaScript Form Validation

Skjemavalidering utfører nøyaktighetssjekken på skjemaer som er opprettet og sjekker om den brukerinnleverte informasjonen er korrekt. Validering av skjemaer skjer vanligvis på serversiden, når den nødvendige informasjonen er lagt inn av klienten. Etter validering av skjemaet, hvis det er feil informasjon eller felt som er tomt. Deretter vil serveren sende meldingen til klienten om at informasjonen som er lagt inn er feil eller mangler. Validering av skjemaer gir kundene tillit til at all informasjonen som er lagt inn vil være korrekt, ellers vil feil bli kastet slik at den kan rettes.

Eksempel:

function validate() (
var y = document.forms("Form")("f.name").value;
if (y == "")
(
alert("Name filed is empty");
return false;
)
)

Ting som må sjekkes mens du gjør skjemavalidering

• Sjekk om brukeren lot feltet være tomt som må fylles ut. Hvis den er tom, kan du returnere "Alert Message".
• Sjekk om brukeren skrev inn et nummer der den numeriske verdien skal legges inn. For eksempel kontaktinformasjon.
• Sjekk om brukeren skrev inn et alfabetisk tegn i navnefeltet.
• Se etter numerisk og alfabetisk karakter. Hvis skjemafeltet er alfanumerisk. For eksempel meldingsfeltet.
• Sjekk om brukeren har skrevet passordet riktig i begge feltene. (Passordfelt, Bekreft passordfelt)
• Forsikre deg også om alle rullegardinmenyen og avkrysningsruten er merket riktig.

Typer av skjemavalidering

• Validering av klientsiden
• Validering av serversiden

1. Validering av klientsiden

For å unngå belastning og unødvendig båndbredde til validering av server på klientsiden er nyttig å bruke Jscript. Etter validering fra klientsiden bør du ha en annen validering fra serversiden. Årsaken til å gjøre ytterligere en validering av serversiden er fordi brukeren kan ha deaktivert JavaScript i nettleseren.

Validering av klientsiden bruker mindre tid på å validere siden valideringen skjer i brukerens nettleser og det hjelper brukeren å få en bedre opplevelse. I validering på serversiden som skjer på serveren, krever det brukerens innspill. Deretter må den sendes til serveren før validering, og til slutt må brukeren vente på responsen fra serveren for å vite hvilket felt feilen oppsto.

Eksempel



First name
required>

Last name
required>

Username

@
aria-describedby="inputGroupPrepend21" required>


City

State

Zip



Agree to terms and conditions

Submit form


Utgang :

2. Validering av serversideform

Valideringen på serversiden utført for å sikre at alle dataene er lagt inn av brukeren og at ingenting er blitt svart eller lagt feil inn. Validering på serversiden sørger for at det ikke er noen feil i skjemaet som er lagt inn av brukeren.

Eksempel



Form validation

function printError(elemId, hintMsg) (
document.getElementById(elemId).innerHTML = hintMsg;
)
function validateForm() (
var name = document.contactForm.name.value;
var email = document.contactForm.email.value;
var mobile = document.contactForm.mobile.value;
var country = document.contactForm.country.value;
var gender = document.contactForm.gender.value;
var hobbies = ();
var checkboxes = document.getElementsByName("hobbies()");
for(var i=0; i < checkboxes.length; i++) (
if(checkboxes(i).checked) (
hobbies.push(checkboxes(i).value);
)
)
var nameErr = emailErr = mobileErr = countryErr = genderErr = true;
if(name == "") (
printError("nameErr", "Please enter name");
) else (
var regex = /^(a-zA-Z\s)+$/;
if(regex.test(name) === false) (
printError("nameErr", "Enter valid name");
) else (
printError("nameErr", "");
nameErr = false;
)
)
if(email == "") (
printError("emailErr", "enter your email");
) else (
var regex = /^\ (email protected) \S+\.\S+$/;
if(regex.test(email) === false) (
printError("emailErr", "Please enter a valid email");
) else(
printError("emailErr", "");
emailErr = false;
)
)
if(mobile == "") (
printError("mobileErr", "Please enter mobile number");
) else (
var regex = /^(1-9)\d(9)$/;
if(regex.test(mobile) === false) (
printError("mobileErr", "Please enter a valid mobile number");
) else(
printError("mobileErr", "");
mobileErr = false;
)
)
if(country == "Select") (
printError("countryErr", "Please select country");
) else (
printError("countryErr", "");
countryErr = false;
)
if(gender == "") (
printError("genderErr", "Please select gender");
) else (
printError("genderErr", "");
genderErr = false;
)
if((nameErr || emailErr || mobileErr || countryErr || genderErr) == true) (
return false;
) else (
var dataPreview = "You've entered the following details: \n" +
"Full Name: " + name + "\n" +
"Email Address: " + email + "\n" +
"Mobile Number: " + mobile + "\n" +
"Country: " + country + "\n" +
"Gender: " + gender + "\n";
if(hobbies.length) (
dataPreview += "Hobbies: " + hobbies.join(", ");
)
alert(dataPreview);
)
);


Application Form
Full Name


Email Address


Mobile Number


Country
Select
Australia
India
United States
United Kingdom


Gender
Male
Female


Hobbies (Optional)
Sports
Movies
Music







Form validation

function printError(elemId, hintMsg) (
document.getElementById(elemId).innerHTML = hintMsg;
)
function validateForm() (
var name = document.contactForm.name.value;
var email = document.contactForm.email.value;
var mobile = document.contactForm.mobile.value;
var country = document.contactForm.country.value;
var gender = document.contactForm.gender.value;
var hobbies = ();
var checkboxes = document.getElementsByName("hobbies()");
for(var i=0; i < checkboxes.length; i++) (
if(checkboxes(i).checked) (
hobbies.push(checkboxes(i).value);
)
)
var nameErr = emailErr = mobileErr = countryErr = genderErr = true;
if(name == "") (
printError("nameErr", "Please enter name");
) else (
var regex = /^(a-zA-Z\s)+$/;
if(regex.test(name) === false) (
printError("nameErr", "Enter valid name");
) else (
printError("nameErr", "");
nameErr = false;
)
)
if(email == "") (
printError("emailErr", "enter your email");
) else (
var regex = /^\ (email protected) \S+\.\S+$/;
if(regex.test(email) === false) (
printError("emailErr", "Please enter a valid email");
) else(
printError("emailErr", "");
emailErr = false;
)
)
if(mobile == "") (
printError("mobileErr", "Please enter mobile number");
) else (
var regex = /^(1-9)\d(9)$/;
if(regex.test(mobile) === false) (
printError("mobileErr", "Please enter a valid mobile number");
) else(
printError("mobileErr", "");
mobileErr = false;
)
)
if(country == "Select") (
printError("countryErr", "Please select country");
) else (
printError("countryErr", "");
countryErr = false;
)
if(gender == "") (
printError("genderErr", "Please select gender");
) else (
printError("genderErr", "");
genderErr = false;
)
if((nameErr || emailErr || mobileErr || countryErr || genderErr) == true) (
return false;
) else (
var dataPreview = "You've entered the following details: \n" +
"Full Name: " + name + "\n" +
"Email Address: " + email + "\n" +
"Mobile Number: " + mobile + "\n" +
"Country: " + country + "\n" +
"Gender: " + gender + "\n";
if(hobbies.length) (
dataPreview += "Hobbies: " + hobbies.join(", ");
)
alert(dataPreview);
)
);


Application Form
Full Name


Email Address


Mobile Number


Country
Select
Australia
India
United States
United Kingdom


Gender
Male
Female


Hobbies (Optional)
Sports
Movies
Music







Form validation

function printError(elemId, hintMsg) (
document.getElementById(elemId).innerHTML = hintMsg;
)
function validateForm() (
var name = document.contactForm.name.value;
var email = document.contactForm.email.value;
var mobile = document.contactForm.mobile.value;
var country = document.contactForm.country.value;
var gender = document.contactForm.gender.value;
var hobbies = ();
var checkboxes = document.getElementsByName("hobbies()");
for(var i=0; i < checkboxes.length; i++) (
if(checkboxes(i).checked) (
hobbies.push(checkboxes(i).value);
)
)
var nameErr = emailErr = mobileErr = countryErr = genderErr = true;
if(name == "") (
printError("nameErr", "Please enter name");
) else (
var regex = /^(a-zA-Z\s)+$/;
if(regex.test(name) === false) (
printError("nameErr", "Enter valid name");
) else (
printError("nameErr", "");
nameErr = false;
)
)
if(email == "") (
printError("emailErr", "enter your email");
) else (
var regex = /^\ (email protected) \S+\.\S+$/;
if(regex.test(email) === false) (
printError("emailErr", "Please enter a valid email");
) else(
printError("emailErr", "");
emailErr = false;
)
)
if(mobile == "") (
printError("mobileErr", "Please enter mobile number");
) else (
var regex = /^(1-9)\d(9)$/;
if(regex.test(mobile) === false) (
printError("mobileErr", "Please enter a valid mobile number");
) else(
printError("mobileErr", "");
mobileErr = false;
)
)
if(country == "Select") (
printError("countryErr", "Please select country");
) else (
printError("countryErr", "");
countryErr = false;
)
if(gender == "") (
printError("genderErr", "Please select gender");
) else (
printError("genderErr", "");
genderErr = false;
)
if((nameErr || emailErr || mobileErr || countryErr || genderErr) == true) (
return false;
) else (
var dataPreview = "You've entered the following details: \n" +
"Full Name: " + name + "\n" +
"Email Address: " + email + "\n" +
"Mobile Number: " + mobile + "\n" +
"Country: " + country + "\n" +
"Gender: " + gender + "\n";
if(hobbies.length) (
dataPreview += "Hobbies: " + hobbies.join(", ");
)
alert(dataPreview);
)
);


Application Form
Full Name


Email Address


Mobile Number


Country
Select
Australia
India
United States
United Kingdom


Gender
Male
Female


Hobbies (Optional)
Sports
Movies
Music





Produksjon:

Konklusjon - Validering av JavaScript-skjema

Skjemavalidering i JavaScript krever ikke kompleks koding, men vi bør tenke ut fra brukerens synspunkt på hvordan de vil gjøre feil under fylling av et skjema og hvordan det kan valideres ved hjelp av de forskjellige metodene. Vi må sørge for at hvis brukeren legger inn informasjonen feil da, vil feilmeldingen i hvilket felt feilen har skjedd og gi instruksjoner om inndataformatet.

Anbefalte artikler

Dette har vært en guide til JavaScript Form Validation. Her diskuterer vi også tingene som må sjekkes mens du gjør Form Validation og dens typer. Du kan også se på følgende artikler for å lære mer -

1. Innkapsling i JavaScript
2. Funksjoner av JavaScript
3. Vanlige uttrykk i JavaScript
4. ASP.Net valideringskontroller
5. Eksempler på avkrysningsrute i Bootstrap
6. To måter å HTML Form Validation med eksempler