Overenie formulára JavaScript Rôzne typy validácie formulárov javascript

Úvod do validácie formulára JavaScript

Overenie formulára vykoná kontrolu presnosti vytvorených formulárov a skontroluje, či sú informácie zadané používateľom správne. K validácii formulárov zvyčajne dochádza na strane servera, keď sú požadované informácie zadané klientom. Po potvrdení formulára, ak sú nejaké nesprávne informácie alebo akékoľvek pole ponechané prázdne. Potom server pošle klientovi správu, že zadané informácie sú nesprávne alebo chýbajú. Potvrdenie formulárov dáva zákazníkom istotu, že všetky informácie, ktoré boli zadané, by boli správne alebo by sa vyhodili chyby, aby sa dali opraviť.

Príklad:

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

Veci, ktoré je potrebné skontrolovať počas overovania formulára

• Skontrolujte, či užívateľ nechal pole prázdne, ktoré musí byť vyplnené. Ak je prázdny, vráťte „Výstražnú správu“.
• Skontrolujte, či používateľ zadal číslo, do ktorého sa má zadať číselná hodnota. Napríklad kontaktné údaje.
• Skontrolujte, či používateľ do poľa názvu zadal abecedný znak.
• Skontrolujte, či nemá číselný a abecedný charakter. Ak je pole formulára alfanumerické. Napríklad pole správy.
• Skontrolujte, či používateľ do oboch polí správne zadal heslo. (Pole Heslo, pole Potvrdiť heslo)
• Skontrolujte tiež, či sú všetky rozbaľovacie a začiarkavacie políčka správne označené.

Typy validácie formulárov

• Overenie formulára na strane klienta
• Overenie formulárov na strane servera

1. Overenie formulára na strane klienta

Aby ste sa vyhli namáhaniu a zbytočnej šírke pásma na strane servera, je pomocou Jscriptu užitočné overenie na strane klienta. Po overení zo strany klienta by ste mali vykonať ďalšie overenie zo strany servera. Dôvodom vykonania ďalšej validácie na strane servera je to, že používateľ mohol vo svojom webovom prehliadači zakázať JavaScript.

Overenie na strane klienta vyžaduje menej času na overenie, pretože k overeniu dôjde v prehliadači používateľa a pomáha používateľovi mať lepší zážitok. Zatiaľ čo pri validácii na strane servera, ktorá sa vyskytuje na serveri, vyžaduje vstup používateľa. Potom je potrebné ho poslať na server pred validáciou a konečne musí užívateľ počkať na odpoveď zo servera, aby vedel, v ktorom poli sa chyba vyskytla.

príklad



First name
required>

Last name
required>

Username

@
aria-describedby="inputGroupPrepend21" required>


City

State

Zip



Agree to terms and conditions

Submit form


Výstup :

2. Overenie formulára na strane servera

Vykonalo sa overenie na strane servera, aby sa zabezpečilo, že používateľ zadal všetky údaje a nič nezostalo čierne alebo nesprávne zadané. Overenie na strane servera zabezpečuje, aby vo formulári zadanom používateľom neboli žiadne chyby.

príklad



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





Výkon:

Záver - Validácia formulára JavaScriptu

Overenie formulára v JavaScripte nevyžaduje zložité kódovanie, ale z pohľadu používateľa by sme mali premýšľať o tom, ako by urobili chyby pri vypĺňaní formulára a ako ho možno overiť pomocou rôznych metód. Musíme sa ubezpečiť, že ak používateľ nesprávne zadal informácie, potom chybové hlásenie, v ktorom poli sa chyba vyskytla, a poskytnúť pokyny týkajúce sa vstupného formátu.

Odporúčané články

Toto bol sprievodca validáciou formulára JavaScriptu. Tu tiež diskutujeme o veciach, ktoré je potrebné skontrolovať pri vykonávaní validácie formulára a jeho druhoch. Ďalšie informácie nájdete aj v nasledujúcich článkoch -

1. Zapuzdrenie do JavaScriptu
2. Funkcie JavaScriptu
3. Regulárne výrazy v JavaScripte
4. ASP.Net Validation Controls
5. Príklady začiarkavacieho políčka v Bootstrap
6. Dva spôsoby validácie formulára HTML s príkladmi