Datavalidering er en væsentlig del af enhver webapplikation, da den hjælper med at sikre, at de data, der uploades, opfylder visse krav, som udviklerne har pålagt. Data kan valideres på både server- og klientsiden, men validering på klientsiden sparer ofte brugernes tid og beviser en pænere, jævnere brugeroplevelse. Datavalidering på klientsiden kan udføres nemt og bruger meget mindre tid.
I denne how-to-do guide vil vi gennemgå processen med at oprette en formular ved hjælp af HTML, JavaScript/jQuery, som validerer filen med størrelsen, når den uploades. Fordelen ved denne validering er, at vi kan begrænse brugere til kun at uploade en vis størrelse af filer og sørge for, at de nøje følger vores krav. Hvis filen har den forkerte størrelse, kan vi sende en besked til brugeren uden at uploade filen til serveren, hvilket sparer kostbar tid.
Opret webside
Først opretter vi en simpel HTML-webside:
DOCTYPE html >
< html >
< hoved >
< titel >
Validering af fil størrelse mens upload ved hjælp af JavaScript / jQuery
titel >
hoved >
< legeme stil = 'padding-top: 10px; text-align:center;' >
< s > Upload en fil s >
< input id = 'fil' type = 'fil' stil = 'polstring-venstre: 95px;' />
< br >< br >
< knap onclick = 'sizeValidation()' > Upload knap >
legeme >
html >
Forståelse af koden:
I brødteksten på websiden har vi blot brugt en , ,
og en
Det
Definer JavaScript sizeValidation() Funktion
Lad os nu skrive JavaScript-koden, som definerer sizeValidation() fungere.
< manuskript >
fungere størrelse Validering ( ) {
var input = document.getElementById ( 'fil' ) ;
var fil = input.filer;
hvis ( file.length== 0 ) {
alert ( 'Ingen fil valgt' ) ;
Vend tilbage falsk ;
}
var filstørrelse = Math.round ( ( fil [ 0 ] .størrelse / 1024 ) ) ;
hvis ( filstørrelse < = 5 * 1024 ) {
alert ( 'Uploadet' ) ;
} andet {
alert (
'Fejl! Filen er for stor' ) ;
}
}
manuskript >
Forståelse af koden:
Inde i kroppen af sizeValidation() funktion får vi først tagget og bruger derefter var fil = inputElement.filer; linje, så vi kan få adgang til filen, der uploades. Derefter tjekker vi om en fil er blevet uploadet, hvis ikke, giver vi en fejlmeddelelse og kommer ud af funktionen ved at returnere false.
Vi bruger så lidt matematik til at bestemme størrelsen på filen. Hvis filen er af passende størrelse, dvs. 5MB (i dette tilfælde), uploades den.
Ellers vises en pop-up med en fejlmeddelelse.
Konklusion
Selvom validering på klientsiden er meget mere effektiv, er den stadig ikke en erstatning for validering på serversiden og kan i de fleste tilfælde omgås. Det er altid en bedste praksis at implementere både server- og klientsidevalidering, så du kan sikre både effektivitet og nøjagtighed af din applikation.