Εισαγωγή στην επαλήθευση περιορισμού HTML5

Οι διαδραστικές ιστοσελίδες και εφαρμογές δεν μπορούν να φανταστούν χωρίς μορφές που μας επιτρέπουν σύνδεση με τους χρήστες μας, και στο να αποκτήσουν τα δεδομένα χρειαζόμαστε για να εξασφαλίσουμε ομαλές συναλλαγές μαζί τους. Χρειαζόμαστε έγκυρη είσοδο χρήστη, Ωστόσο, πρέπει να το αποκτήσουμε με τέτοιο τρόπο δεν εμποδίζει χρήστες μας πάρα πολύ.

Παρόλο που μπορούμε να βελτιώσουμε τη χρηστικότητα των μορφών μας με έξυπνα επιλεγμένα μοτίβα σχεδίασης UX, το HTML5 διαθέτει επίσης έναν εγγενή μηχανισμό για επικύρωση περιορισμού που μας επιτρέπει να σφάλματα εισόδου αλιευμάτων δεξιά στο front-end.

Σε αυτή τη θέση, θα επικεντρωθούμε παρέχεται από τον περιηγητή επικύρωση, και εξετάστε πώς μπορούν οι προγραμματιστές των frontend ασφαλής έγκυρη εισαγωγή χρηστών χρησιμοποιώντας HTML5.

Γιατί χρειαζόμαστε επικύρωση εισόδου στο μπροστινό μέρος

Έλεγχος εισόδου έχει δύο κύριους στόχους. Το περιεχόμενο που λαμβάνουμε πρέπει να είναι:

1. Χρήσιμες

Χρειαζόμαστε χρησιμοποιήσιμα δεδομένα με τα οποία μπορούμε να συνεργαστούμε. Πρέπει να κάνουμε τους ανθρώπους να εισέλθουν ρεαλιστικά δεδομένα στη σωστή μορφή. Για παράδειγμα, κανείς που είναι ζωντανός σήμερα γεννήθηκε πριν από 200 χρόνια. Η απόκτηση δεδομένων όπως αυτό μπορεί να φαίνεται αρχικά αστείο, αλλά μακροπρόθεσμα είναι ενοχλητικό και γεμίζει τη βάση δεδομένων μας με άχρηστα δεδομένα.

2. Ασφαλίστε

Όταν αναφερόμαστε στην ασφάλεια, αυτό σημαίνει ότι πρέπει να το κάνουμε να αποτρέψετε την έγχυση κακόβουλου περιεχομένου - είτε σκόπιμα είτε τυχαία.

Η χρησιμότητα (λήψη εύλογων δεδομένων) μπορεί να επιτευχθεί μόνο στην πλευρά του πελάτη, η ομάδα υποστήριξης δεν μπορεί να βοηθήσει πάρα πολύ με αυτό. Για να επιτευχθεί ασφάλεια, οι προγραμματιστές μπροστά και πίσω πρέπει να συνεργαστούν.

Εάν οι προγραμματιστές frontend επικυρώνουν σωστά την είσοδο από την πλευρά του πελάτη, το η ομάδα υποστήριξης θα πρέπει να αντιμετωπίσει πολύ λιγότερες ευπάθειες. Hacking (μια τοποθεσία) συνεπάγεται συχνά υποβάλλοντας επιπλέον δεδομένα, ή δεδομένα σε λάθος μορφή. Οι προγραμματιστές μπορούν να πολεμήσουν τις τρύπες ασφαλείας όπως αυτές, να πολεμήσουν με επιτυχία από το front-end.

Για παράδειγμα, αυτός ο οδηγός ασφαλείας PHP συνιστά να ελέγξετε ό, τι μπορούμε από την πλευρά του πελάτη. Τονίζουν τη σημασία της επικύρωσης των εισερχόμενων συνόλων παρέχοντας πολλά παραδείγματα, όπως:

"Η επικύρωση εισόδου λειτουργεί καλύτερα με εξαιρετικά περιορισμένες τιμές, π.χ. όταν κάτι πρέπει να είναι ένας ακέραιος αριθμός ή αλφαριθμητική συμβολοσειρά ή μια διεύθυνση HTTP."

