La validació de dades és una part essencial de qualsevol aplicació web, ja que ajuda a garantir que les dades que s'estan penjant compleixen determinats requisits imposats pels desenvolupadors. Les dades es poden validar tant al costat del servidor com al client, però la validació del costat del client sovint estalvia temps als usuaris i demostra una experiència d'usuari més agradable i fluida. La validació de dades del client es pot fer fàcilment i consumeix molt menys temps.
En aquesta guia de com fer-ho passarem pel procés de creació d'un formulari mitjançant HTML, JavaScript/jQuery que valida el fitxer de la mida a mesura que s'està pujant. L'avantatge d'aquesta validació és que podem restringir els usuaris a penjar només una mida determinada de fitxers i assegurar-nos que compleixen estrictament els nostres requisits. Si el fitxer és de mida incorrecta, podem demanar un missatge a l'usuari sense carregar el fitxer al servidor, cosa que estalvia un temps preciós.
Crea una pàgina web
Primer, crearem una pàgina web HTML senzilla:
DOCTYPE html >
< html >
< cap >
< títol >
Validació de dossier mida mentre càrrega mitjançant JavaScript / jQuery
títol >
cap >
< cos estil = 'padding-top: 10px; text-align:center;' >
< pàg > Carregar a dossier pàg >
< entrada id = 'dossier' tipus = 'dossier' estil = 'padding-left: 95px;' />
< br >< br >
< botó fent clic = 'sizeValidation()' > Carrega botó >
cos >
html >
Comprensió del codi:
Al cos de la pàgina web, simplement hem utilitzat a ,
i a
El
Definiu la funció JavaScript sizeValidation().
Ara anem a escriure el codi JavaScript que defineix el sizeValidation() funció.
< guió >
funció validació de mida ( ) {
var entrada = document.getElementById ( 'dossier' ) ;
era dossier = fitxers d'entrada;
si ( file.length== 0 ) {
alerta ( 'No s'ha seleccionat cap fitxer' ) ;
tornar fals ;
}
var fileSize = Math.round ( ( dossier [ 0 ] .mida / 1024 ) ) ;
si ( mida de l'arxiu < = 5 * 1024 ) {
alerta ( 'Penjat' ) ;
} altra cosa {
alerta (
'Error! El fitxer és massa gran' ) ;
}
}
guió >
Comprensió del codi:
Dins del cos del sizeValidation() primer obtenim l'etiqueta i després fem servir la funció var fitxer = inputElement.files; línia perquè puguem accedir al fitxer que s'està penjant. Aleshores comprovem si s'ha carregat un fitxer, si no, ens indicarà un missatge d'error i sortirem de la funció retornant false.
Després fem servir algunes matemàtiques per determinar la mida del fitxer. Si el fitxer té una mida adequada, és a dir, 5 MB (en aquest cas), es carrega.
En cas contrari, es mostrarà una finestra emergent que conté un missatge d'error.
Conclusió
Tot i que la validació del costat del client és molt més eficient, encara no és un substitut de la validació del costat del servidor i es pot eludir en la majoria dels casos. Sempre és una bona pràctica implementar la validació tant del servidor com del client perquè pugueu garantir l'eficiència i la precisió de la vostra aplicació.