Πώς να εφαρμόσετε την επικύρωση φόρμας σε γωνιακό JS;

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

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



Τι είναι η επικύρωση φόρμας;

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



validation-in-angular-jsΕάν η κανονική έκφραση και η τιμή πεδίου είναι ίδια, μπορούμε να πούμε ότι η φόρμα μας έχει επικυρωθεί. Στη φόρμα HTML, υπάρχουν διαφορετικοί τύποι επικυρώσεων όπως email, απαιτούμενο, ελάχιστο, μέγιστο, κωδικός πρόσβασης κ.λπ.

παράδειγμα πλαισίου δοκιμής webdriver selenium

Έντυπο επικύρωσης σε γωνιακό JS

Ας μιλήσουμε για το πώς μπορούμε να επικυρώσουμε μια φόρμα σε γωνιακό JS. Το Angular JS παρέχει διάφορους τύπους ιδιοτήτων επικύρωσης φόρμας που μπορούμε να χρησιμοποιήσουμε για την επικύρωση της φόρμας ή τη λήψη των δεδομένων από τη φόρμα.



  • $ έγκυρο : Αυτή η ιδιότητα λέει εάν το πεδίο είναι έγκυρο ή όχι εφαρμόζοντας τον κατάλληλο κανόνα.

  • $ άκυρο : Όπως το όνομα λέει άκυρο, αυτό το πλακίδιο καιρικές συνθήκες το πεδίο δεν είναι έγκυρο ή δεν βασίζεται σε κατάλληλο κανόνα.

  • $ παρθένα : Θα επιστρέψει αληθές στο πεδίο εισαγωγής φόρμας δεν χρησιμοποιείται.



  • $ βρώμικο : Θα επιστρέψει αληθινό στο πεδίο εισαγωγής φόρμας χρησιμοποιείται.

  • $ άγγιξε : BooleanTrue εάν η είσοδος έχει θολωθεί.

Για πρόσβαση στη φόρμα: .

Για πρόσβαση σε μια είσοδο: ..

Τώρα ας εξηγήσουμε την επικύρωση φόρμας σε γωνιακό JS με ένα παράδειγμα, οπότε πρώτα δημιουργούμε δύο αρχεία, ένα είναι το app.js και ένα άλλο είναι το index.html. Το αρχείο index.htm περιέχει μια απλή φόρμα HTML που έχει την γωνιακή επικύρωση και το αρχείο app.js περιέχει τον κώδικα backend για τον χειρισμό της επικύρωσης φόρμας στη σελίδα index.html.

τι είναι η προμήθεια στη διαχείριση έργων

οindex.htmlφόρμα περιεχομένου σελίδας μεναβαλιδάτηιδιοκτησία και τι σημαίνει ακριβώς;

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

Βήματα στην επικύρωση της φόρμας

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

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

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

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

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

Κωδικός για επικύρωση φόρμας σε γωνιακό JS

index.html

Παράδειγμα γωνιακού πεδίου Όνομα 

Αυτό το αρχείο είναι υποχρεωτικό

Επίθετο

Αυτό το αρχείο είναι υποχρεωτικό

ΗΛΕΚΤΡΟΝΙΚΗ ΔΙΕΥΘΥΝΣΗ

Αυτό το αρχείο είναι υποχρεωτικό

Δεν είναι έγκυρο email

Τηλέφωνο

Αυτό το αρχείο είναι υποχρεωτικό

Αυτό δεν είναι έγκυρο τηλέφωνο

fibonacci σε c ++
Κωδικός πρόσβασης

Αυτό το αρχείο είναι υποχρεωτικό

Κωδικός πρόσβασης από 5 έως 8 χαρακτήρες

Μήνυμα

Αυτό το αρχείο είναι υποχρεωτικό

υποβάλλουν

app.js

var app = angular.module ('ngValidApp', []) app.controller ('ngValidController', function ($ εύρος) {})

Ας μιλήσουμε για κάποια οδηγία επικύρωσης που χρησιμοποιείται στη μορφή:

  • ng-απαιτείται : Για την παροχή του απαιτούμενου πεδίου
  • ng-εμφάνιση : Για να εμφανιστεί το μήνυμα σφάλματος με βάση την κατάσταση (ελέγξτε τις ιδιότητες επικύρωσης)
  • μικρού μήκους : Για την παροχή ελάχιστου μήκους
  • ng-maxlength : Για την παροχή του μέγιστου μήκους
  • του προτύπου : Για να ταιριάζει με ένα συγκεκριμένο μοτίβο
  • μοντέλο ng : Συνδέει το πεδίο με ιδιότητες επικύρωσης, όπως σφάλμα $, έγκυρο $ κ.λπ.

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

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

Έχετε μια ερώτηση για εμάς; Παρακαλώ αναφέρετέ το στην ενότητα σχολίων αυτού του άρθρου και θα επικοινωνήσουμε μαζί σας.