Guida per i principianti sulla validazione dei form in JavaScript

Ciao a tutti, programmatori in erba! Oggi esploreremo il mondo entusiasmante della validazione dei form in JavaScript. Come qualcuno che ha insegnato programmazione per anni, posso dirti che questa è una delle competenze più pratiche e importanti che imparerai. Allora, mettiamoci all'opera!

Cos'è la validazione dei form?

Prima di immergerci nel codice, capiremo cos'è la validazione dei form e perché è importante. Immagina di compilare un modulo per ordinare una pizza online. Non vorresti accidentalmente ordinare 1000 pizze invece di una, vero? Ecco dove entra in gioco la validazione dei form - controlla i dati inseriti dagli utenti per assicurarsi che siano corretti e nel formato giusto.

Validazione di base dei form

1. Controllare se un campo è vuoto

Iniziamo con la validazione più basilare - controllare se un campo è vuoto. Ecco un esempio semplice:

function validateForm() {
let x = document.forms["myForm"]["fname"].value;
if (x == "") {
alert("Il nome deve essere compilato");
return false;
}
}

In questo codice:

• Stiamo obtaining il valore di un campo chiamato "fname" da un modulo chiamato "myForm".
• Se il valore è vuoto (una stringa vuota), mostriamo un avviso e torniamo false, impedendo l'invio del modulo.

2. Validare l'input numerico

Ora, assicuriamoci che un campo contenga solo numeri:

function validateNumber() {
let x = document.getElementById("myNumber").value;
if (isNaN(x) || x < 1 || x > 100) {
alert("Input non valido");
return false;
}
}

Ecco cosa sta succedendo:

• Otteniamo il valore di un campo di input con l'ID "myNumber".
• Utilizziamo isNaN() per controllare se non è un numero.
• Controlliamo anche se il numero è tra 1 e 100.
• Se una di queste condizioni è vera, mostriamo un avviso e torniamo false.

Validazione del formato dei dati

1. Validazione dell'email

Una delle validazioni più comuni è controllare se un indirizzo email è nel formato corretto. Ecco come possiamo farlo:

function validateEmail() {
let email = document.getElementById("myEmail").value;
let regex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
if (!regex.test(email)) {
alert("Inserisci un indirizzo email valido");
return false;
}
}

Questo potrebbe sembrare un po' spaventoso, ma analizziamo:

• Stiamo utilizzando un'espressione regolare (regex) per controllare il formato dell'email.
• La regex controlla:
• Alcuni caratteri che non sono spazi o @ ([^\s@]+)
• Seguiti da un simbolo @
• Seguiti da altri caratteri che non sono spazi o @
• Seguiti da un punto
• Seguiti da altri caratteri che non sono spazi o @

2. Validazione della data

Validiamo una data per assicurarci che sia nel formato MM/DD/YYYY:

function validateDate() {
let date = document.getElementById("myDate").value;
let regex = /^(0[1-9]|1[0-2])\/(0[1-9]|[12][0-9]|3[01])\/\d{4}$/;
if (!regex.test(date)) {
alert("Inserisci una data valida nel formato MM/DD/YYYY");
return false;
}
}

Questa regex è ancora più complessa, ma ecco cosa fa:

• Controlla:
• Un mese (01-12)
• Seguito da una /
• Un giorno (01-31)
• Un'altra /
• Un anno a 4 cifre

Ricorda, mentre questo controlla il formato, non verifica se la data è effettivamente valida (come il 30 febbraio).

Mettere tutto insieme

Ora che abbiamo visto le singole validazioni, combiniamole in un unico modulo:

<form name="myForm" onsubmit="return validateForm()">
Nome: <input type="text" name="fname"><br>
Età: <input type="text" id="myNumber"><br>
Email: <input type="text" id="myEmail"><br>
Data: <input type="text" id="myDate"><br>
<input type="submit" value="Invia">
</form>

<script>
function validateForm() {
if (!validateName() || !validateNumber() || !validateEmail() || !validateDate()) {
return false;
}
return true;
}

function validateName() {
let x = document.forms["myForm"]["fname"].value;
if (x == "") {
alert("Il nome deve essere compilato");
return false;
}
return true;
}

function validateNumber() {
let x = document.getElementById("myNumber").value;
if (isNaN(x) || x < 1 || x > 100) {
alert("L'età deve essere un numero tra 1 e 100");
return false;
}
return true;
}

function validateEmail() {
let email = document.getElementById("myEmail").value;
let regex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
if (!regex.test(email)) {
alert("Inserisci un indirizzo email valido");
return false;
}
return true;
}

function validateDate() {
let date = document.getElementById("myDate").value;
let regex = /^(0[1-9]|1[0-2])\/(0[1-9]|[12][0-9]|3[01])\/\d{4}$/;
if (!regex.test(date)) {
alert("Inserisci una data valida nel formato MM/DD/YYYY");
return false;
}
return true;
}
</script>

In questo esempio completo:

• Abbiamo un modulo con campi per il nome, l'età, l'email e la data.
• Il modulo's onsubmit evento chiama validateForm().
• validateForm() chiama tutte le nostre funzioni di validazione singole.
• Se qualsiasi validazione fallisce, l'invio del modulo viene impedito.

Conclusione

Complimenti! Hai appena imparato le basi della validazione dei form in JavaScript. Ricorda, la validazione non è solo per prevenire errori - è per creare una migliore esperienza utente. Mentre continui il tuo viaggio di programmazione, troverai molti altri modi per migliorare i tuoi form e renderli ancora più user-friendly.

Ecco una tabella che riassume i metodi di validazione che abbiamo coperto:

Metodo	Scopo	Esempio
Controllo campo vuoto	Assicurare che i campi obbligatori siano compilati	if (x == "")
Validazione numerica	Controllare se l'input è un numero e nel range	if (isNaN(x) || x < 1 || x > 100)
Validazione email	Verificare il formato dell'email	if (!regex.test(email))
Validazione formato data	Controllare se la data è nel formato corretto	if (!regex.test(date))

Continua a praticare, e presto diventerai un mago della validazione dei form! Ricorda, ogni grande programmatore è iniziato esattamente dove sei ora. Buon codice!

Credits: Image by storyset