JavaScript-formuliervalidatie - Verschillende soorten validatie van JavaScript-formulieren

Inleiding tot JavaScript-formuliervalidatie

Formuliervalidatie voert de nauwkeurigheidscontrole uit op gemaakte formulieren en controleert of de door de gebruiker ingediende informatie correct is. De validatie van formulieren gebeurt meestal aan de serverzijde, zodra de vereiste informatie door de client is ingevoerd. Na validatie van het formulier, als er onjuiste informatie is of een veld leeg is gelaten. Vervolgens verzendt de server het bericht naar de client dat de ingevoerde informatie onjuist is of ontbreekt. De validatie van formulieren geeft de klanten het vertrouwen dat alle ingevoerde informatie correct is of dat er een fout wordt gegenereerd zodat deze kan worden gecorrigeerd.

Voorbeeld:

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

Dingen die moeten worden gecontroleerd terwijl u formuliervalidatie uitvoert

• Controleer of de gebruiker het veld leeg heeft gelaten dat moet worden ingevuld. Als het leeg is, stuur dan "Waarschuwingsbericht" terug.
• Controleer of de gebruiker een nummer heeft ingevoerd waar de numerieke waarde moet worden ingevoerd. Bijvoorbeeld contactgegevens.
• Controleer of de gebruiker een alfabetisch teken in het naamveld heeft ingevoerd.
• Controleer op numeriek en alfabetisch teken. Als het formulierveld alfanumeriek is. Bijvoorbeeld het berichtveld.
• Controleer of de gebruiker het wachtwoord correct in beide velden heeft ingevoerd. (Wachtwoordveld, Wachtwoord bevestigen veld)
• Zorg er ook voor dat alle vervolgkeuzelijsten en het selectievakje correct zijn gemarkeerd.

Typen formuliervalidatie

• Formuliervalidatie aan clientzijde
• Formuliervalidatie aan serverzijde

1. Formuliervalidatie aan clientzijde

Het is handig om Jscript te gebruiken om spanning en onnodige bandbreedte voor server-clientvalidatie te voorkomen. Na validatie vanaf de client moet u nog een validatie krijgen vanaf de server. De reden om nog een validatie van de server te doen, is omdat de gebruiker JavaScript mogelijk heeft uitgeschakeld in hun webbrowser.

Validatie aan clientzijde kost minder tijd om te valideren, omdat de validatie gebeurt in de browser van de gebruiker en het helpt de gebruiker een betere ervaring te hebben. Terwijl bij server-side validatie die op de server gebeurt, de invoer van de gebruiker vereist is. Vervolgens moet het vóór validatie naar de server worden verzonden en ten slotte moet de gebruiker wachten op het antwoord van de server om te weten op welk veld de fout is opgetreden.

Voorbeeld



First name
required>

Last name
required>

Username

@
aria-describedby="inputGroupPrepend21" required>


City

State

Zip



Agree to terms and conditions

Submit form


Uitgang :

2. Formuliervalidatie aan serverzijde

De server-side validatie uitgevoerd om ervoor te zorgen dat alle gegevens zijn ingevoerd door de gebruiker en niets is zwart gelaten of onjuist ingevoerd. Server-side validatie zorgt ervoor dat er geen fouten zijn in het formulier dat door de gebruiker is ingevoerd.

Voorbeeld



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





Output:

Conclusie - JavaScript-formuliervalidatie

Formuliervalidatie in JavaScript vereist geen complexe codering, maar we moeten vanuit het oogpunt van de gebruiker nadenken over hoe ze fouten zouden maken tijdens het invullen van een formulier en hoe het kan worden gevalideerd met behulp van de verschillende methoden. We moeten ervoor zorgen dat als de gebruiker de informatie verkeerd invoert, het foutbericht op welk veld de fout is opgetreden en instructies geven over het invoerformaat.

Aanbevolen artikelen

Dit is een gids voor JavaScript-formuliervalidatie. Hier bespreken we ook de dingen die moeten worden gecontroleerd tijdens het uitvoeren van formuliervalidatie en de typen ervan. U kunt ook de volgende artikelen bekijken voor meer informatie -

1. Inkapseling in JavaScript
2. Functies van JavaScript
3. Reguliere uitdrukkingen in JavaScript
4. ASP.Net Validation Controls
5. Voorbeelden van Checkbox in Bootstrap
6. Twee manieren van HTML-formuliervalidatie met voorbeelden