AngularJS Form Validation on Submit: Παράδειγμα εγγραφής
Επικύρωση φόρμας στο AngularJS
Επικύρωση φόρμας στο AngularJS είναι η διαδικασία διασφάλισης εάν τα δεδομένα που εισάγονται σε μια φόρμα είναι σωστά και πλήρη. Όταν ένας χρήστης υποβάλλει τη φόρμα, η επικύρωση πραγματοποιείται πρώτα πριν σταλούν τα στοιχεία στον διακομιστή. Η διαδικασία επικύρωσης διασφαλίζει στον καλύτερο δυνατό βαθμό ότι οι λεπτομέρειες για τα πεδία εισαγωγής εισάγονται με τον σωστό τρόπο.
Σε ένα πραγματικό παράδειγμα, ας υποθέσουμε ότι ένας ιστότοπος απαιτεί τη συμπλήρωση μιας φόρμας εγγραφής πριν αποκτήσετε πλήρη πρόσβαση σε αυτόν τον ιστότοπο. Η σελίδα εγγραφής θα έχει πεδία εισαγωγής για όνομα χρήστη, κωδικό πρόσβασης, αναγνωριστικό email και ούτω καθεξής.
Για παράδειγμα, το αναγνωριστικό email πρέπει πάντα να είναι σε μορφή username@site.domain; εάν κάποιος εισάγει μόνο το όνομα χρήστη στο αναγνωριστικό email, τότε ιδανικά η επικύρωση θα πρέπει να αποτύχει. Έτσι, η επικύρωση εξετάζει τη διενέργεια αυτών των βασικών ελέγχων πριν σταλούν οι λεπτομέρειες στον διακομιστή για περαιτέρω επεξεργασία.
Επικύρωση φόρμας με χρήση HTML5
Η επικύρωση φόρμας είναι η διαδικασία προεπικύρωσης των πληροφοριών που έχουν εισαχθεί σε μια φόρμα Ιστού από τον χρήστη πριν αποσταλούν στον διακομιστή. Είναι πάντα καλύτερο να επικυρώνετε τις πληροφορίες από την πλευρά του πελάτη. Αυτό συμβαίνει επειδή προσθέτει λιγότερα έξοδα εάν ο χρήστης έπρεπε να εμφανιστεί ξανά με τη φόρμα εάν οι πληροφορίες που εισήχθησαν ήταν λανθασμένες.
Ας ρίξουμε μια ματιά στον τρόπο με τον οποίο μπορεί να διεξαχθεί η επικύρωση φόρμας AngularJS σε HTML5.
Στο παράδειγμά μας, θα δείξουμε μια απλή φόρμα εγγραφής στον χρήστη στην οποία ο χρήστης πρέπει να εισαγάγει στοιχεία όπως όνομα χρήστη, κωδικό πρόσβασης, αναγνωριστικό email και ηλικία.
Η φόρμα θα διαθέτει στοιχεία ελέγχου επικύρωσης για να διασφαλιστεί ότι ο χρήστης εισάγει τις πληροφορίες με τον σωστό τρόπο.
<!DOCTYPE html> <html> <head> <meta chrset="UTF 8"> <title>Event Registration</title> </head> <body ng-app="sampleApp"> <script src="https://code.angularjs.org/1.6.9/angular-route.js"></script> <script src="https://code.angularjs.org/1.6.9/angular.min.js"></script> <script src="https://code.angularjs.org/1.6.9/angular.js"></script> <script src="lib/bootstrap.js"></script> <script src="lib/bootstrap.css"></script> <h1> Guru99 Global Event</h1> <div ng-controller="AngularController"> <form> Enter your user name: <input type="text" name="name" required><br><br> Enter your password: <input type="password"/><br><br> Enter your email: <input type="email"/><br><br> Enter your age: <input type="number" /><br><br> <input type="submit" value="Submit"/> </form> </div> </body> </html>
Επεξήγηση κώδικα
- Για τον τύπο εισαγωγής κειμένου, χρησιμοποιούμε το χαρακτηριστικό «απαιτείται». Αυτό σημαίνει ότι το πλαίσιο κειμένου δεν μπορεί να είναι κενό όταν υποβάλλεται η φόρμα και ότι κάποιο είδος κειμένου θα πρέπει να υπάρχει στο πλαίσιο κειμένου.
- Ο επόμενος τύπος εισαγωγής είναι ο κωδικός πρόσβασης. Δεδομένου ότι ο τύπος εισαγωγής επισημαίνεται ως κωδικός πρόσβασης, όταν ο χρήστης εισάγει οποιοδήποτε κείμενο στο πεδίο, θα καλύπτεται.
- Επειδή ο τύπος εισαγωγής καθορίζεται ως email, το κείμενο στο πλαίσιο πρέπει να ταιριάζει με το μοτίβο name@site.domain.
- Όταν ο τύπος εισαγωγής επισημαίνεται ως αριθμός, εάν ένας χρήστης προσπαθήσει να εισαγάγει οποιονδήποτε χαρακτήρα χρησιμοποιώντας το πληκτρολόγιο ή το αλφάβητο, δεν θα εισαχθεί στο πλαίσιο κειμένου.
Εάν ο κώδικας εκτελεστεί με επιτυχία, η ακόλουθη Έξοδος θα εμφανιστεί όταν εκτελείτε τον κώδικα στο πρόγραμμα περιήγησης για επικύρωση φόρμας AngularJS κατά την υποβολή.
Παραγωγή
Για να δείτε την επικύρωση της φόρμας σε δράση, κάντε κλικ στο κουμπί Υποβολή χωρίς να εισάγετε πληροφορίες στην οθόνη.
Αφού κάνετε κλικ στο κουμπί υποβολής, θα εμφανιστεί ένα αναδυόμενο παράθυρο που δείχνει ένα σφάλμα επικύρωσης ότι το πεδίο πρέπει να συμπληρωθεί.
Έτσι, η επικύρωση για το στοιχείο ελέγχου που επισημάνθηκε ως απαιτούμενο, προκαλεί την εμφάνιση του μηνύματος σφάλματος εάν ο χρήστης δεν εισάγει καμία τιμή στο πεδίο κειμένου.
Όταν ο χρήστης εισάγει οποιαδήποτε τιμή στο στοιχείο ελέγχου κωδικού πρόσβασης, θα παρατηρήσετε το σύμβολο '*' που χρησιμοποιείται για την κάλυψη των χαρακτήρων που εισάγονται.
Ας εισαγάγουμε στη συνέχεια λάθος id email και κάνουμε κλικ στο κουμπί υποβολή. Αφού κάνετε κλικ στο κουμπί υποβολής, θα εμφανιστεί ένα αναδυόμενο παράθυρο που δείχνει ένα σφάλμα επικύρωσης ότι το πεδίο πρέπει να έχει το σύμβολο @.
Έτσι, η επικύρωση για το στοιχείο ελέγχου που επισημάνθηκε ως στοιχείο ελέγχου email θα προκαλέσει την εμφάνιση του μηνύματος σφάλματος εάν ο χρήστης δεν εισαγάγει το σωστό αναγνωριστικό email στο πεδίο κειμένου.
Τέλος, όταν προσπαθείτε να εισαγάγετε κάποιους χαρακτήρες στο στοιχείο ελέγχου κειμένου ηλικίας, δεν θα εισαχθεί στην οθόνη. Το στοιχείο ελέγχου θα συμπληρωθεί με μια τιμή μόνο όταν εισαχθεί ένας αριθμός στο στοιχείο ελέγχου.
Επικύρωση φόρμας χρησιμοποιώντας $dirty, $valid, $invalid, $pristine
AngularJS παρέχει τις πρόσθετες ιδιότητές του για επικύρωση. Το AngularJS παρέχει τις ακόλουθες ιδιότητες για στοιχεία ελέγχου για σκοπούς επικύρωσης
- $βρώμικο – Ο χρήστης έχει αλληλεπιδράσει με το στοιχείο ελέγχου
- $έγκυρο – Το περιεχόμενο του πεδίου είναι έγκυρο
- $invalid – Το περιεχόμενο του πεδίου δεν είναι έγκυρο
- $παρθένα – Ο χρήστης δεν έχει αλληλεπιδράσει ακόμη με το στοιχείο ελέγχου
Ακολουθούν τα βήματα που πρέπει να ακολουθήσετε για να πραγματοποιηθεί η γωνιακή επικύρωση.
Βήμα 1) Χρησιμοποιήστε την ιδιότητα no validate κατά τη δήλωση της φόρμας. Αυτή η ιδιότητα λέει στην HTML5 ότι η επικύρωση θα γίνει από το AngularJS.
Βήμα 2) Βεβαιωθείτε ότι η φόρμα έχει οριστεί ένα όνομα για αυτήν. Ο λόγος για να γίνει αυτό είναι ότι, κατά την εκτέλεση της γωνιακής επικύρωσης, θα χρησιμοποιείται το όνομα της φόρμας.
Βήμα 3) Βεβαιωθείτε ότι κάθε στοιχείο ελέγχου έχει επίσης οριστεί ένα όνομα για αυτό. Ο λόγος για να γίνει αυτό είναι ότι, κατά την εκτέλεση της γωνιακής επικύρωσης, θα χρησιμοποιείται το όνομα ελέγχου.
Βήμα 4) Χρησιμοποιήστε το ng-show οδηγία για τον έλεγχο των ιδιοτήτων $dirty, $invalid και $valid για τα στοιχεία ελέγχου.
Ας δούμε ένα παράδειγμα, το οποίο ενσωματώνει τα προαναφερθέντα βήματα.
Στο παράδειγμά μας,
Θα έχουμε απλώς ένα απλό πεδίο κειμένου στο οποίο ο χρήστης πρέπει να εισάγει ένα όνομα θέματος στο πλαίσιο κειμένου. Εάν αυτό δεν γίνει, θα ενεργοποιηθεί ένα σφάλμα επικύρωσης και το μήνυμα σφάλματος θα εμφανιστεί στον χρήστη.
<!DOCTYPE html> <html> <head> <meta chrset="UTF 8"> <title>Event Registration</title> </head> <body> <script src="https://code.angularjs.org/1.6.9/angular-route.js"></script> <script src="https://code.angularjs.org/1.6.9/angular.min.js"></script> <script src="https://code.angularjs.org/1.6.9/angular.js"></script> <script src="lib/bootstrap.js"></script> <script src="lib/bootstrap.css"></script> <h1> Guru99 Global Event</h1> <form ng-app="DemoApp" ng-controller="DemoController" name="myForm" novalidate> <p>Topic Name:<br> <input type="text" name="user" ng-model="user" required> <span style="color:red" ng-show="myForm.user.$dirty && myForm.user.$invalid"> <span ng-show="myForm.user.$error.required">Username is required</span> </span> </p> <p> <input type="submit" ng-disabled="myForm.user.$dirty && myForm.user.$invalid"> </p> </form> <script> var app = angular.module("DemoApp",[]); app.controller("DemoController",function($scope) { $scope.Display = function () { $scope.user='Angular'; } }); </script> </body> </html>
Επεξήγηση κώδικα
- Σημειώστε ότι έχουμε δώσει ένα όνομα για τη Φόρμα που είναι "myForm". Αυτό απαιτείται κατά την πρόσβαση στα στοιχεία ελέγχου στη φόρμα για επικύρωση AngularJS.
- Χρησιμοποιώντας την ιδιότητα "novalidate" για τη διασφάλιση ότι η φόρμα HTML επιτρέπει στο AngularJS να πραγματοποιήσει την επικύρωση.
- Χρησιμοποιούμε την οδηγία ng-show για να ελέγξουμε για την ιδιότητα "$dirty" και "$invalid". Αυτό σημαίνει ότι εάν το πλαίσιο κειμένου έχει τροποποιηθεί, τότε η τιμή της ιδιότητας "$dirty" θα είναι αληθής. Επίσης, στην περίπτωση που η τιμή του πλαισίου κειμένου είναι μηδενική, η ιδιότητα "$invalid" θα γίνει αληθής. Έτσι, εάν και οι δύο ιδιότητες είναι αληθείς, τότε η επικύρωση θα αποτύχει για το στοιχείο ελέγχου. Επομένως, εάν και οι δύο τιμές είναι αληθείς, το ng-show θα γίνει επίσης αληθές και θα εμφανιστεί ο έλεγχος εμβέλειας με τους χαρακτήρες κόκκινου χρώματος.
- Σε αυτό, ελέγχουμε την ιδιότητα "$error" η οποία επίσης αξιολογείται ως true επειδή έχουμε αναφέρει για το στοιχείο ελέγχου ότι η τιμή πρέπει να εισαχθεί για το στοιχείο ελέγχου. Σε μια τέτοια περίπτωση, όπου δεν υπάρχουν δεδομένα που έχουν εισαχθεί στο πλαίσιο κειμένου, ο έλεγχος εμβέλειας θα εμφανίσει το κείμενο "Απαιτείται όνομα χρήστη".
- Εάν η τιμή ελέγχου πλαισίου κειμένου δεν είναι έγκυρη, θέλουμε επίσης να απενεργοποιήσουμε το κουμπί υποβολής έτσι ώστε ο χρήστης να μην μπορεί να υποβάλει τη φόρμα. Χρησιμοποιούμε την ιδιότητα "ng-disabled" για το στοιχείο ελέγχου για να το κάνουμε αυτό με βάση την υπό όρους τιμή της ιδιότητας "$dirty" και "$invalid" του στοιχείου ελέγχου.
- Στον ελεγκτή, απλώς ορίζουμε την αρχική τιμή της τιμής του πλαισίου κειμένου στο κείμενο 'AngularJS'. Αυτό γίνεται απλώς για να ορίσετε κάποια προεπιλεγμένη τιμή στο πλαίσιο κειμένου κατά την πρώτη εμφάνιση της φόρμας. Δείχνει καλύτερα τον τρόπο με τον οποίο γίνεται η επικύρωση για το πεδίο του πλαισίου κειμένου.
Εάν ο κώδικας εκτελεστεί με επιτυχία, θα εμφανιστεί η ακόλουθη έξοδος όταν εκτελείτε τον κώδικα στο πρόγραμμα περιήγησης.
Παραγωγή
Όταν η φόρμα εμφανίζεται αρχικά, το πλαίσιο κειμένου εμφανίζει την τιμή του "AngularJS" και το "κουμπί υποβολής" είναι ενεργοποιημένο. Μόλις αφαιρέσετε το κείμενο από το στοιχείο ελέγχου, το μήνυμα σφάλματος επικύρωσης είναι ενεργοποιημένο και το κουμπί Υποβολή απενεργοποιείται.
Το παραπάνω στιγμιότυπο οθόνης εμφανίζει δύο πράγματα
- Το κουμπί υποβολής είναι απενεργοποιημένο
- Δεν υπάρχει όνομα θέματος στο πλαίσιο κειμένου Θέμα. Ως εκ τούτου, ενεργοποιεί το μήνυμα σφάλματος "Το όνομα χρήστη απαιτείται".
Επικύρωση φόρμας χρησιμοποιώντας AngularJS Auto Validate
Υπάρχει μια δυνατότητα στο AngularJS να έχετε επικυρώσει αυτόματα όλα τα στοιχεία ελέγχου σε μια φόρμα χωρίς να χρειάζεται να γράψετε προσαρμοσμένο κώδικα για την επικύρωση. Αυτό μπορεί να γίνει συμπεριλαμβάνοντας μια προσαρμοσμένη λειτουργική μονάδα που ονομάζεται "jcs-AutoValidate".
Με αυτήν τη μονάδα στη θέση της, δεν χρειάζεται να τοποθετήσετε κάποιον ειδικό κωδικό για να πραγματοποιήσετε την επικύρωση ή να εμφανίσετε τα μηνύματα σφάλματος. Όλα αυτά αντιμετωπίζονται από τον κώδικα μέσα στο JCS-AutoValidate.
Ας δούμε ένα απλό παράδειγμα για το πώς να το πετύχετε αυτό.
Σε αυτό το παράδειγμα,
Θα έχουμε απλώς μια απλή φόρμα με ένα στοιχείο ελέγχου πλαισίου κειμένου που είναι υποχρεωτικό πεδίο. Εάν δεν συμπληρωθεί αυτό το στοιχείο ελέγχου, θα πρέπει να εμφανιστεί ένα μήνυμα σφάλματος.
<!DOCTYPE html> <html> <head> <meta chrset="UTF 8"> <title>Event Registration</title> </head> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script> <script src="https://code.angularjs.org/1.6.9/angular.js"></script> <script src="lib/jcs-auto-validate.min.js"></script> <body> <h1> Guru99 Event</h1> <div ng-app="DemoApp"> <div class="form-group"> <form name="myForm" novalidate> <p>Topic Name:<br></p> <div class="form-group"> <input class="form-control" type="text" id="user" ng-model="user" required="required"/> </div> <div> <div class="form-group"> <input type="submit"> </div> </div> </form> </div> </div> <script> var app=angular.module('DemoApp',['jcs-autoValidate']); </script> </body> </html>
Επεξήγηση κώδικα
- Αρχικά, πρέπει να συμπεριλάβουμε το σενάριο "jcs-auto-validate.js" το οποίο έχει όλες τις λειτουργίες αυτόματης επικύρωσης.
- Πρέπει να διασφαλίσουμε ότι κάθε στοιχείο συμπεριλαμβανομένης της "ετικέτας div" τοποθετείται σε μια κλάση "φόρμα-ομάδα".
- Πρέπει επίσης να βεβαιωθείτε ότι κάθε στοιχείο (το οποίο είναι ένα στοιχείο HTML, όπως έλεγχος εισόδου, έλεγχος έκτασης, έλεγχος div και ούτω καθεξής), όπως τα στοιχεία ελέγχου εισόδου τοποθετούνται επίσης στην κλάση ομάδας φόρμας.
- Συμπεριλάβετε το jcs-autovalidate στη λειτουργική μονάδα AngularJS JS.
Εάν ο κώδικας εκτελεστεί με επιτυχία, θα εμφανιστεί η ακόλουθη έξοδος όταν εκτελείτε τον κώδικα στο πρόγραμμα περιήγησης.
Παραγωγή
Από προεπιλογή, όταν εκτελείτε τον κώδικα σας, η παραπάνω φόρμα θα εμφανίζεται σύμφωνα με τον κώδικα HTML.
Εάν προσπαθήσετε να υποβάλετε τη φόρμα, θα εμφανιστεί το μήνυμα σφάλματος λέγοντας "Αυτό το πεδίο είναι υποχρεωτικό". Όλα αυτά γίνονται από την επιλογή JCS-AutoValidate.
Σχόλια χρηστών με κουμπιά Ladda
Τα κουμπιά "ladda" είναι ένα ειδικό πλαίσιο κατασκευασμένο για κουμπιά στο πάνω μέρος JavaΓραφή για να δώσει ένα οπτικό αποτέλεσμα στα κουμπιά όταν πιέζονται.
Έτσι, εάν σε ένα κουμπί δοθεί η ιδιότητα "ladda" και πατηθεί, θα εμφανιστεί ένα εφέ περιστροφής. Επίσης, υπάρχουν διαφορετικά στυλ δεδομένων διαθέσιμα για το κουμπί για την παροχή πρόσθετων οπτικών εφέ.
Ας δούμε ένα παράδειγμα για το πώς να δείτε τα κουμπιά "ladda" σε δράση. Θα δούμε απλώς μια απλή φόρμα που έχει ένα κουμπί υποβολής. Όταν πατηθεί το κουμπί, θα εμφανιστεί ένα εφέ περιστροφής στο κουμπί.
<!DOCTYPE html> <html> <head> <meta chrset="UTF 8"> <title>Event Registration</title> </head> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script> <script src="https://code.angularjs.org/1.6.9/angular.js"></script> <script src="lib/jcs-auto-validate.min.js"></script> <script src="lib/angular-ladda.js"></script> <script src="lib/angular-ladda.min.js"></script> <script src="lib/bootstrap.js"></script> <script src="lib/bootstrap.css"></script> <body> <h1> Guru99 Event</h1> <div ng-app="DemoApp" ng-controller="DemoController"> <div class="form-group"> <form name="myForm" novalidate ng-submit="submit()"> <div> <button class="btn btn-primary" type="submit" ladda="submitting" name="sbutton" data-style="expand-right">Submit</button> </div> </form> </div> </div> <script> var app=angular.module('DemoApp',['jcs-autoValidate','angular-ladda']); app.controller('DemoController',function($scope) { $scope.submitting = false; $scope.submit = function () { $scope.submitting = true; } }); </script> </body> </html>
Επεξήγηση κώδικα
- Χρησιμοποιούμε το «ng-υποβολή" οδηγία για να καλέσετε μια συνάρτηση που ονομάζεται "υποβολή". Αυτή η συνάρτηση θα χρησιμοποιηθεί για την αλλαγή του χαρακτηριστικού ladda του κουμπιού υποβολής.
- Το χαρακτηριστικό ladda είναι ένα ειδικό χαρακτηριστικό του πλαισίου ladda. Είναι αυτό το χαρακτηριστικό που προσθέτει το φαινόμενο spin στον έλεγχο. Ορίζουμε την τιμή του χαρακτηριστικού ladda στη μεταβλητή που υποβάλλει.
- Η ιδιότητα τύπου δεδομένων είναι και πάλι ένα πρόσθετο χαρακτηριστικό που προσφέρεται από το πλαίσιο ladda, το οποίο απλώς προσθέτει ένα διαφορετικό οπτικό εφέ στο κουμπί υποβολής.
- Η λειτουργική μονάδα 'AngularJS-ladda' πρέπει να προστεθεί στην εφαρμογή AngularJS.JS για να λειτουργήσει το πλαίσιο ladda.
- Αρχικά, ορίζουμε και ορίζουμε την τιμή μιας μεταβλητής που ονομάζεται 'submitting' σε false. Αυτή η τιμή ορίζεται για το χαρακτηριστικό ladda του κουμπιού υποβολή. Ρυθμίζοντας αρχικά αυτό σε false, λέμε ότι δεν θέλουμε το κουμπί υποβολής να έχει το εφέ ladda προς το παρόν.
- Δηλώνουμε μια συνάρτηση που καλείται όταν πατηθεί το κουμπί υποβολής. Σε αυτή τη συνάρτηση, ορίζουμε το 'submitting' σε true. Αυτό θα προκαλέσει την εφαρμογή του εφέ ladda στο κουμπί υποβολής.
Εάν ο κώδικας εκτελεστεί με επιτυχία, θα εμφανιστεί η ακόλουθη έξοδος όταν εκτελείτε τον κώδικα στο πρόγραμμα περιήγησης.
Παραγωγή
Όταν η φόρμα εμφανίζεται αρχικά, το κουμπί υποβολής εμφανίζεται στην απλή του μορφή.
Όταν πατηθεί το κουμπί υποβολής, η μεταβλητή υποβολής στον ελεγκτή ορίζεται σε true. Αυτή η τιμή μεταβιβάζεται στο χαρακτηριστικό "ladda" του κουμπιού υποβολής που προκαλεί το φαινόμενο περιστροφής του κουμπιού.
Σύνοψη
- Η επικύρωση για τα στοιχεία ελέγχου HTML του πλαισίου κειμένου μπορεί να γίνει χρησιμοποιώντας το χαρακτηριστικό "απαιτείται".
- Στην HTML5, προστέθηκαν νέα στοιχεία ελέγχου, όπως κωδικός πρόσβασης, email και αριθμός που παρέχουν το δικό τους σύνολο επικυρώσεων.
- Η επικύρωση φόρμας στο AngularJS πραγματοποιείται εξετάζοντας τις τιμές $dirty, $valid, $invalid και $pristine ενός στοιχείου ελέγχου φόρμας.
- Η αυτόματη επικύρωση σε εφαρμογές AngularJS μπορεί επίσης να επιτευχθεί χρησιμοποιώντας τη μονάδα JCS-auto validate.
- Τα κουμπιά Ladda μπορούν να προστεθούν σε μια εφαρμογή Angular.js για να δώσουν μια βελτιωμένη οπτική αίσθηση στον χρήστη όταν πατηθεί το κουμπί.