Convalida del modulo JavaScript - Diversi tipi di convalida dei moduli javascript

Introduzione alla convalida del modulo JavaScript

La convalida del modulo esegue il controllo di precisione sui moduli creati e verifica se le informazioni inviate dall'utente sono corrette. La convalida dei moduli avviene di solito sul lato server, una volta che le informazioni richieste sono state immesse dal client. Dopo la convalida del modulo, se sono presenti informazioni errate o campi vuoti. Quindi, il server invia il messaggio al client che le informazioni inserite sono errate o mancanti. La convalida dei moduli dà la fiducia per i clienti che tutte le informazioni che sono state immesse sarebbero corrette oppure verrebbero generati errori in modo che possano essere corretti.

Esempio:

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

Cose che devono essere verificate durante la convalida del modulo

• Controlla se l'utente ha lasciato il campo vuoto che deve essere riempito. Se è vuoto, restituisce "Messaggio di avviso".
• Verifica se l'utente ha inserito un numero in cui inserire il valore numerico. Ad esempio, i dettagli di contatto.
• Controlla se l'utente ha inserito un carattere alfabetico nel campo del nome.
• Controlla il carattere numerico e alfabetico. Se il campo del modulo è alfanumerico. Ad esempio, il campo del messaggio.
• Controlla se l'utente ha inserito la password correttamente in entrambi i campi. (Campo Password, campo Conferma password)
• Assicurati anche che tutti i menu a discesa e la casella di controllo siano contrassegnati correttamente.

Tipi di convalida dei moduli

• Convalida del modulo lato client
• Convalida del modulo lato server

1. Convalida del modulo lato client

Per evitare la fatica e la larghezza di banda non necessaria alla convalida lato client del server è utile usare Jscript. Dopo la convalida dal lato client, è necessario disporre di un'altra convalida dal lato server. Il motivo per fare un'altra convalida sul lato server è perché l'utente potrebbe aver disabilitato JavaScript sul proprio browser web.

La convalida sul lato client richiede meno tempo per la convalida poiché la convalida viene eseguita sul browser dell'utente e consente all'utente di avere un'esperienza migliore. Considerando che nella validazione lato server che avviene sul server, richiede l'input dell'utente. Quindi, deve essere inviato al server prima della convalida e, infine, l'utente deve attendere la risposta dal server per sapere in quale campo si è verificato l'errore.

Esempio



First name
required>

Last name
required>

Username

@
aria-describedby="inputGroupPrepend21" required>


City

State

Zip



Agree to terms and conditions

Submit form


Uscita :

2. Convalida del modulo lato server

La convalida sul lato server è stata eseguita per garantire che tutti i dati siano stati inseriti dall'utente e che nulla sia stato lasciato nero o inserito in modo errato. La convalida sul lato server garantisce che non vi siano errori nel modulo inserito dall'utente.

Esempio



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





Produzione:

Conclusione - Convalida del modulo JavaScript

La convalida del modulo in JavaScript non richiede una codifica complessa, ma dovremmo pensare dal punto di vista dell'utente su come farebbero errori durante la compilazione di un modulo e su come può essere convalidato utilizzando i vari metodi. Dobbiamo assicurarci che se l'utente immette le informazioni in modo errato, quindi, il messaggio di errore su quale campo si è verificato l'errore e fornire istruzioni sul formato di input.

Articoli consigliati

Questa è stata una guida alla convalida del modulo JavaScript. Qui discutiamo anche le cose che devono essere verificate durante la convalida del modulo e i suoi tipi. Puoi anche dare un'occhiata ai seguenti articoli per saperne di più -

1. Incapsulamento in JavaScript
2. Funzionalità di JavaScript
3. Espressioni regolari in JavaScript
4. Controlli di convalida ASP.Net
5. Esempi di casella di controllo in Bootstrap
6. Due modi di convalida dei moduli HTML con esempi