Εντυπωσιάστε τους Επισκέπτες σας στο Web με επικύρωση φόρμας σε πραγματικό χρόνο

online φόρμα

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

Ο κανόνας μου είναι ότι υποστηρίζεται οτιδήποτε δεν επικυρώνεται. Οτιδήποτε μπορεί να επικυρωθεί πριν από την υποβολή της φόρμας πρέπει να είναι. Με την έλευση του Ajax, μπορείτε ακόμη και να επικυρώσετε δεδομένα στη βάση δεδομένων σας πριν από την υποβολή. Μην επιλέξετε την τεμπέλης διαδρομή - οι χρήστες εκτιμούν τη βοήθεια!

Εδώ είναι μερικά παραδείγματα:

  1. Διευθύνσεις e-mail - Δεν με πειράζει φόρμες που σας κάνουν να συμπληρώσετε τη διεύθυνση email σας δύο φορές για να τα επικυρώσετε, αλλά το γεγονός ότι δεν σας λένε αν ταιριάζουν ή κατασκευάζονται κατάλληλα είναι απαράδεκτο.
  2. Κωδικοί πρόσβασης - Εάν πρόκειται να με κάνει να πληκτρολογήσω έναν κωδικό πρόσβασης δύο φορές, επιβεβαιώστε ότι οι τιμές είναι ίδιες πριν δημοσιεύσετε τη φόρμα.
  3. Ισχύς Κωδικού Πρόσβασης - Εάν χρειάζεστε μια συγκεκριμένη ισχύ κωδικού πρόσβασης (συνδυασμός αλφαριθμητικών χαρακτήρων ή πεζών), τότε δώστε μου κάποια σχόλια ενώ πληκτρολογώ τον κωδικό πρόσβασής μου. Μην περιμένετε να υποβάλω πριν μου πείτε ότι απέτυχε.
  4. Ημερομηνίες - Εάν θέλετε την ημερομηνία σε μορφή am / d / yyyy, τότε επιτρέψτε μου να καταχωρίσω τις πληροφορίες σε ένα μόνο πεδίο πληκτρολογώντας αυτές τις τιμές και μορφοποιώντας τις κατάλληλα. Αν θέλετε μηδενικά, τοποθετήστε τα μετά. Είναι εντάξει η εμφάνιση μιας μορφής και η αποθήκευση άλλης στη βάση δεδομένων σας.
  5. Η σημερινή ημερομηνία - Συμπληρώστε το για μένα! Γιατί μου ζητάτε να συμπληρώσω την ημερομηνία που το γνωρίζετε ήδη ;!
  6. Μορφή ημερομηνίας - Εάν έχετε μια διεθνή εφαρμογή, μπορείτε να προεπιλέξετε μια μορφή ημερομηνίας βάσει της Διεθνοποίησης της εφαρμογής σας. Φυσικά, είναι καλό να έχουμε μια επιλογή για τους χρήστες να παρακάμψουν αυτήν την επιλογή και να επιλέξουν τη δική τους.
  7. Αριθμοί κοινωνικής ασφάλισης - είναι πολύ απλό να προσθέσετε κάποια javascript που μετακινείται αυτόματα από πεδίο σε πεδίο ή βάζει μια παύλα μεταξύ των τιμών.
  8. Αριθμοί τηλεφώνου - Λαμβάνοντας υπόψη τη διεθνοποίηση, αυτά τα είδη πεδίων μπορούν επίσης να απλοποιηθούν μορφοποιώντας τον αριθμό τηλεφώνου στη διεπαφή, αλλά αποθηκεύοντάς τον σε άλλη μορφή που είναι αποτελεσματική για το back-end σας. Μην κάνετε τους χρήστες σας να πληκτρολογούν σε παρένθεση, κενά και παύλες.
  9. Μέγιστο μήκος κειμένου - εάν περιορίσετε τον αριθμό των χαρακτήρων που είναι αποθηκευμένοι στη βάση δεδομένων σας, ΜΗΝ επιτρέπετε να πληκτρολογήσω πολλούς χαρακτήρες! Δεν απαιτεί καν δύσκολη επικύρωση ... είναι απλώς μια ρύθμιση στο πλαίσιο κειμένου.
  10. Ελάχιστο μήκος κειμένου - εάν χρειάζεστε ένα ελάχιστο μήκος κειμένου, ακούστε το ξυπνητήρι έως ότου έχω αρκετούς χαρακτήρες.

Ακολουθεί ένα παράδειγμα της συνάρτησης Δύναμη κωδικού πρόσβασης από Geek Wisdom:

Πληκτρολογήστε τον κωδικό πρόσβασης:

ΕΝΗΜΕΡΩΣΗ: 10/26/2007 - Βρήκα έναν τακτοποιημένο πόρο με μια βιβλιοθήκη JavaScript διαθέσιμη για λήψη επικύρωση φόρμας, που ονομάζεται LiveValidation.

