Gegevensvalidatie is een essentieel onderdeel van elke webtoepassing, omdat het ervoor zorgt dat de gegevens die worden geüpload voldoen aan bepaalde eisen die door de ontwikkelaars worden opgelegd. Gegevens kunnen zowel aan de server- als aan de clientzijde worden gevalideerd, maar validatie aan de clientzijde bespaart gebruikers vaak tijd en blijkt een mooiere, soepelere gebruikerservaring te zijn. Gegevensvalidatie aan de clientzijde kan eenvoudig worden gedaan en kost veel minder tijd.
In deze handleiding gaan we door het proces van het maken van een formulier met HTML, JavaScript/jQuery dat het bestand van de grootte valideert terwijl het wordt geüpload. Het voordeel van deze validatie is dat we gebruikers kunnen beperken om alleen bestanden van een bepaalde grootte te uploaden en ervoor te zorgen dat ze strikt aan onze vereisten voldoen. Als het bestand de verkeerde grootte heeft, kunnen we de gebruiker een bericht sturen zonder het bestand naar de server te uploaden, wat kostbare tijd bespaart.
Webpagina maken
Eerst maken we een eenvoudige HTML-webpagina:
DOCTYPE html >
< html >
< hoofd >
< titel >
Validatie van het dossier maat terwijl uploaden met JavaScript / jQuery
titel >
hoofd >
< lichaam stijl = 'padding-top: 10px; text-align:center;' >
< p > Upload een het dossier p >
< invoer ID kaart = 'het dossier' type = 'het dossier' stijl = 'padding-links: 95px;' />
< br >< br >
< knop bij klikken = 'grootteValidatie()' > Uploaden knop >
lichaam >
html >
De code begrijpen:
In de hoofdtekst van de webpagina hebben we eenvoudigweg a . gebruikt ,
en een
De
Definieer JavaScript sizeValidation() Functie
Laten we nu de JavaScript-code schrijven die de . definieert maatValidatie() functie.
< script >
functie maatValidatie ( ) {
var input = document.getElementById ( 'het dossier' ) ;
was het dossier = invoer.bestanden;
als ( file.length== 0 ) {
alarmeren ( 'Geen bestand gekozen' ) ;
opbrengst vals ;
}
var fileSize = Math.round ( ( het dossier [ 0 ] .maat / 1024 ) ) ;
als ( bestandsgrootte < = 5 * 1024 ) {
alarmeren ( 'Geüpload' ) ;
} anders {
alarmeren (
'Fout! Bestand te groot' ) ;
}
}
script >
De code begrijpen:
In het lichaam van de maatValidatie() functie krijgen we eerst de tag en gebruiken dan de var bestand = inputElement.files; regel zodat we toegang kunnen krijgen tot het bestand dat wordt geüpload. Vervolgens controleren we of een bestand is geüpload, zo niet, dan zullen we een foutmelding geven en de functie verlaten door false te retourneren.
Vervolgens gebruiken we wat wiskunde om de grootte van het bestand te bepalen. Als het bestand de juiste grootte heeft, d.w.z. 5 MB (in dit geval), wordt het geüpload.
Anders wordt een pop-up met een foutmelding weergegeven.
Conclusie
Hoewel validatie aan de clientzijde een stuk efficiënter is, is het nog steeds geen vervanging voor validatie aan de serverzijde en kan in de meeste gevallen worden omzeild. Het is altijd een best practice om zowel server- als client-side validatie te implementeren, zodat u zowel de efficiëntie als de nauwkeurigheid van uw toepassing kunt garanderen.