Datavalidering är en viktig del av alla webbapplikationer eftersom den hjälper till att säkerställa att data som laddas upp uppfyller vissa krav som utvecklarna ställer. Data kan valideras på både server- och klientsidan men validering på klientsidan sparar ofta användarnas tid och visar på en trevligare och smidigare användarupplevelse. Datavalidering på klientsidan kan göras enkelt och tar mycket mindre tid.
I den här guiden går vi igenom processen att skapa ett formulär med HTML, JavaScript/jQuery som validerar filen med storleken när den laddas upp. Fördelen med denna validering är att vi kan begränsa användare att ladda upp endast en viss storlek på filer och se till att de strikt följer våra krav. Om filen är av fel storlek kan vi skicka ett meddelande till användaren utan att ladda upp filen till servern vilket sparar dyrbar tid.
Skapa webbsida
Först skapar vi en enkel HTML-webbsida:
DOCTYPE html >
< html >
< huvud >
< titel >
Validering av fil storlek medan ladda upp med JavaScript / jQuery
titel >
huvud >
< kropp stil = 'padding-top: 10px; text-align:center;' >
< sid > Ladda upp en fil sid >
< inmatning id = 'fil' typ = 'fil' stil = 'padding-left: 95px;' />
< br >< br >
< knapp onclick = 'sizeValidation()' > Ladda upp knapp >
kropp >
html >
Förstå koden:
I webbsidans brödtext har vi helt enkelt använt en ,
och a
De
Definiera JavaScript sizeValidation() Funktion
Låt oss nu skriva JavaScript-koden som definierar sizeValidation() fungera.
< manus >
fungera storlek Validering ( ) {
var input = document.getElementById ( 'fil' ) ;
var fil = input.files;
om ( file.length== 0 ) {
varna ( 'Ingen fil vald' ) ;
lämna tillbaka falsk ;
}
var filstorlek = Math.round ( ( fil [ 0 ] .storlek / 1024 ) ) ;
om ( filstorlek < = 5 * 1024 ) {
varna ( 'Laddad upp' ) ;
} annan {
varna (
'Fel! Filen är för stor' ) ;
}
}
manus >
Förstå koden:
Inuti kroppen av sizeValidation() funktionen får vi först taggen och använder sedan var fil = inputElement.files; linje så att vi kan få tillgång till filen som laddas upp. Sedan kontrollerar vi om en fil har laddats upp, om inte kommer vi att få ett felmeddelande och ta oss ur funktionen genom att returnera false.
Vi använder sedan lite matematik för att bestämma storleken på filen. Om filen är av lämplig storlek, dvs. 5 MB (i detta fall), laddas den upp.
Annars visas ett popup-fönster med ett felmeddelande.
Slutsats
Även om validering på klientsidan är mycket effektivare, är den fortfarande inte en ersättning för validering på serversidan och kan kringgås i de flesta fall. Det är alltid en bästa praxis att implementera både server- och klientsidans validering så att du kan säkerställa både effektivitet och noggrannhet i din applikation.