Logica di validazione dei moduli lato client
Implementare regole avanzate di validazione lato client, fornendo feedback immediato agli utenti e garantendo l'integrità dei dati prima dell'invio mediante la validazione personalizzata di jQuery.
Logica di validazione dei moduli lato client è una lezione jQuery Academy gratuita su CoddyKit. Questa è la lezione 2 di 3. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento jQuery Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso jQuery Academy include 3 lezioni in totale.
Perché convalidare i moduli sul client
La convalida dei moduli lato client controlla i dati inseriti dall'utente prima che vengano inviati al server. È un passaggio fondamentale per creare applicazioni web intuitive.
- Esperienza utente migliorata: gli utenti ricevono un feedback immediato sugli errori e possono correggere gli sbagli senza attendere la risposta del server.
- Riduzione del carico sul server: i dati non validi vengono intercettati subito, evitando al server di elaborare richieste non necessarie.
- Interazioni più rapide: l'assenza di ricaricamenti della pagina rende l'esperienza con il modulo più fluida e reattiva.
Oltre la convalida HTML5 di base
HTML5 offre attributi di convalida di base come required, type="email" e pattern. Sebbene siano utili, spesso non sono abbastanza flessibili per gestire regole aziendali complesse o messaggi personalizzati.
Ad esempio, HTML5 non consente di verificare facilmente se una password soddisfa specifici criteri di robustezza (ad esempio, almeno 8 caratteri, un numero e un simbolo) o se due campi password corrispondono. È qui che entra in gioco jQuery!
Intercettare l'invio di un modulo
Il primo passaggio della convalida personalizzata consiste nell'impedire l'invio predefinito del modulo da parte del browser. A questo scopo utilizziamo il gestore dell'evento .submit() di jQuery e event.preventDefault().
In questo modo possiamo eseguire prima la logica di convalida. Se il modulo è valido, possiamo quindi inviarlo manualmente (oppure trasmetterlo tramite AJAX, argomento che affronteremo in un'altra lezione).
<!-- HTML part (imagine this exists) -->
<form id="myForm">
<input type="text" id="username" required>
<button type="submit">Submit</button>
</form>
<script>
$(document).ready(function() {
$('#myForm').submit(function(event) {
// Stop the form from submitting normally
event.preventDefault();
console.log("Form submission intercepted!");
// Here, you'd add your validation logic
});
});
</script>Strutturare una funzione di convalida personalizzata
È buona pratica incapsulare la logica di convalida in una funzione riutilizzabile. Questa funzione può restituire true se il modulo è valido e false in caso contrario.
È quindi possibile chiamare questa funzione all'interno del gestore dell'evento submit del modulo per decidere se procedere con l'invio.
<!-- HTML part -->
<form id="loginForm">
<input type="text" id="email" placeholder="Email">
<button type="submit">Login</button>
</form>
<script>
function validateLoginForm() {
let isValid = true;
const email = $('#email').val();
if (email === '' || !email.includes('@')) {
console.log("Invalid email!");
isValid = false;
}
// More validation checks here...
return isValid;
}
$(document).ready(function() {
$('#loginForm').submit(function(event) {
event.preventDefault();
if (validateLoginForm()) {
console.log("Form is valid! Submitting...");
// $(this).off('submit').submit(); // To submit programmatically
} else {
console.log("Form has errors. Please fix.");
}
});
});
</script>Convalidare la lunghezza di un campo di testo
Una regola di convalida comune consiste nel verificare la lunghezza minima o massima del testo inserito. È possibile farlo facilmente recuperando il valore .val() di un campo e controllando la relativa proprietà .length.
Impostiamo una lunghezza minima di 5 caratteri per il nome utente.
<!-- HTML part -->
<form id="userForm">
<input type="text" id="username" placeholder="Username">
<button type="submit">Create User</button>
</form>
<script>
function validateUsernameLength() {
const username = $('#username').val();
if (username.length < 5) {
console.log("Username must be at least 5 characters long.");
return false;
}
return true;
}
$(document).ready(function() {
$('#userForm').submit(function(event) {
event.preventDefault();
if (validateUsernameLength()) {
console.log("Username is valid!");
} else {
console.log("Validation failed.");
}
});
});
</script>Fornire un feedback immediato all'utente
Registrare semplicemente gli errori nella console non è sufficiente per gli utenti! È necessario mostrare un feedback chiaro e immediato direttamente nella pagina. È possibile aggiungere messaggi di errore accanto ai campi o evidenziare gli input non validi.
Aggiungeremo un elemento <span> per mostrare un messaggio di errore quando il nome utente è troppo breve.
<!-- HTML part -->
<form id="userFormFeedback">
<label for="usernameFeedback">Username:</label>
<input type="text" id="usernameFeedback" placeholder="Min 5 chars">
<span id="usernameError" style="color: red;"></span>
<button type="submit">Create User</button>
</form>
<script>
$(document).ready(function() {
$('#userFormFeedback').submit(function(event) {
event.preventDefault();
const username = $('#usernameFeedback').val();
const $errorSpan = $('#usernameError');
if (username.length < 5) {
$errorSpan.text("Username too short!");
$('#usernameFeedback').css('border', '1px solid red');
} else {
$errorSpan.text("");
$('#usernameFeedback').css('border', '');
console.log("Username is valid!");
}
});
});
</script>Convalidare un indirizzo email con le espressioni regolari
Per verificare schemi complessi, come i formati degli indirizzi email, le espressioni regolari (regex) sono indispensabili. Il metodo RegExp.test() di JavaScript è perfetto per questo scopo.
Una regex di base per gli indirizzi email può verificare la presenza di caratteri, del simbolo '@' e di un dominio. Tenga presente che una regex per gli indirizzi email troppo rigida può diventare eccessivamente complessa: punti quindi a un compromesso.
<!-- HTML part -->
<form id="emailForm">
<label for="userEmail">Email:</label>
<input type="text" id="userEmail" placeholder="your@example.com">
<span id="emailError" style="color: red;"></span>
<button type="submit">Subscribe</button>
</form>
<script>
$(document).ready(function() {
$('#emailForm').submit(function(event) {
event.preventDefault();
const email = $('#userEmail').val();
const $errorSpan = $('#emailError');
// Basic email regex: something@something.something
const emailRegex = /^[\w.-]+@[\w.-]+\.[a-zA-Z]{2,6}$/;
if (!emailRegex.test(email)) {
$errorSpan.text("Invalid email format.");
$('#userEmail').css('border', '1px solid red');
} else {
$errorSpan.text("");
$('#userEmail').css('border', '');
console.log("Email is valid!");
}
});
});
</script>Convalida di un intervallo numerico
A volte è necessario assicurarsi che un numero rientri in un intervallo specifico (ad esempio, un'età compresa tra 18 e 65 anni o una quantità compresa tra 1 e 100). È possibile convertire il valore dell'input in un numero ed eseguire semplici confronti.
Ricordi sempre di convertire l'input, che è una stringa, in un numero usando parseInt() o parseFloat() prima di eseguire confronti numerici.
<!-- HTML part -->
<form id="ageForm">
<label for="userAge">Your Age:</label>
<input type="number" id="userAge" placeholder="Enter age">
<span id="ageError" style="color: red;"></span>
<button type="submit">Submit Age</button>
</form>
<script>
$(document).ready(function() {
$('#ageForm').submit(function(event) {
event.preventDefault();
const ageInput = $('#userAge').val();
const age = parseInt(ageInput, 10); // Convert to integer
const $errorSpan = $('#ageError');
if (isNaN(age) || age < 18 || age > 65) {
$errorSpan.text("Age must be between 18 and 65.");
$('#userAge').css('border', '1px solid red');
} else {
$errorSpan.text("");
$('#userAge').css('border', '');
console.log("Age is valid!");
}
});
});
</script>Combinare più regole di convalida
Spesso i moduli richiedono più regole di convalida per un singolo campo o per diversi campi. È possibile concatenare questi controlli all'interno della funzione di convalida.
Un approccio comune consiste nel considerare inizialmente validi i dati e impostare isValid = false se una regola non viene rispettata. In questo modo è possibile raccogliere tutti gli errori prima di mostrarli all'utente.
- Chiami le singole funzioni di supporto per la convalida.
- Salvi i risultati in un flag booleano.
- Mostri tutti i messaggi di errore pertinenti.
Verifichi le Sue competenze sulla convalida
Consideri un campo del modulo per un "Codice prodotto" che deve rispettare due regole:
- Deve contenere esattamente 6 caratteri.
- Deve contenere solo lettere maiuscole e cifre (A-Z, 0-9).
Quale snippet jQuery convalida correttamente il campo di input 'productCode' e mostra un messaggio di errore?
Riepilogo: convalida lato client
In questa lezione ha imparato a implementare una solida convalida dei moduli lato client usando jQuery. Abbiamo trattato:
- l'importanza della convalida lato client per l'esperienza utente e le prestazioni;
- l'intercettazione dell'invio dei moduli con
event.preventDefault(); - la strutturazione di funzioni di convalida personalizzate;
- l'implementazione di regole per la lunghezza del testo, i formati email (regex) e gli intervalli numerici;
- la fornitura di un feedback chiaro e immediato agli utenti.
Padroneggiare queste tecniche La aiuterà a creare moduli più interattivi e meno soggetti a errori!
Domande Frequenti
La lezione «Logica di validazione dei moduli lato client» è gratuita?
Sì — il testo completo di «Logica di validazione dei moduli lato client» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso jQuery Academy, passa a CoddyKit PRO. Il corso jQuery Academy include 3 lezioni in totale.
Cosa imparerò in «Logica di validazione dei moduli lato client»?
Implementare regole avanzate di validazione lato client, fornendo feedback immediato agli utenti e garantendo l'integrità dei dati prima dell'invio mediante la validazione personalizzata di jQuery. Eserciti jQuery Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.
Ho bisogno di esperienza per iniziare jQuery Academy?
Non è richiesta alcuna esperienza precedente. jQuery Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 2 di 3.
Quanto tempo richiede la lezione «Logica di validazione dei moduli lato client»?
La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.
Posso scrivere ed eseguire codice in questa lezione jQuery Academy?
Sì. Ogni lezione jQuery Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.
Tutte le lezioni di questo corso
- Manipolazione dinamica dei campi dei moduli
- Logica di validazione dei moduli lato client
- Invio dei moduli tramite AJAX e feedback