Preverjanje obrazca JavaScript - Različne vrste preverjanja obrazca javascripta

Uvod v preverjanje obrazca JavaScript

Validacija obrazca izvede preverjanje točnosti ustvarjenih obrazcev in preveri, ali so informacije, ki jih je poslal uporabnik, pravilne. Validacija obrazcev se običajno zgodi na strani strežnika, potem ko stranka vnese zahtevane podatke. Po potrditvi obrazca, če so kakšni napačni podatki ali katero koli polje ostane prazno. Nato bi strežnik stranki poslal sporočilo, da so bili vneseni podatki napačni ali manjkajo. Validacija obrazcev strankam daje zaupanje, da bi bili vsi vneseni podatki pravilni ali pa bi bila napaka vržena, da bi jih bilo mogoče popraviti.

Primer:

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

Stvari, ki jih je treba preveriti med preverjanjem obrazca

• Preverite, ali je uporabnik pustil polje prazno, ki ga mora izpolniti. Če je prazno, vrnite "Alert Message".
• Preverite, ali je uporabnik vnesel številko, kjer je treba vnesti številčno vrednost. Na primer, kontaktni podatki.
• Preverite, ali je uporabnik v ime ime vnesel abecedni znak.
• Preverite številske in abecedne znake. Če je polje obrazca alfanumerično. Na primer polje s sporočilom.
• Preverite, ali je uporabnik pravilno vnesel geslo v obeh poljih. (Polje gesla, Potrdite polje gesla)
• Prav tako preverite, ali so vsi spustni meni in potrditveno polje pravilno označeni.

Vrste validacije obrazca

• Potrditev obrazca na strani stranke
• Potrditev obrazca na strani strežnika

1. Potrditev obrazca na strani stranke

Da bi se izognili napetosti in nepotrebne potrditve pasovne širine do strežnika na strani odjemalca, je koristno z uporabo Jscript. Po potrditvi s strani odjemalca bi morali imeti še eno potrditev s strani strežnika. Razlog za še eno validacijo strani strežnika je, ker je uporabnik morda onemogočil JavaScript v svojem spletnem brskalniku.

Potrjevanje na strani odjemalca porabi manj časa za preverjanje veljavnosti, saj se preverjanje zgodi v uporabnikovem brskalniku in uporabniku pomaga, da ima boljše izkušnje. Medtem ko pri preverjanju na strani strežnika, ki se zgodi na strežniku, potrebuje uporabnikov vnos. Nato ga je treba pred potrditvijo poslati na strežnik in končno mora uporabnik počakati na odgovor strežnika, da ve, na katerem polju je prišlo do napake.

Primer



First name
required>

Last name
required>

Username

@
aria-describedby="inputGroupPrepend21" required>


City

State

Zip



Agree to terms and conditions

Submit form


Izhod :

2. Potrditev obrazca na strani strežnika

Preverjanje na strani strežnika je bilo zagotovljeno, da je uporabnik vse podatke vnesel in nič ni ostalo črno ali vneseno napačno. Preverjanje na strani strežnika zagotavlja, da v obrazcu, ki ga vnese uporabnik, ni napak.

Primer



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





Izhod:

Zaključek - Potrditev obrazca JavaScript

Validacija obrazca v JavaScript ne zahteva kompleksnega kodiranja, vendar bi morali z vidika uporabnika razmišljati o tem, kako bi delali napake med polnjenjem obrazca in kako ga je mogoče preveriti z različnimi metodami. Prepričati se moramo, da če uporabnik takrat napačno vnese informacije, sporočilo o napaki, na katerem polju je prišlo do napake, in poda navodila za obliko vnosa.

Priporočeni članki

To je vodnik za preverjanje obrazca JavaScript. Tukaj razpravljamo tudi o stvareh, ki jih je treba preveriti pri preverjanju obrazca in njegovih vrstah. Za več informacij si lahko ogledate tudi naslednje članke -

1. Kapsulacija v JavaScript
2. Značilnosti JavaScript
3. Redni izrazi v JavaScript
4. Validacijski nadzor ASP.Net
5. Primeri potrditvenega polja v programu Bootstrap
6. Dva načina preverjanja obrazca HTML s primeri