JavaScript-lomakkeen validointi - Erityyppiset javascript-muodon validoinnit

Johdanto JavaScript-lomakkeiden validointiin

Lomakkeen validointi tarkistaa luotujen lomakkeiden tarkkuuden ja tarkistaa, ovatko käyttäjän toimittamat tiedot oikeita. Lomakkeiden validointi tapahtuu yleensä palvelinpuolella, kun asiakkaan syöttämät vaadittavat tiedot ovat. Jos lomakkeen validoinnin jälkeen on virheellisiä tietoja tai kenttä on tyhjä. Sitten palvelin lähettää asiakkaalle viestin, että syötetyt tiedot ovat vääriä tai puuttuvat. Lomakkeiden validointi antaa asiakkaille luottamuksen siihen, että kaikki syötetyt tiedot ovat oikein tai virhe heitetään, jotta ne voidaan korjata.

Esimerkki:

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

Asiat, jotka on tarkistettava lomakkeen validoinnin yhteydessä

• Tarkista, onko käyttäjä jättänyt kentän tyhjäksi, joka on täytettävä. Jos se on tyhjä, palaa ”Hälytysviesti”.
• Tarkista, onko käyttäjä syöttänyt numeron, johon numeerinen arvo tulisi syöttää. Esimerkiksi yhteystiedot.
• Tarkista, onko käyttäjä syöttänyt aakkosmerkin nimikenttään.
• Tarkista numeroiden ja aakkosten merkki. Jos lomakekenttä on aakkosnumeerinen. Esimerkiksi viestikenttä.
• Tarkista, onko käyttäjä syöttänyt salasanan oikein molemmissa kentissä. (Salasanakenttä, Vahvista salasanakenttä)
• Varmista myös, onko kaikki avattavat ja valintaruudut merkitty oikein.

Tyypit lomakkeen validoinnista

• Asiakaspuolen lomakkeen validointi
• Palvelinpuolen lomakkeen validointi

1. Asiakaspuolen lomakkeen validointi

Js-palvelimen asiakaspuolen rasituksen ja tarpeettoman kaistanleveyden välttämiseksi on hyödyllistä käyttää Jscriptiä. Vahvistamisen jälkeen asiakaspuolelta sinulla pitäisi olla toinen validointi palvelinpuolelta. Syy palvelinpuolen vielä yhden validoinnin suorittamiselle johtuu siitä, että käyttäjä on ehkä poistanut JavaScriptin verkkosivuillaan.

Asiakaspuolen validointi vie vähemmän aikaa validointiin, koska validointi tapahtuu käyttäjän selaimessa ja se auttaa käyttäjää saamaan paremman kokemuksen. Kun taas palvelimen puoleisessa validoinnissa, joka tapahtuu palvelimella, se vaatii käyttäjän syötteen. Sitten se on lähetettävä palvelimelle ennen validointia, ja lopuksi käyttäjän on odotettava vastausta palvelimelta tietääkseen, missä kentässä virhe ilmeni.

esimerkki



First name
required>

Last name
required>

Username

@
aria-describedby="inputGroupPrepend21" required>


City

State

Zip



Agree to terms and conditions

Submit form


Tulos :

2. Palvelinpuolen lomakkeen validointi

Palvelinpuolen validointi suoritettiin sen varmistamiseksi, että käyttäjä on syöttänyt kaikki tiedot ja että mitään ei ole jätetty mustaksi tai syötetty väärin. Palvelinpuolen validointi varmistaa, että käyttäjän kirjoittamassa muodossa ei ole virheitä.

esimerkki



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





lähtö:

Johtopäätös - JavaScript-muodon validointi

Lomakkeen validointi JavaScriptissä ei vaadi monimutkaista koodausta, mutta käyttäjän tulisi pohtia, miten he tekisivät virheitä lomakkeen täyttämisessä ja kuinka se voidaan validoida eri menetelmillä. Meidän on varmistettava, että jos käyttäjä kirjoittaa tiedot väärin, virheilmoitus, kenttään virhe on tapahtunut, ja annettava ohjeet syöttömuodosta.

Suositellut artikkelit

Tämä on opas JavaScript-lomakkeiden validointiin. Tässä keskustellaan myös asioista, jotka on tarkistettava lomakkeen validointia tehtäessä ja sen tyypeistä. Saatat myös katsoa seuraavia artikkeleita saadaksesi lisätietoja -

1. Kapselointi JavaScriptiin
2. JavaScriptin ominaisuudet
3. Säännölliset lausekkeet JavaScript-muodossa
4. ASP.Net-validointiohjaimet
5. Esimerkkejä Bootstrap-valintaruudusta
6. Kaksi tapaa HTML-lomakkeiden validointiin esimerkkien avulla