Uvod u provjeru JavaScripta obrasca

Provjera obrasca provodi provjeru točnosti kreiranih obrazaca i provjerava jesu li podaci koje podnose korisnici točni. Validacija obrazaca obično se događa na strani poslužitelja, nakon što klijent zatraži potrebne podatke. Nakon potvrde obrasca, ako postoje netočne informacije ili bilo koje polje ostaje prazno. Zatim bi poslužitelj poslao poruku klijentu da su unesene informacije netočne ili nedostaju. Validacija obrazaca kupcima daje povjerenje da su sve unesene informacije bile točne ili bi se pogreška bacila na ispravu.

Primjer:

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

Stvari koje treba provjeriti tijekom provjere obrasca

  • Provjerite je li korisnik ostavio prazno polje koje mora popuniti. Ako je prazna, vratite "Poruku upozorenja".
  • Provjerite je li korisnik upisao broj u koji treba unijeti brojčanu vrijednost. Na primjer, podaci za kontakt.
  • Provjerite je li korisnik u polje imena upisao abecedni znak.
  • Provjerite numeričke i abecedne znakove. Ako je polje obrasca alfanumeričko. Na primjer, polje za poruku.
  • Provjerite je li korisnik ispravno upisao lozinku u oba polja. (Polje lozinke, Potvrdite polje lozinke)
  • Također provjerite jesu li svi padajući i potvrdni okvir ispravno označeni.

Vrste provjere obrasca

  • Provjera obrasca na strani klijenta
  • Potvrda obrasca na strani poslužitelja

1. Provjera obrasca na strani klijenta

Za izbjegavanje naprezanja i nepotrebne provjere propusnosti na strani poslužitelja korisna je upotreba Jscript-a. Nakon validacije sa strane klijenta trebali biste imati još jednu provjeru na strani poslužitelja. Razlog za još jednu validaciju na strani poslužitelja je taj što je korisnik možda onemogućio JavaScript na svom web pregledniku.

Provjera valjanosti na strani klijenta zahtijeva manje vremena za validaciju budući da se provjera valjanosti događa u korisničkom pregledniku i korisniku pomaže u boljem iskustvu. Dok za provjeru na strani poslužitelja koja se događa na poslužitelju potreban je unos korisnika. Zatim ga treba poslati na poslužitelj prije validacije i konačno, korisnik mora pričekati odgovor od poslužitelja da bi znao na kojem se polju dogodila greška.

Primjer



First name
required>

Last name
required>

Username

@
aria-describedby="inputGroupPrepend21" required>


City

State

Zip



Agree to terms and conditions

Submit form

Izlaz :

2. Potvrda obrasca na strani poslužitelja

Provjera valjanosti na strani poslužitelja osigurala je da su svi podaci unijeli korisnik i da ništa nije ostavljeno crno ili je unijeto pogrešno. Provjera na strani poslužitelja osigurava da nema pogrešaka u obrascu koji je uneo korisnik.

Primjer



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



Izlaz:

Zaključak - Potvrda JavaScript obrasca

Provjera obrasca u JavaScript-u ne zahtijeva složeno kodiranje, no s korisničkog stajališta trebali bismo razmisliti o tome kako bi napravili pogreške prilikom popunjavanja obrasca i kako ga možete provjeriti pomoću različitih metoda. Moramo biti sigurni da ako korisnik tada unese podatke pogrešno, poruka o pogrešci na kojem polju se dogodila greška, te dati upute o formatu unosa.

Preporučeni članci

Ovo je vodič za provjeru JavaScripta obrasca. Ovdje također raspravljamo o stvarima koje je potrebno provjeriti tijekom provjere obrasca i njegovih vrsta. Možete također pogledati sljedeće članke da biste saznali više -

  1. Inkapsulacija u JavaScriptu
  2. Značajke JavaScripta
  3. Redovni izrazi u JavaScript-u
  4. ASP.Net provjere valjanosti
  5. Primjeri potvrdnog okvira u Bootstrapu
  6. Dva načina provjere valjanosti HTML obrasca

Kategorija:

Razvoj softvera