Στην επικύρωση εισόδου frontend, η δουλειά μας είναι να επιβάλλουν λογικούς περιορισμούς στην είσοδο του χρήστη. Το χαρακτηριστικό επικύρωσης του περιορισμού HTML5 μας παρέχει τα μέσα για να το κάνουμε αυτό.

Επικύρωση περιορισμού HTML5

Πριν από την HTML5, οι προγραμματιστές των frontend περιορίστηκαν σε επικύρωση της εισόδου του χρήστη με JavaScript, η οποία ήταν μια κουραστική και με σφάλματα διαδικασία. Για να βελτιωθεί η επικύρωση της φόρμας πελάτη, το HTML5 εισήγαγε ένα επαλήθευση περιορισμού αλγόριθμος που τρέχει σε σύγχρονα προγράμματα περιήγησης και ελέγχει την εγκυρότητα της υποβαλλόμενης εισόδου.

Για να γίνει η αξιολόγηση, ο αλγόριθμος χρησιμοποιεί το χαρακτηριστικά που σχετίζονται με την επικύρωση των στοιχείων εισόδου, όπως , </code>, και <code><select></code>. Αν θέλετε να μάθετε πώς συμβαίνει η επικύρωση των περιορισμών βήμα προς βήμα στο πρόγραμμα περιήγησης, δείτε αυτό το WhatWG doc.</p> <p>Χάρη στη δυνατότητα επικύρωσης του περιορισμού HTML5, μπορούμε να εκτελέσουμε όλα <strong>τυπικές εργασίες επικύρωσης εισόδου</strong> στην πλευρά του πελάτη <strong>χωρίς JavaScript, αποκλειστικά με HTML5</strong>.</p> <p>Για να εκτελέσετε πιο σύνθετες εργασίες που σχετίζονται με την επικύρωση, η HTML5 μας παρέχει ένα <strong>API JavaScript Validation Constraint</strong> μπορούμε να χρησιμοποιήσουμε για να ρυθμίσουμε τα προσαρμοσμένα σενάρια επικύρωσης.</p> <h4>Επικυρώστε με τους τύπους εισόδου</h4> <p>Το HTML5 έχει εισαγάγει <strong>σημασιολογικών τύπων εισόδου</strong> που - εκτός από την ένδειξη της έννοιας του στοιχείου για τους πράκτορες χρήστη - μπορεί επίσης να χρησιμοποιηθεί για <strong>επικυρώστε την είσοδο του χρήστη</strong> περιορίζοντας τους χρήστες σε μια συγκεκριμένη μορφή εισόδου.</p> <p>Εκτός από τους τύπους εισόδου που υπήρχαν ήδη πριν από την HTML5 (<code>κείμενο</code>, <code>Κωδικός πρόσβασης</code>, <code>υποβάλλουν</code>, <code>επαναφορά</code>, <code>ραδιόφωνο</code>, <code>πλαίσιο ελέγχου</code>, <code>κουμπί</code>, <code>κεκρυμμένος</code>), μπορούμε επίσης να χρησιμοποιήσουμε τα παρακάτω <strong>σημασιολογικών τύπων εισόδου HTML5</strong>: <code>ΗΛΕΚΤΡΟΝΙΚΗ ΔΙΕΥΘΥΝΣΗ</code>,<code>τηλ</code>,<code>url</code>,<code>αριθμός</code>,<code>χρόνος</code>,<code>ημερομηνία</code>,<code>ημερομηνία ώρα</code>,<code>ημερομηνία-τοπική</code>, <code>μήνας</code>,<code>εβδομάδα</code>, <code>εύρος</code>, <code>Ψάξιμο</code>,<code>χρώμα</code>.</p> <p>Μπορούμε να χρησιμοποιήσουμε με ασφάλεια τους τύπους εισόδου HTML5 με παλαιότερα προγράμματα περιήγησης, καθώς θα συμπεριφερθούν ως <code><input type="text"></code> πεδίου σε προγράμματα περιήγησης που δεν τα υποστηρίζουν.</p> <p>Ας δούμε τι συμβαίνει όταν ο χρήστης εισάγει λάθος τύπο εισόδου. Ας υποθέσουμε ότι έχουμε δημιουργήσει ένα πεδίο εισαγωγής ηλεκτρονικού ταχυδρομείου με τον ακόλουθο κώδικα:</p> <pre name="code"> <form name="form" action="#" method="post"> <label for="youremail">Η διεύθυνση του ηλεκτρονικού σου ταχυδρομείου:</label> <input type="email" name="email"> <input type="submit" value="Submit"> </form> </pre> <p>Όταν ο χρήστης πληκτρολογεί μια συμβολοσειρά που δεν χρησιμοποιεί μια μορφή ηλεκτρονικού ταχυδρομείου, ο αλγόριθμος επικύρωσης περιορισμού <strong>δεν υποβάλλει το έντυπο</strong>, και <strong>επιστρέφει ένα μήνυμα σφάλματος</strong>:</p> <figure> <img src="//savtec.org/img/images_1/intro-into-html5-constraint-validation.jpg"></figure><p>Ο ίδιος κανόνας ισχύει και για άλλους τύπους εισόδου, για παράδειγμα για <code>type = "url"</code> οι χρήστες μπορούν να υποβάλουν μόνο μια είσοδο που ακολουθεί τη μορφή URL (ξεκινά με ένα πρωτόκολλο, όπως <code>http: //</code> ή <code>ftp: //</code>).</p> <p>Ορισμένοι τύποι εισόδου χρησιμοποιούν ένα σχέδιο που <strong>ούτε επιτρέπει στους χρήστες να εισάγουν λάθος μορφή εισόδου</strong>, για παράδειγμα <code>χρώμα</code> και <code>εύρος</code>.</p> <pre name="code"> <form name="form" action="#" method="post"> <label for="bgcol">Χρώμα του φόντου:</label> <input type="color" name="color"> <input type="submit" value="Submit"> </form> </pre> <p>Αν χρησιμοποιούμε το <code>χρώμα</code> τύπου εισόδου, ο χρήστης είναι υποχρεωμένος είτε να επιλέξει ένα χρώμα από τον επιλογέα χρωμάτων είτε να παραμείνει με το προεπιλεγμένο μαύρο. Το πεδίο εισαγωγής είναι <strong>περιορίζεται από το σχεδιασμό</strong>, συνεπώς δεν αφήνει μεγάλη πιθανότητα για σφάλμα χρήστη.</p> <figure> <img src="//savtec.org/img/images_1/intro-into-html5-constraint-validation_2.jpg"></figure><p>Όταν είναι σκόπιμο, αξίζει να εξετάσετε τη χρήση του <code><select></code> Ετικέτα HTML που λειτουργεί με παρόμοιο τρόπο με αυτούς τους τύπους εισαγωγής που περιορίζονται από το σχεδιασμό. επιτρέπει στους χρήστες να επιλέξουν από μια αναπτυσσόμενη λίστα.</p> <pre name="code"> <form name="form" action="#" method="post"> <label for="favfruit">Το αγαπημένο σας φρούτο:</label> <select name="fruit"> <option value="apple">μήλο</option> <option value="pear">Αχλάδι</option> <option value="orange">Πορτοκάλι</option> <option value="raspberry">Βατόμουρο</option> </select> <input type="submit" value="Submit"> </form> </pre> <figure> <img src="//savtec.org/img/images_1/intro-into-html5-constraint-validation_3.jpg"></figure><h4>Χρησιμοποιήστε τα Χαρακτηριστικά επικύρωσης του HTML5</h4> <p>Η χρήση σημασιολογικών τύπων εισαγωγής θέτει ορισμένους περιορισμούς σε ό, τι επιτρέπεται στους χρήστες να υποβάλλουν, αλλά σε πολλές περιπτώσεις θέλουμε να προχωρήσουμε λίγο περισσότερο. Αυτό συμβαίνει όταν το <strong>χαρακτηριστικά που σχετίζονται με την επικύρωση</strong> απο <code><input></code> ετικέτα μπορεί να μας βοηθήσει.</p> <p>Τα χαρακτηριστικά που σχετίζονται με την επικύρωση ανήκουν σε ορισμένους τύπους εισόδου (δεν μπορούν να χρησιμοποιηθούν <em>όλα</em> τύποι) στις οποίες επιβάλλουν περαιτέρω περιορισμούς.</p> <h5>1. <code>απαιτείται</code> για να έχετε μια έγκυρη εισαγωγή με όλα τα μέσα</h5> <p>ο <code>απαιτείται</code> χαρακτηριστικό είναι το πιο γνωστό χαρακτηριστικό επικύρωσης HTML. Είναι ένα <strong>boolean χαρακτηριστικό</strong> που σημαίνει αυτό <strong>δεν έχει καμία αξία</strong>, Απλά πρέπει απλά να το τοποθετήσουμε στο εσωτερικό του <code><input></code> ετικέτα αν θέλουμε να το χρησιμοποιήσουμε:</p> <pre name="code"> <input type="email" name="email" required> </pre> <p>Εάν ο χρήστης ξεχάσει να εισαγάγει μια τιμή σε ένα απαιτούμενο πεδίο εισαγωγής, το πρόγραμμα περιήγησης <strong>επιστρέφει ένα μήνυμα σφάλματος</strong> που τους προειδοποιεί να συμπληρώσουν το πεδίο, και αυτοί <strong>δεν μπορεί να υποβάλει το έντυπο</strong> μέχρι να παράσχουν έγκυρη είσοδο. Γι 'αυτό είναι σημαντικό πάντα <strong>επισημάνετε οπτικά</strong> υποχρεωτικά πεδία στους χρήστες.</p> <p>ο <code>απαιτείται</code> χαρακτηριστικό μπορεί να είναι <strong>που χρησιμοποιούνται μαζί με τους ακόλουθους τύπους εισόδου</strong>: <code>κείμενο</code>, <code>Ψάξιμο</code>, <code>url</code>, <code>τηλ</code>, <code>ΗΛΕΚΤΡΟΝΙΚΗ ΔΙΕΥΘΥΝΣΗ</code>, <code>Κωδικός πρόσβασης</code>, <code>ημερομηνία</code>, <code>ημερομηνία ώρα</code>, <code>ημερομηνία-τοπική</code>, <code>μήνας</code>, <code>εβδομάδα</code>,<code>χρόνος</code>, <code>αριθμός</code>, <code>πλαίσιο ελέγχου</code>, <code>ραδιόφωνο</code>, <code>αρχείο</code>, plus με το <code><textarea></code>και <code><select></code> Ετικέτες HTML.</p> <h5>2. <code>min</code>, <code>Μέγιστη</code> και <code>βήμα</code> για επικύρωση αριθμών</h5> <p>ο <code>min</code>, <code>Μέγιστη</code> και <code>βήμα</code> ιδιότητες που μας επιτρέπουν να <strong>θέσει περιορισμούς στα πεδία εισαγωγής αριθμών</strong>. Μπορούν να χρησιμοποιηθούν μαζί με το <code>εύρος</code>, <code>αριθμός</code>, <code>ημερομηνία</code>, <code>μήνας</code>, <code>εβδομάδα</code>, <code>ημερομηνία ώρα</code>, <code>ημερομηνία-τοπική</code>, και <code>χρόνος</code> τύπους εισόδου.</p> <p>ο <code>min</code> και <code>Μέγιστη</code> τα χαρακτηριστικά παρέχουν έναν πολύ εύκολο τρόπο <strong>αποκλείουν παράλογα δεδομένα</strong>. Για παράδειγμα, το παρακάτω παράδειγμα υποχρεώνει τους χρήστες να υποβάλουν μια ηλικία μεταξύ 18 και 120 ετών.</p> <pre name="code"> <form name="form" action="#" method="post"> <label for="yourage">Η ηλικία σου:</label> <input type="number" name="age" min="18" max="120"> <input type="submit" value="Submit"> </form> </pre> <p>Όταν ο αλγόριθμος επικύρωσης περιορισμού προσκρούει σε μια είσοδο χρήστη μικρότερη από την <code>min</code>, ή μεγαλύτερο από το <code>Μέγιστη</code> αξία, εμποδίζει την πρόσβαση στο backend και επιστρέφει ένα μήνυμα σφάλματος.</p> <figure> <img src="//savtec.org/img/images_1/intro-into-html5-constraint-validation_4.jpg"></figure><p>ο <code>βήμα</code> Χαρακτηριστικό <strong>καθορίζει ένα αριθμητικό διάστημα</strong> μεταξύ των νόμιμων τιμών ενός πεδίου αριθμητικής εισόδου. Για παράδειγμα, αν θέλουμε οι χρήστες να επιλέξουν μόνο από τα χρονικά διαστήματα, μπορούμε να προσθέσουμε το <code>βήμα = "4"</code> χαρακτηριστικό στο πεδίο. Στο παρακάτω παράδειγμα χρησιμοποίησα το <code>αριθμός</code> τύπου εισόδου, καθώς δεν υπάρχει <code>τύπος = "έτος"</code> σε HTML5.</p> <pre name="code"> <form name="form" action="#" method="post"> <label for="yourleapyear">Το αγαπημένο σας άλμα:</label> <input type="number" name="leapyear" min="1972" max="2016" step="4"> <input type="submit" value="Submit"> </form> </pre> <p>Με τους προκαθορισμένους περιορισμούς, οι χρήστες μπορούν να επιλέξουν μόνο από τα χρονικά διαστήματα μεταξύ 1972 και 2016 εάν χρησιμοποιούν το μικρό βέλος που έρχεται με το <code>αριθμός</code> τύπου εισόδου. Μπορούν επίσης να πληκτρολογήσουν μια τιμή μη αυτόματα στο πεδίο εισαγωγής, αλλά σε περίπτωση που δεν πληρούνται οι περιορισμοί, το πρόγραμμα περιήγησης θα επιστρέψει ένα μήνυμα σφάλματος.</p> <figure> <img src="//savtec.org/img/images_1/intro-into-html5-constraint-validation.gif"></figure><h5>3. <code>μέγιστο μήκος</code> για την επικύρωση μήκους κειμένου</h5> <p>ο <code>μέγιστο μήκος</code> χαρακτηριστικό καθιστά δυνατή την <strong>ορίστε ένα μέγιστο μήκος χαρακτήρων</strong> για πεδία εισαγωγής κειμένου. Μπορεί να χρησιμοποιηθεί μαζί με το <code>κείμενο</code>, <code>Ψάξιμο</code>, <code>url</code>, <code>τηλ</code>, <code>ΗΛΕΚΤΡΟΝΙΚΗ ΔΙΕΥΘΥΝΣΗ</code> και <code>Κωδικός πρόσβασης</code> τύποι εισόδου και με το <code><textarea></code> Ετικέτα HTML.</p> <p>ο <code>μέγιστο μήκος</code> χαρακτηριστικό μπορεί να είναι μια εξαιρετική λύση για πεδία τηλεφωνικού αριθμού που δεν μπορούν να έχουν περισσότερους από έναν ορισμένο αριθμό χαρακτήρων ή για φόρμες επαφών όπου δεν θέλουμε οι χρήστες να γράφουν περισσότερα από ένα ορισμένο μήκος.</p> <p>Το απόσπασμα κώδικα παρακάτω δείχνει ένα παράδειγμα για το τελευταίο, περιορίζει τα μηνύματα χρήστη σε 500 χαρακτήρες. </p> <pre name="code"> <form name="form" action="#" method="post"> <label for="yourmsg">Μήνυμα (έως 500 χαρακτήρες):</label> <textarea name="msg" cols="25" rows="4" maxlength="500">

ο μέγιστο μήκος Χαρακτηριστικό δεν επιστρέφει μήνυμα σφάλματος, αλλά το πρόγραμμα περιήγησης απλά δεν επιτρέπει στους χρήστες να πληκτρολογούν περισσότερα από τον καθορισμένο αριθμό χαρακτήρων. Αυτός είναι ο λόγος για τον οποίο είναι ζωτικής σημασίας ενημερώστε τους χρήστες σχετικά με τον περιορισμό, διαφορετικά δεν θα καταλάβουν γιατί δεν μπορούν να συνεχίσουν με την πληκτρολόγηση.

 
 * Ο κωδικός σας: