Ověření formuláře JavaScript Různé typy validace formulářů javascript

Úvod do validace formuláře JavaScript

Ověření formuláře provádí kontrolu přesnosti vytvořených formulářů a kontroluje, zda informace zadané uživatelem jsou správné. K ověření formulářů obvykle dochází na straně serveru, jakmile jsou požadované informace zadané klientem. Po validaci formuláře, pokud jsou nějaké nesprávné informace nebo pole ponecháno prázdné. Potom server odešle klientovi zprávu, že zadané informace jsou nesprávné nebo chybí. Ověření formulářů dává zákazníkům jistotu, že všechny informace, které byly zadány, by byly správné nebo jinak by byla vyvolána chyba, aby mohly být opraveny.

Příklad:

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

Věci, které je třeba zkontrolovat při provádění ověření formuláře

• Zkontrolujte, zda uživatel nechal pole prázdné, které musí být vyplněno. Pokud je prázdný, vraťte zprávu „Alert Message“.
• Zkontrolujte, zda uživatel zadal číslo, kam má být zadána číselná hodnota. Například kontaktní údaje.
• Zkontrolujte, zda uživatel do pole názvu zadal abecední znak.
• Zkontrolujte numerický a abecední charakter. Pokud je pole formuláře alfanumerické. Například pole zprávy.
• Zkontrolujte, zda uživatel do obou polí správně zadal heslo. (Pole Heslo, pole Potvrdit heslo)
• Rovněž zkontrolujte, zda jsou všechny rozevírací a zaškrtávací políčka správně označeny.

Typy ověření formuláře

• Ověření formuláře na straně klienta
• Ověření formuláře na straně serveru

1. Ověření formuláře na straně klienta

Aby se předešlo namáhání a zbytečné šířce pásma k ověření na straně klienta, je užitečné používat Jscript. Po ověření ze strany klienta byste měli provést další ověření ze strany serveru. Důvod, proč provést další ověření na straně serveru, je ten, že uživatel mohl ve svém webovém prohlížeči vypnout JavaScript.

Ověření na straně klienta vyžaduje méně času na ověření, protože k ověření dochází v prohlížeči uživatele a pomáhá uživateli získat lepší zážitek. Zatímco při ověřování na straně serveru, ke kterému dochází na serveru, vyžaduje vstup uživatele. Poté je třeba před validací odeslat na server a konečně musí uživatel počkat, až server odpoví, aby věděl, ve kterém poli došlo k chybě.

Pří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. Ověření formuláře na straně serveru

Ověření na straně serveru provedeno, aby se zajistilo, že uživatel zadal všechna data a nic nezůstalo černé nebo nesprávně zadané. Ověřování na straně serveru zajišťuje, že ve formuláři zadaném uživatelem nejsou žádné chyby.

Pří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ýstup:

Závěr - ověření formuláře JavaScript

Ověření formuláře v JavaScriptu nevyžaduje složité kódování, ale z pohledu uživatele bychom měli přemýšlet o tom, jak by při vyplňování formuláře udělali chyby a jak jej lze ověřit různými metodami. Musíme se ujistit, že pokud uživatel zadá informace nesprávně, zobrazí se chybová zpráva o tom, v jakém poli došlo k chybě, a poskytne pokyny ohledně vstupního formátu.

Doporučené články

Toto byl průvodce validací formuláře JavaScriptu. Zde také diskutujeme o věcech, které je třeba zkontrolovat při provádění ověření formuláře a jeho typech. Další informace naleznete také v následujících článcích -

1. Zapouzdření do JavaScriptu
2. Vlastnosti JavaScriptu
3. Regulární výrazy v JavaScriptu
4. ASP.Net Validation Controls
5. Příklady zaškrtávacího políčka v Bootstrapu
6. Dva způsoby ověření formuláře HTML s příklady