Personalmente, oltre ad una validazione lato client che in effetti può evitare una richiesta inutile al server, preferisco sempre validare anche lato server per questioni di sicurezza.
Se vi ricordate il post sui middleware, la funzionalità di validazione dei dati di un form potremmo implementarla attraverso dei middleware attivati per le rotte (richieste) opportune.
A noi non piace reinventare la ruota, volete che non ci sia un modulo per node.js bello e pronto per la validazione dei dati di un form? Che magari ci permetta di validare in maniera semplice anche campi per indirizzi email o campi numerici?
Ovviamente tale modulo esiste, in realtà ne esiste più di uno, oggi vediamo express-form che ho scelto per la sua semplicità di utilizzo.
Installato nel progetto il modulo express-form, il codice per validare ad esempio il form di login è il seguente presente nel file delle rotte utenti.js, evidenzio solo la parte del codice coinvolta per il login
var form = require('express-form');
var field = form.field;
var validatoreLogin = form(
field('username').trim().required('', 'Inserire il nome utente!'),
field('password').trim().required('','Inserire la password!')
);
router.route('/login')
.post(validatoreLogin, function(request,response){
var utente = undefined;
if (!request.form.isValid) {
response.render('login', {errors: request.form.errors});
}
else {
utente = serviziBiblioteca.login(
request.body.username,
request.body.password
);
if (utente) {
request.session.utente = utente;
response.render('home');
}
else {
response.render(
'login',
{ loginFallito : 'Utente non abilitato'}
);
}
}
});
Il modulo express-form ci fornisce una funzione form che ritorna un middlewar da associare alle richieste che vogliamo validare.La funzione form, accetta come parametri delle funzioni field per validare i campi del form.
Se spulciate sulla documentazione ufficiale di express-form, troverete degli esempi di validazione per tutti i gusti: in questo caso abbiamo usato il validatore di tipo required che rende il form invalido se il campo in questione non è stato inserito dall'utente.
Una volta definito il middleware, costituito in questo caso dalla funzione validatoreLogin, basta passarlo come primo parametro alla funzione post associata alla richiesta di login.
Il middleware aggiunge all'oggetto request una proprietà form che possiamo testare con l'istruzione
if (!request.form.isValid) e renderizzare la pagina di login passando l'array delle stringhe d'errore presenti in request.form.errors.
Nelle pagine di presentazione, dove occorre visualizzare i messaggi di errore di validazione basterà inserire, dove vogliamo, un codice di questo tipo
if (errors)
ul
each error in errors
li.text-danger #{error}
Vediamo ora come costruire il validatore del form di registrazione
var validatoreRegistrazione = form(
field('username').trim().required('', 'Inserire il nome utente!'),
field('password').trim().required('','Inserire la password!'),
field('email').trim().required('','Inserire la mail').isEmail('mail invalida')
);
e leghiamo il validatore, che è un middleware, alla richiesta post di registrazione
router.route('/registrazione')
.post(validatoreRegistrazione, function(request,response) {
var utente = {};
if (!request.form.isValid) {
response.render('registrazione', {errors: request.form.errors})
} else {
utente.username = request.body.username;
utente.password = request.body.password;
utente.email = request.body.email;
utente.profilo = 'semplice';
serviziBiblioteca.registra(utente);
response.render('login', {
registrazioneOk: 'Ora puoi effettuare il login!'});
}
});
Per non avere ripetizioni di codice e grazie alla presenza della istruzione condizionale, conviene inserire il codice della visualizzazione messaggi all'interno del file layout.jade
...
div.col-md-10
block contenuti-principali
block validazione
if (errors)
ul
each error in errors
li.text-danger #{error}
...
Su https://whispering-peak-1284.herokuapp.com/ potete testare la validazione così implementata.Come al solito, ho aggiornato su github il progetto installato su heroku, in modo che possiate avere sempre tutto il codice a disposizione, in questo post è spiegato come utilizzare github.
Dopo aver fatto il pull del progetto, ricordatevi di eseguire npm install per installare la dipendenza aggiuntiva di express-form nella cartella di progetto: se volete eseguire il programma in locale digitate node app.js e puntate il browser all'indirizzo http://localhost:5000.
Alla prox
Ivan
Nessun commento:
Posta un commento