Η επικύρωση δεδομένων είναι ένα ουσιαστικό μέρος οποιασδήποτε διαδικτυακής εφαρμογής, καθώς διασφαλίζει ότι τα δεδομένα που αποστέλλονται ανταποκρίνονται σε ορισμένες απαιτήσεις που επιβάλλονται από τους προγραμματιστές. Τα δεδομένα μπορούν να επικυρωθούν τόσο από την πλευρά του διακομιστή όσο και από την πλευρά του πελάτη, αλλά η επικύρωση από την πλευρά του πελάτη συχνά εξοικονομεί χρόνο στους χρήστες και αποδεικνύεται καλύτερη, πιο ομαλή εμπειρία χρήστη. Η επικύρωση δεδομένων από την πλευρά του πελάτη μπορεί να γίνει εύκολα και καταναλώνει πολύ λιγότερο χρόνο.
Σε αυτόν τον οδηγό πώς να κάνουμε θα προχωρήσουμε στη διαδικασία δημιουργίας μιας φόρμας χρησιμοποιώντας HTML, JavaScript/jQuery που επικυρώνει το αρχείο του μεγέθους καθώς ανεβάζεται. Το πλεονέκτημα αυτής της επικύρωσης είναι ότι μπορούμε να περιορίσουμε τους χρήστες να ανεβάζουν μόνο ένα συγκεκριμένο μέγεθος αρχείων και να διασφαλίζουμε ότι ακολουθούν αυστηρά τις απαιτήσεις μας. Εάν το αρχείο είναι λανθασμένου μεγέθους, μπορούμε να ζητήσουμε ένα μήνυμα στον χρήστη χωρίς να ανεβάσουμε το αρχείο στον διακομιστή, γεγονός που εξοικονομεί πολύτιμο χρόνο.
Δημιουργία Ιστοσελίδας
Αρχικά, θα δημιουργήσουμε μια απλή ιστοσελίδα HTML:
DOCTYPE html >
< html >
< κεφάλι >
< τίτλος >
Επικύρωση του αρχείο Μέγεθος ενώ μεταφόρτωση χρησιμοποιώντας JavaScript / jQuery
τίτλος >
κεφάλι >
< σώμα στυλ = 'padding-top: 10px; text-align:center;' >
< Π > Μεταφόρτωση α αρχείο Π >
< εισαγωγή ταυτότητα = 'αρχείο' τύπος = 'αρχείο' στυλ = 'padding-left: 95px;' />
< br >< br >
< κουμπί στο κλικ = 'sizeValidation()' > Μεταφόρτωση κουμπί >
σώμα >
html >
Κατανόηση του Κώδικα:
Στο σώμα της ιστοσελίδας, χρησιμοποιήσαμε απλώς ένα , <εισαγωγή> ,
και ένα <κουμπί> ετικέτα. ο <εισαγωγή> Η ετικέτα χρησιμοποιείται έτσι ώστε ο χρήστης να μπορεί να επιλέξει ένα αρχείο και στη συνέχεια να το ανεβάσει χρησιμοποιώντας το κουμπί που εμφανίζεται χρησιμοποιώντας το <κουμπί> ετικέτα.
ο <κουμπί> ετικέτα καλεί το sizeValidation() λειτουργία στο συμβάν κλικ που στη συνέχεια καθορίζει το μέγεθος του αρχείου και εκτυπώνει μια κατάλληλη ειδοποίηση ανάλογα με το μέγεθος του αρχείου.
Ορισμός της συνάρτησης sizeValidation() JavaScript
Τώρα ας γράψουμε τον κώδικα JavaScript που ορίζει το sizeValidation() λειτουργία.
< γραφή >
λειτουργία επικύρωση μεγέθους ( ) {
var input = document.getElementById ( 'αρχείο' ) ;
ήταν αρχείο = input.files;
αν ( file.length== 0 ) {
συναγερμός ( 'Δεν έχει επιλεγεί αρχείο' ) ;
ΕΠΙΣΤΡΟΦΗ ψευδής ;
}
var fileSize = Math.round ( ( αρχείο [ 0 ] .Μέγεθος / 1024 ) ) ;
αν ( μέγεθος αρχείου < = 5 * 1024 ) {
συναγερμός ( 'Μεταφορτώθηκε' ) ;
} αλλού {
συναγερμός (
'Σφάλμα! Το αρχείο είναι πολύ μεγάλο' ) ;
}
}
γραφή >
Κατανόηση του Κώδικα:
Μέσα στο σώμα του sizeValidation() συνάρτηση παίρνουμε πρώτα την ετικέτα και μετά χρησιμοποιούμε την var file = inputElement.files; γραμμή ώστε να έχουμε πρόσβαση στο αρχείο που ανεβάζουμε. Στη συνέχεια ελέγχουμε αν έχει ανέβει ένα αρχείο, εάν όχι, θα εμφανιστεί ένα μήνυμα σφάλματος και θα βγούμε από τη λειτουργία επιστρέφοντας το false.
Στη συνέχεια χρησιμοποιούμε κάποια μαθηματικά για να προσδιορίσουμε το μέγεθος του αρχείου. Εάν το αρχείο είναι κατάλληλου μεγέθους, δηλαδή 5 MB (σε αυτήν την περίπτωση), μεταφορτώνεται.
Διαφορετικά, εμφανίζεται ένα αναδυόμενο παράθυρο που περιέχει ένα μήνυμα σφάλματος.
συμπέρασμα
Παρόλο που η επικύρωση από την πλευρά του πελάτη είναι πολύ πιο αποτελεσματική, εξακολουθεί να μην υποκαθιστά την επικύρωση από την πλευρά του διακομιστή και μπορεί να παρακαμφθεί στις περισσότερες περιπτώσεις. Είναι πάντα μια βέλτιστη πρακτική να εφαρμόζετε επικύρωση τόσο από τον διακομιστή όσο και από την πλευρά του πελάτη, ώστε να μπορείτε να διασφαλίσετε τόσο την αποτελεσματικότητα όσο και την ακρίβεια της αίτησής σας.