La convalida dei dati è una parte essenziale di qualsiasi applicazione Web in quanto aiuta a garantire che i dati caricati soddisfino determinati requisiti imposti dagli sviluppatori. I dati possono essere convalidati sia sul lato server che sul lato client, ma la convalida lato client spesso fa risparmiare tempo agli utenti e si rivela un'esperienza utente più piacevole e fluida. La convalida dei dati lato client può essere eseguita facilmente e richiede molto meno tempo.
In questa guida pratica analizzeremo il processo di creazione di un modulo utilizzando HTML, JavaScript/jQuery che convalida il file della dimensione mentre viene caricato. Il vantaggio di questa convalida è che possiamo limitare gli utenti a caricare solo una certa dimensione di file e assicurarci che seguano rigorosamente i nostri requisiti. Se il file è di dimensioni errate, possiamo inviare un messaggio all'utente senza caricare il file sul server, risparmiando tempo prezioso.
Crea pagina web
Per prima cosa, creeremo una semplice pagina Web HTML:
DOCTYPE html >
< html >
< testa >
< titolo >
Convalida di file taglia mentre caricamento tramite JavaScript / jQuery
titolo >
testa >
< corpo stile = 'padding-top: 10px; text-align:center;' >
< p > Carica un file p >
< ingresso id = 'file' genere = 'file' stile = 'padding-sinistra: 95px;' />
< fr >< fr >
< pulsante al clic = 'sizeValidation()' > Caricamento pulsante >
corpo >
html >
Comprendere il codice:
Nel corpo della pagina web, abbiamo semplicemente utilizzato a ,
e un
Il
Definisci la funzione JavaScript sizeValidation()
Ora scriviamo il codice JavaScript che definisce il sizeConvalida() funzione.
< sceneggiatura >
funzione sizeConvalida ( ) {
var input = document.getElementById ( 'file' ) ;
era file = file.di input;
Se ( file.lunghezza== 0 ) {
mettere in guardia ( 'Nessun file scelto' ) ;
Restituzione falso ;
}
var fileSize = Math.round ( ( file [ 0 ] .taglia / 1024 ) ) ;
Se ( dimensione del file < = 5 * 1024 ) {
mettere in guardia ( 'Caricato' ) ;
} altro {
mettere in guardia (
'Errore! File troppo grande' ) ;
}
}
sceneggiatura >
Comprendere il codice:
All'interno del corpo del sizeConvalida() funzione otteniamo prima il tag e quindi utilizziamo il var file = inputElement.files; riga in modo da poter accedere al file in fase di caricamento. Quindi controlliamo se un file è stato caricato, in caso contrario, verrà visualizzato un messaggio di errore e usciremo dalla funzione restituendo false.
Usiamo quindi un po' di matematica per determinare la dimensione del file. Se il file ha una dimensione appropriata, ad esempio 5 MB (in questo caso), viene caricato.
In caso contrario, viene visualizzato un popup contenente un messaggio di errore.
Conclusione
Anche se la convalida lato client è molto più efficiente, non sostituisce comunque la convalida lato server e può essere aggirata nella maggior parte dei casi. È sempre consigliabile implementare la convalida sia lato server che lato client in modo da poter garantire sia l'efficienza che l'accuratezza dell'applicazione.