Η επικύρωση είναι η διαδικασία που διασφαλίζει ότι τα δεδομένα είναι σωστά και πλήρη.
Σε ένα πραγματικό παράδειγμα, ας υποθέσουμε έναν ιστότοπο που απαιτεί τη συμπλήρωση μιας φόρμας εγγραφής προτού αποκτήσετε πλήρη πρόσβαση σε αυτόν τον ιστότοπο. Η σελίδα εγγραφής θα έχει πεδία εισαγωγής για όνομα χρήστη, κωδικό πρόσβασης, αναγνωριστικό email και ούτω καθεξής.
Όταν ο χρήστης υποβάλλει τη φόρμα, κανονικά θα πραγματοποιηθεί πρώτα επικύρωση πριν από την αποστολή των στοιχείων στο διακομιστή. Αυτή η επικύρωση θα προσπαθούσε να διασφαλίσει στον καλύτερο δυνατό βαθμό ότι οι λεπτομέρειες για τα πεδία εισαγωγής εισάγονται με τον σωστό τρόπο.
Για παράδειγμα, το αναγνωριστικό email πρέπει πάντα να είναι σε μορφή Αυτή η διεύθυνση ηλεκτρονικού ταχυδρομείου προστατεύεται από κακόβουλη χρήση. Χρειάζεται να ενεργοποιήσετε τη JavaScript για να τη δείτε. ; Εάν κάποιος εισαγάγει μόνο το όνομα χρήστη στο αναγνωριστικό email, τότε στην ιδανική περίπτωση η επικύρωση θα πρέπει να αποτύχει. Έτσι, η επικύρωση φαίνεται να κάνει αυτούς τους βασικούς ελέγχους πριν από την αποστολή των λεπτομερειών στον διακομιστή για περαιτέρω επεξεργασία.
Σε αυτό το σεμινάριο, θα μάθετε-
- Επικύρωση φόρμας χρησιμοποιώντας HTML5
- Επικύρωση φόρμας με $ kotor, $ έγκυρο, $ μη έγκυρο, $ παρθένο
- Επικύρωση φόρμας χρησιμοποιώντας το AngularJS Auto Validate
- Σχόλια χρηστών με κουμπιά Ladda
Επικύρωση φόρμας χρησιμοποιώντας HTML5
Η επικύρωση φόρμας είναι η διαδικασία προ-επικύρωσης πληροφοριών που έχουν εισαχθεί σε μια φόρμα ιστού από τον χρήστη πριν αποσταλούν στο διακομιστή. Είναι πάντα καλύτερο να επικυρώσετε τις πληροφορίες από την ίδια την πλευρά του πελάτη. Αυτό συμβαίνει επειδή προσθέτει λιγότερα γενικά έξοδα εάν ο χρήστης έπρεπε να εμφανιστεί ξανά με τη φόρμα εάν οι πληροφορίες που εισήχθησαν ήταν λανθασμένες.
Ας ρίξουμε μια ματιά στον τρόπο με τον οποίο μπορεί να γίνει επικύρωση φόρμας σε HTML5.
Στο παράδειγμά μας, θα δείξουμε μια απλή φόρμα εγγραφής στον χρήστη στην οποία ο χρήστης πρέπει να εισαγάγει λεπτομέρειες όπως όνομα χρήστη, κωδικό πρόσβασης, αναγνωριστικό email και ηλικία.
Η φόρμα θα έχει στοιχεία ελέγχου επικύρωσης για να διασφαλίσει ότι ο χρήστης εισάγει τις πληροφορίες με τον κατάλληλο τρόπο.
Event Registration Guru99 Global Event
Επεξήγηση κώδικα:
- Για τον τύπο εισαγωγής κειμένου, χρησιμοποιούμε το χαρακτηριστικό «απαιτείται». Αυτό σημαίνει ότι το πλαίσιο κειμένου δεν μπορεί να είναι κενό κατά την υποβολή της φόρμας και πρέπει να υπάρχει κάποιο είδος κειμένου στο πλαίσιο κειμένου.
- Ο επόμενος τύπος εισαγωγής είναι κωδικός πρόσβασης. Δεδομένου ότι ο τύπος εισαγωγής επισημαίνεται ως κωδικός πρόσβασης, όταν ο χρήστης εισάγει οποιοδήποτε κείμενο στο πεδίο, θα καλυφθεί.
- Επειδή ο τύπος εισαγωγής καθορίζεται ως email, το κείμενο στο πλαίσιο πρέπει να ταιριάζει με το μοτίβο Αυτή η διεύθυνση ηλεκτρονικού ταχυδρομείου προστατεύεται από κακόβουλη χρήση. Χρειάζεται να ενεργοποιήσετε τη JavaScript για να τη δείτε. .
- Όταν ο τύπος εισαγωγής επισημαίνεται ως αριθμός, εάν ένας χρήστης προσπαθήσει να εισαγάγει οποιοδήποτε χαρακτήρα χρησιμοποιώντας το πληκτρολόγιο ή το αλφάβητο, δεν θα εισαχθεί στο πλαίσιο κειμένου.
Εάν ο κωδικός εκτελεστεί με επιτυχία, η ακόλουθη έξοδος θα εμφανιστεί όταν εκτελείτε τον κωδικό σας στο πρόγραμμα περιήγησης.
Παραγωγή:
Για να δείτε την επικύρωση της φόρμας σε ενέργεια, κάντε κλικ στο κουμπί Υποβολή χωρίς να εισαγάγετε πληροφορίες στην οθόνη.
Αφού κάνετε κλικ στο κουμπί υποβολής, θα εμφανιστεί ένα αναδυόμενο παράθυρο που δείχνει ένα σφάλμα επικύρωσης ότι το πεδίο πρέπει να συμπληρωθεί.
Έτσι, η επικύρωση για το στοιχείο ελέγχου που επισημάνθηκε ως απαιτείται, προκαλεί την εμφάνιση του μηνύματος σφάλματος εάν ο χρήστης δεν εισάγει καμία τιμή στο πεδίο κειμένου.
Όταν ο χρήστης εισάγει οποιαδήποτε τιμή στο στοιχείο ελέγχου κωδικού πρόσβασης, θα παρατηρήσετε το σύμβολο '*' που χρησιμοποιείται για την κάλυψη των χαρακτήρων που εισάγονται.
Στη συνέχεια, εισαγάγετε λάθος αναγνωριστικό email και κάντε κλικ στο κουμπί υποβολής. Αφού κάνετε κλικ στο κουμπί υποβολής, θα εμφανιστεί ένα αναδυόμενο παράθυρο που δείχνει ένα σφάλμα επικύρωσης ότι το πεδίο πρέπει να έχει το σύμβολο @.
Επομένως, η επικύρωση του στοιχείου ελέγχου που επισημάνθηκε ως στοιχείο ελέγχου email θα προκαλέσει την εμφάνιση του μηνύματος σφάλματος εάν ο χρήστης δεν εισαγάγει ένα κατάλληλο αναγνωριστικό email στο πεδίο κειμένου.
Τέλος, όταν προσπαθείτε να εισαγάγετε χαρακτήρες στον έλεγχο κειμένου ηλικίας, δεν θα εισαχθεί στην οθόνη. Το στοιχείο ελέγχου θα συμπληρωθεί μόνο με μια τιμή όταν ένας αριθμός εισαχθεί στο στοιχείο ελέγχου.
Επικύρωση φόρμας με $ kotor, $ έγκυρο, $ μη έγκυρο, $ παρθένο
Το AngularJS παρέχει τις πρόσθετες ιδιότητές του για επικύρωση. Το AngularJS παρέχει τις ακόλουθες ιδιότητες για στοιχεία ελέγχου για σκοπούς επικύρωσης
- $ dirty - Ο χρήστης έχει αλληλεπιδράσει με το στοιχείο ελέγχου
- $ valid - Το περιεχόμενο του πεδίου είναι έγκυρο
- $ valid - Το περιεχόμενο του πεδίου δεν είναι έγκυρο
- $ pristine - Ο χρήστης δεν έχει ακόμη αλληλεπιδράσει με το στοιχείο ελέγχου
Ακολουθούν τα βήματα που πρέπει να ακολουθηθούν για τη διεξαγωγή γωνιακής επικύρωσης.
Βήμα 1) Χρησιμοποιήστε την ιδιότητα no validate κατά τη δήλωση της φόρμας. Αυτή η ιδιότητα λέει στο HTML5 ότι η επικύρωση θα γίνει από το AngularJS.
Βήμα 2) Βεβαιωθείτε ότι η φόρμα έχει ένα όνομα που ορίζεται για αυτό. Ο λόγος για αυτό είναι ότι, όταν πραγματοποιείται γωνιακή επικύρωση, θα χρησιμοποιείται το όνομα της φόρμας.
Βήμα 3) Βεβαιωθείτε ότι κάθε στοιχείο ελέγχου έχει επίσης ένα όνομα που ορίζεται για αυτό. Ο λόγος για αυτό είναι ότι, όταν πραγματοποιείται γωνιακή επικύρωση, θα χρησιμοποιείται το όνομα ελέγχου.
Βήμα 4) Χρησιμοποιήστε την οδηγία ng-show για να ελέγξετε τις ιδιότητες $ kotor, $ valid και $ valid για τα στοιχεία ελέγχου.
Ας δούμε ένα παράδειγμα, το οποίο ενσωματώνει τα παραπάνω βήματα.
Στο παράδειγμά μας,
Απλώς πρόκειται να έχουμε ένα απλό πεδίο κειμένου στο οποίο ο χρήστης πρέπει να εισαγάγει ένα όνομα θέματος στο πλαίσιο κειμένου. Εάν δεν γίνει αυτό, θα ενεργοποιηθεί ένα σφάλμα επικύρωσης και το μήνυμα σφάλματος θα εμφανιστεί στον χρήστη.
Event Registration Guru99 Global Event
Επεξήγηση κώδικα:
- Σημειώστε ότι έχουμε δώσει ένα όνομα για τη φόρμα που είναι "myForm". Αυτό απαιτείται κατά την πρόσβαση στα στοιχεία ελέγχου στη φόρμα για επικύρωση AngularJS.
- Χρησιμοποιώντας την ιδιότητα "novalidate" για να διασφαλιστεί ότι η φόρμα HTML επιτρέπει στο AngularJS να πραγματοποιήσει την επικύρωση.
- Χρησιμοποιούμε την οδηγία ng-show για να ελέγξουμε την ιδιότητα "$ dirty" και "$ valid". Αυτό σημαίνει ότι εάν το πλαίσιο κειμένου έχει τροποποιηθεί, τότε η τιμή ιδιότητας "$ dirty" θα ισχύει. Επίσης, στην περίπτωση που η τιμή του κειμένου είναι μηδενική, η ιδιότητα "$ valid" θα γίνει αληθινή. Έτσι, εάν και οι δύο ιδιότητες είναι αληθείς, τότε η επικύρωση θα αποτύχει για τον έλεγχο. Ως εκ τούτου, εάν και οι δύο τιμές είναι αληθείς, το ng-show θα γίνει επίσης αληθές και θα εμφανιστεί ο έλεγχος εύρους με τους χαρακτήρες κόκκινου χρώματος.
- Σε αυτό, ελέγχουμε την ιδιότητα "$ error", η οποία επίσης αξιολογείται ως true, επειδή έχουμε αναφέρει για τον έλεγχο ότι η τιμή πρέπει να εισαχθεί για το στοιχείο ελέγχου. Σε μια τέτοια περίπτωση, όπου δεν υπάρχουν δεδομένα που εισάγονται στο πλαίσιο κειμένου, το πλαίσιο ελέγχου θα εμφανίζει το κείμενο "Απαιτείται όνομα χρήστη".
- Εάν η τιμή ελέγχου του κειμένου δεν είναι έγκυρη, θέλουμε επίσης να απενεργοποιήσουμε το κουμπί υποβολής, ώστε ο χρήστης να μην μπορεί να υποβάλει τη φόρμα. Χρησιμοποιούμε την ιδιότητα "ng -abled" για τον έλεγχο για να το κάνουμε αυτό με βάση την τιμή υπό όρους της ιδιότητας "$ dirty" και "$ valid" του στοιχείου ελέγχου.
- Στον ελεγκτή, απλά ρυθμίζουμε την αρχική τιμή της τιμής του κειμένου στο κείμενο «AngularJS». Αυτό γίνεται μόνο για να ορίσετε κάποια προεπιλεγμένη τιμή στο πλαίσιο κειμένου κατά την πρώτη εμφάνιση της φόρμας. Δείχνει καλύτερα πώς γίνεται η επικύρωση για το πεδίο κειμένου.
Εάν ο κωδικός εκτελεστεί με επιτυχία, η ακόλουθη έξοδος θα εμφανιστεί όταν εκτελείτε τον κωδικό σας στο πρόγραμμα περιήγησης.
Παραγωγή:
Όταν η φόρμα εμφανίζεται αρχικά, το πλαίσιο κειμένου εμφανίζει την τιμή του "AngularJS" και το "κουμπί υποβολής" είναι ενεργοποιημένο. Μόλις αφαιρέσετε το κείμενο από το στοιχείο ελέγχου, ενεργοποιείται το μήνυμα σφάλματος επικύρωσης και το κουμπί Υποβολή απενεργοποιείται.
Το παραπάνω στιγμιότυπο οθόνης εμφανίζει δύο πράγματα
- Το κουμπί υποβολής είναι απενεργοποιημένο
- Δεν υπάρχει όνομα θέματος στο πλαίσιο κειμένου Θέματος. Ως εκ τούτου, ενεργοποιεί το μήνυμα σφάλματος "Απαιτείται όνομα χρήστη."
Επικύρωση φόρμας χρησιμοποιώντας το AngularJS Auto Validate
Υπάρχει δυνατότητα στο AngularJS να έχει επικυρώσει αυτόματα όλα τα στοιχεία ελέγχου σε μια φόρμα χωρίς να χρειάζεται να γράψει προσαρμοσμένο κώδικα για την επικύρωση. Αυτό μπορεί να γίνει συμπεριλαμβάνοντας μια προσαρμοσμένη λειτουργική μονάδα που ονομάζεται "jcs-AutoValidate."
Με αυτήν τη μονάδα στη θέση της, δεν χρειάζεται να τοποθετήσετε ειδικό κωδικό για να πραγματοποιήσετε την επικύρωση ή να εμφανίσετε τα μηνύματα σφάλματος. Όλα αυτά αντιμετωπίζονται από τον κωδικό μέσα στο JCS-AutoValidate.
Ας δούμε ένα απλό παράδειγμα πώς να το επιτύχουμε.
Σε αυτό το παράδειγμα,
Θα έχουμε απλώς μια απλή φόρμα με ένα πλαίσιο ελέγχου κειμένου που είναι υποχρεωτικό πεδίο. Θα πρέπει να εμφανίζεται ένα μήνυμα σφάλματος εάν αυτό το στοιχείο ελέγχου δεν έχει συμπληρωθεί.
Event Registration Guru99 Event
Επεξήγηση κώδικα:
- Αρχικά, πρέπει να συμπεριλάβουμε το σενάριο "jcs-auto-validate.js" που έχει όλες τις λειτουργίες αυτόματης επικύρωσης.
- Πρέπει να διασφαλίσουμε ότι κάθε στοιχείο συμπεριλαμβανομένης της "ετικέτας div" τοποθετείται σε μια κατηγορία "form-group".
- Επίσης, πρέπει να διασφαλίσετε ότι κάθε στοιχείο (το οποίο είναι ένα στοιχείο HTML όπως έλεγχος εισόδου, έλεγχος span, έλεγχος div και ούτω καθεξής) όπως τα στοιχεία ελέγχου εισόδου τοποθετούνται επίσης στην κατηγορία φόρμας-ομάδας.
- Συμπεριλάβετε το jcs-autovalidate στη μονάδα AngularJS JS.
Εάν ο κωδικός εκτελεστεί με επιτυχία, η ακόλουθη έξοδος θα εμφανιστεί όταν εκτελείτε τον κωδικό σας στο πρόγραμμα περιήγησης.
Παραγωγή:
Από προεπιλογή, όταν εκτελείτε τον κωδικό σας, η παραπάνω φόρμα θα εμφανίζεται σύμφωνα με τον κώδικα HTML.
Εάν προσπαθήσετε να υποβάλετε τη φόρμα, θα εμφανιστεί το μήνυμα σφάλματος που λέει "Αυτό το πεδίο είναι υποχρεωτικό." Όλα αυτά γίνονται με την επιλογή JCS-AutoValidate.
Σχόλια χρηστών με κουμπιά Ladda
Τα κουμπιά "ladda" είναι ένα ειδικό πλαίσιο που έχει δημιουργηθεί για κουμπιά πάνω από το JavaScript για να δίνει οπτικό εφέ στα κουμπιά όταν πατάται.
Αν λοιπόν δοθεί στο κουμπί ένα χαρακτηριστικό "ladda" και πατηθεί, θα εμφανιστεί ένα εφέ περιστροφής. Επίσης, υπάρχουν διαθέσιμα διαφορετικά στυλ δεδομένων για το κουμπί για την παροχή πρόσθετων οπτικών εφέ.
Ας δούμε ένα παράδειγμα, πώς να δούμε τα κουμπιά "ladda" σε δράση. Απλώς πρόκειται να δούμε μια απλή φόρμα με κουμπί υποβολής. Όταν πατηθεί το κουμπί, θα εμφανιστεί ένα εφέ περιστροφής στο κουμπί.
Event Registration Guru99 Event
Επεξήγηση κώδικα:
- Χρησιμοποιούμε την οδηγία "ng-submission" για να καλέσουμε μια συνάρτηση που ονομάζεται "submit". Αυτή η συνάρτηση θα χρησιμοποιηθεί για να αλλάξει το χαρακτηριστικό ladda του κουμπιού υποβολής.
- Το χαρακτηριστικό ladda είναι ένα ειδικό χαρακτηριστικό του πλαισίου ladda. Είναι αυτό το χαρακτηριστικό που προσθέτει το εφέ περιστροφής στον έλεγχο. Ρυθμίζουμε την τιμή του χαρακτηριστικού ladda στη μεταβλητή υποβολή.
- Η ιδιότητα τύπου δεδομένων είναι και πάλι ένα επιπλέον χαρακτηριστικό που προσφέρεται από το ladda framework, το οποίο προσθέτει μόνο ένα διαφορετικό οπτικό εφέ στο κουμπί υποβολής.
- Η ενότητα «AngularJS-ladda» πρέπει να προστεθεί στην εφαρμογή AngularJS.JS για να λειτουργήσει το πλαίσιο ladda.
- Αρχικά, ορίζουμε και καθορίζουμε την τιμή μιας μεταβλητής που ονομάζεται «submitting» σε false. Αυτή η τιμή ορίζεται για το χαρακτηριστικό ladda του κουμπιού υποβολής. Αρχικά ορίζοντας αυτό σε ψευδές λέμε ότι δεν θέλουμε το κουμπί υποβολής να έχει ακόμα το φαινόμενο της λάμδα.
- Δηλώνουμε μια συνάρτηση που καλείται όταν πατηθεί το κουμπί υποβολής. Σε αυτήν τη συνάρτηση, ρυθμίζουμε την «υποβολή» σε πραγματική. Αυτό θα προκαλέσει την εφαρμογή του φακού ladda στο κουμπί υποβολής.
Εάν ο κωδικός εκτελεστεί με επιτυχία, η ακόλουθη έξοδος θα εμφανιστεί όταν εκτελείτε τον κωδικό σας στο πρόγραμμα περιήγησης.
Παραγωγή:
Όταν η φόρμα εμφανίζεται αρχικά, το κουμπί υποβολής εμφανίζεται στην απλή του μορφή.
Όταν πατηθεί το κουμπί υποβολής, η μεταβλητή υποβολής στον ελεγκτή ορίζεται σε true. Αυτή η τιμή μεταβιβάζεται στο χαρακτηριστικό "ladda" του κουμπιού υποβολής που προκαλεί το αποτέλεσμα περιστροφής του κουμπιού.
Περίληψη
- Η επικύρωση για τα στοιχεία ελέγχου HTML του κειμένου μπορεί να γίνει χρησιμοποιώντας το χαρακτηριστικό «απαιτείται»
- Στο HTML5, προστίθενται νέα στοιχεία ελέγχου όπως κωδικός πρόσβασης, email και αριθμός που παρέχουν το δικό τους σύνολο επικυρώσεων.
- Η επικύρωση της φόρμας στο AngularJS λαμβάνεται υπόψη εξετάζοντας τις $ βρώμικες, $ έγκυρες, $ μη έγκυρες και $ παρθένες τιμές ενός στοιχείου ελέγχου φόρμας.
- Η αυτόματη επικύρωση σε εφαρμογές AngularJS μπορεί επίσης να επιτευχθεί χρησιμοποιώντας τη μονάδα αυτόματης επικύρωσης JCS.
- Τα κουμπιά Ladda μπορούν να προστεθούν σε μια εφαρμογή Angular.js για να δώσει λίγο βελτιωμένη οπτική αίσθηση στον χρήστη όταν πατηθεί το κουμπί.