16 Σχόλια

  1. 1

    Συμφωνώ ότι αυτά είναι υπέροχα χαρακτηριστικά για φόρμες, αλλά λέγοντας ότι είναι «αδικαιολόγητο» να μην εκτελείτε επικύρωση javascript front-end είναι κάτι περισσότερο από προσωπική άποψη. Μου αρέσει να εργάζομαι σε javascript, και έχω γράψει μερικές αρκετά τακτοποιημένες μάσκες για να κάνω μερικά από τα πράγματα για τα οποία μιλάς, αλλά πολλά από αυτά δεν είναι καθόλου ασήμαντα και πολλά από τα πακέτα επικύρωσης φόρμας javascript εκεί έξω έχουν μια σειρά από μεγάλες τρύπες. Όχι ο καθένας θα επενδύσει το χρόνο για να αντιγράψει την επικύρωσή τους με (πιο συχνά από ό, τι όχι) πιο περίπλοκη επικύρωση javascript front end.

    Καλά σημεία, αλλά σίγουρα δεν είναι κάτι που χρειάζεται κάθε διαδικτυακή φόρμα κατά τη γνώμη μου.

  2. 2

    Ο έλεγχος κωδικού πρόσβασης έχει σπάσει σχετικώς. Οποιοσδήποτε κωδικός πρόσβασης είναι αρκετά καλός αν είναι μεγάλος.

    Παράδειγμα:

    Είναι πραγματικά ένας μέτριος κωδικός πρόσβασης;

    f46dffe6ff4ffgdfgfjfgyu656hfdt74tyhdtu5674yfgh6uhhye45herdhrt64684hythdfth54y54348fgdcvzse8cn984v3p4m6vq98476m3wuw89ewfucsd8fg67s4v8tw76u340m6tver7nt+s89346vs+0em9u+s+09hrtuhss586ysvne4896vb4865tbv089rt++

  3. 4

    Για μένα η καλύτερη επικύρωση φόρμας είναι όταν δίνεις στον χρήστη την εντύπωση επικύρωσης από πλευράς πελάτη, ενώ είναι επικύρωση από πλευράς AJAX / Server.
    Πρέπει απλώς να επισυνάψετε στα στοιχεία της φόρμας σας κάποιο χειρισμό συμβάντων (keyup, blur, click κ.λπ.) που δημοσιεύουν ολόκληρη τη φόρμα μέσω AJAX στον διακομιστή, επικαλούμενη μια λειτουργία "ελέγχου" που επιστρέφει τα αντίστοιχα μηνύματα σφάλματος (αυτή η κάρτα είναι πάρα πολύ απλή, η ημερομηνία είναι σε λάθος μορφή, κλπ…)
    Όταν ο χρήστης δημοσιεύσει επιτέλους τη φόρμα κάνοντας κλικ στο κουμπί υποβολής, μπορείτε ακόμα να χρησιμοποιήσετε τη λειτουργία "έλεγχος" από τον διακομιστή για να επικυρώσετε την τελευταία φορά τη φόρμα πριν εισαγάγετε τα δεδομένα σε μια βάση δεδομένων ή κάποια άλλη διαδικασία.
    Με αυτόν τον τρόπο, οι χρήστες είναι ικανοποιημένοι με την επικύρωση onthego ΚΑΙ οι προγραμματιστές είναι ικανοποιημένοι με την ανάπτυξη επικύρωσης μόνο από τον διακομιστή.

    • 5
      • 6

        Όχι τόσο γρήγορα Doug - Συμφωνώ με την αρχική σας υπόθεση ότι αυτές οι χρήσιμες λειτουργίες, όπως η διαμόρφωση SSN εν κινήσει, είναι ασήμαντες. Και είναι τεμπέλης να δημοσιεύσετε μόνο ένα μήνυμα ότι είναι λάθος, όταν μπορείτε να το διορθώσετε χωρίς να χρειάζεται να μαντέψετε τη μορφή.

        Ωστόσο, συμφωνώ επίσης με τον Nicolas σχετικά με τη χρήση της λογικής του Server Side σε συνδυασμό με το AJAX.

  4. 7

    Ο τίτλος σας λέει "Εντυπωσιάστε τους φίλους σας ..." αλλά δεν με εντυπωσιάζετε με αυτό το 2 λεπτό, τηλεφωνήθηκε μετά.

    Ξαναγράψτε τον τίτλο σας (πολύ παραπλανητικός, κάνει κάποιος να σκεφτεί ότι υπάρχουν παραδείγματα και πρακτικές που συζητούνται).

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

    Οι πραγματικοί προγραμματιστές Ιστού το γνωρίζουν ήδη και το κάνουν.

    • 8

      Κίσσα,

      Συγνώμη για αυτό! Το θέμα μου ήταν σίγουρα να μην δώσω σχόλια για προγραμματιστές - πραγματικά προερχόμουν από την άποψη ενός Διαχειριστή προϊόντων. Συμφωνώ μαζί σας - αλλά είναι ενδιαφέρον που ορισμένοι άλλοι προγραμματιστές δεν το κάνουν! Νομίζω ότι αυτό είναι ατυχές.

      Ευχαριστούμε που αφιερώσατε χρόνο!
      Doug

  5. 9

    Συμφωνώ απόλυτα ότι η επικύρωση είναι απαραίτητο συστατικό κάθε εφαρμογής. Ως επικεφαλής της ομάδας, συνήθως βρίσκω τον εαυτό μου να στέλνει κωδικό για να «τελειώσει» για λόγους όπως λείπουν επικυρώσεις ή περιορισμός της διάρκειας εισαγωγής κειμένου.

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

    Έγραψα μια ανάρτηση σχετικά με τον τρόπο που χρησιμοποιώ το InputVerifiers στις εφαρμογές μου hava swing και έδειξα πώς επαληθεύω ένα πεδίο κειμένου email. Η κανονική έκφραση που χρησιμοποιώ είναι εύκολα τροποποιήσιμη για την επικύρωση αριθμών τηλεφώνου, ταχυδρομικών κωδικών, SSN κ.λπ.

    Η ανάρτηση ιστολογίου μου είναι στις http://timarcher.com/?q=node/36

    Καλή συγγραφή Doug!

  6. 10

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

  7. 11

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

    Δώσατε ένα λαμπρό παράδειγμα για το πώς η επικύρωση μπορεί να παραπλανήσει τους χρήστες και, χειρότερα, να τους απομακρύνει από τον ιστότοπό μας:

    Επικύρωση ισχύος κωδικού πρόσβασης του Geek Wisdom από θεωρεί tZhKwnUmIs να είναι ένας αδύναμος κωδικός πρόσβασης. Όχι μόνο αυτός είναι ένας απόλυτα ισχυρός κωδικός πρόσβασης, αλλά θα αποξενώσει τους χρήστες, καθώς τους δίνει την ψευδή εντύπωση ότι η είσοδος στον ιστότοπό σας χρησιμοποιώντας αυτόν τον κωδικό πρόσβασης θα είναι κάπως ανασφαλής.

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

    Άλλες αμφισβητήσιμες επικυρώσεις περιλαμβάνουν ονόματα χρηστών που χρειάζονται ένα ορισμένο ελάχιστο μήκος ή ενδέχεται να μην περιέχουν κενά. Τι συμβαίνει με τα ονόματα χρήστη X, John Doe, ή ακόμη και # *! §; Μπορώ να το χειριστώ.

  8. 12

    Συμφωνώ μαζί σου. Ορισμένες μορφές φαίνονται ωραίες, αλλά δεν προσφέρει καλή επικύρωση. Δίδονται προσωπικές πληροφορίες και είναι σωστό να τις λαμβάνουμε σοβαρά υπόψη όπως κάθε έντυπη μορφή σε έντυπη μορφή.

  9. 13
  10. 14
  11. 15

    Θεωρώ λίγο διασκεδαστικό ότι δημοσιεύετε σχετικά με την καλοσύνη για την επικύρωση φόρμας σε πραγματικό χρόνο και όμως, η φόρμα σχολίων σας στο κάτω μέρος της ανάρτησης δεν παρέχει κανένα από αυτά…

    Συνειδητοποιώ ότι χρησιμοποιείτε το WordPress για να δημοσιεύσετε τις σκέψεις σας στο Διαδίκτυο, αλλά ίσως να διασφαλίσετε ότι δεν ασκείτε και αυτό που κηρύττετε τόσο κακή ιδέα. 🙂

    Παρεμπιπτόντως, καλή ανάρτηση, ακόμα κι αν δεν συμφωνώ απαραίτητα με όλα όσα έχετε γράψει.

    • 16

      Ντο! Με χτύπησες, Αμάντα! Εύχομαι να είχα χρόνο να κάνω καλύτερη επικύρωση φόρμας και να την ενσωματώσω στο WordPress. Μου αρέσει ιδιαίτερα το Adobe Spry πλαίσιο επικύρωσης και θα ήθελα πολύ να δω κάποιον να ενσωματώνει τα δύο!

      Ευχαριστώ! (Και εκτιμώ πάντα ότι υπάρχουν πολλές απόψεις για οποιοδήποτε θέμα).
      Doug

Ποια είναι η γνώμη σας;

Αυτός ο ιστότοπος χρησιμοποιεί το Akismet για να μειώσει το spam. Μάθετε πώς επεξεργάζονται τα δεδομένα των σχολίων σας.