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

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

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

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

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

instagram viewer

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

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

Τρόπος επικύρωσης φορμών στο Next.js

Υπάρχουν δύο τρόποι επικύρωσης φορμών στο Next.js: χρησιμοποιώντας τις ενσωματωμένες μεθόδους ή χρησιμοποιώντας εξωτερικές βιβλιοθήκες.

Χρησιμοποιώντας τις ενσωματωμένες μεθόδους

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

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

εισαγωγή Αντιδρώ από 'αντιδρώ'
τάξηMyFormεκτείνεταιΑντιδρώ.Συστατικό{
 render() {
ΕΠΙΣΤΡΟΦΗ (
<μορφή >
<επιγραφή>
 Ονομα:
<τύπος εισόδου="κείμενο" όνομα="όνομα" απαιτείται />
</label>
<επιγραφή>
 ΗΛΕΚΤΡΟΝΙΚΗ ΔΙΕΥΘΥΝΣΗ:
<τύπος εισόδου="ΗΛΕΚΤΡΟΝΙΚΗ ΔΙΕΥΘΥΝΣΗ" όνομα="ΗΛΕΚΤΡΟΝΙΚΗ ΔΙΕΥΘΥΝΣΗ"
 μοτίβο="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$" />
</label>
<τύπος εισόδου="υποβάλλουν" αξία="υποβάλλουν" />
</form>
 )
 }
}
εξαγωγήΠροκαθορισμένο MyForm

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

Το πρώτο στοιχείο ετικέτας περιέχει ένα απαιτούμενο πεδίο εισαγωγής κειμένου. Το δεύτερο στοιχείο ετικέτας περιέχει ένα πεδίο εισαγωγής email με μια τυπική έκφραση στο χαρακτηριστικό του μοτίβο.

Τέλος, έχετε ένα κουμπί υποβολής. Όταν ένας χρήστης υποβάλλει τη φόρμα, το απαιτούμενο χαρακτηριστικό διασφαλίζει ότι συμπλήρωσε το πεδίο ονόματος. Το χαρακτηριστικό μοτίβο του πεδίου email διασφαλίζει ότι το email είναι στην καθορισμένη μορφή. Εάν κάποια από αυτές τις προϋποθέσεις αποτύχει, η φόρμα δεν θα υποβληθεί.

Υπάρχουν μερικά μειονεκτήματα στη χρήση των ενσωματωμένων μεθόδων. Πρώτον, μπορεί να είναι δύσκολο να παρακολουθείτε όλους τους διαφορετικούς κανόνες επικύρωσης που έχετε ορίσει. Δεύτερον, εάν έχετε πολλά πεδία, μπορεί να είναι κουραστικό να προσθέσετε το απαιτούμενο χαρακτηριστικό σε καθένα. Τέλος, οι ενσωματωμένες μέθοδοι παρέχουν μόνο βασική επικύρωση. Εάν θέλετε να κάνετε πιο περίπλοκη επικύρωση, θα χρειαστεί να χρησιμοποιήσετε μια εξωτερική βιβλιοθήκη.

Χρήση εξωτερικής βιβλιοθήκης

Εκτός από τις ενσωματωμένες μεθόδους, υπάρχουν επίσης πολλές εξωτερικές βιβλιοθήκες που μπορείτε να χρησιμοποιήσετε για την επικύρωση φορμών. Μερικές δημοφιλείς βιβλιοθήκες περιλαμβάνουν τις Formik, react-hook-form και Yup.

Για να χρησιμοποιήσετε μια εξωτερική βιβλιοθήκη, θα πρέπει πρώτα να την εγκαταστήσετε. Για παράδειγμα, για να εγκαταστήσετε το Formik, εκτελέστε την ακόλουθη εντολή:

npm εγκαθιστώ φορμίκ

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

εισαγωγή Αντιδρώ από 'αντιδρώ'
εισαγωγή { Formik, Form, Field } από "φορμίκ"
συνθ MyForm = () => (
<Formik
 initialValues={{ name: '', ΗΛΕΚΤΡΟΝΙΚΗ ΔΙΕΥΘΥΝΣΗ: '' }}
 επικύρωση={τιμές => {
συνθ σφάλματα = {}
αν (!αξίες.όνομα) {
 σφάλματα.όνομα = 'Απαιτείται'
 }
αν (!αξίες.ΗΛΕΚΤΡΟΝΙΚΗ ΔΙΕΥΘΥΝΣΗ) {
 errors.email = 'Απαιτείται'
 } αλλούαν (
 !/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i.test (values.email)
 ) {
 errors.email = 'Μη έγκυρη διεύθυνση e-mail'
 }
ΕΠΙΣΤΡΟΦΗ Σφάλματα
 }}
 onSubmit={(τιμές, { setSubmitting }) => {
 setTimeout(() => {
 συναγερμός(JSON.stringify (αξίες, μηδενικό, 2))
 setSubmitting(ψευδής)
 }, 400)
 }}
>
 {({ is Submitting }) => (
<Μορφή>
<Τύπος πεδίου="κείμενο" όνομα="όνομα" />
<Τύπος πεδίου="ΗΛΕΚΤΡΟΝΙΚΗ ΔΙΕΥΘΥΝΣΗ" όνομα="ΗΛΕΚΤΡΟΝΙΚΗ ΔΙΕΥΘΥΝΣΗ" />
<τύπος κουμπιού="υποβάλλουν" disabled={isSubmitting}>
 υποβάλλουν
</button>
</Form>
 )}
</Formik>
)
εξαγωγήΠροκαθορισμένο MyForm

Εδώ, εισάγετε πρώτα το Formik, Μορφή, και Πεδίο στοιχεία από τη βιβλιοθήκη Formik. Στη συνέχεια, δημιουργήστε ένα στοιχείο που ονομάζεται MyForm. Αυτό το στοιχείο αποδίδει μια φόρμα που έχει δύο πεδία: όνομα και email.

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

Το prop validate ορίζει τους κανόνες επικύρωσης για τα πεδία φόρμας. Σε αυτήν την περίπτωση, απαιτείται το πεδίο ονόματος και το πεδίο email θα πρέπει να ταιριάζει με μια τυπική έκφραση.

Το prop onSubmit ορίζει τη συνάρτηση που θα καλέσει το React όταν ο χρήστης υποβάλει τη φόρμα. Σε αυτήν την περίπτωση, η συνάρτηση είναι μια ειδοποίηση που θα εμφανίζει τις τιμές των πεδίων της φόρμας.

Το prop isSubmitting καθορίζει εάν η φόρμα υποβάλλεται αυτήν τη στιγμή. Σε αυτήν την περίπτωση, το ορίζετε σε false.

Τέλος, αποδώστε τη φόρμα χρησιμοποιώντας το στοιχείο Form από το Formik.

Οφέλη από τη χρήση εξωτερικών βιβλιοθηκών στο Next.js

Υπάρχουν πολλά πλεονεκτήματα από τη χρήση μιας εξωτερικής βιβλιοθήκης όπως η Formik για την επικύρωση φορμών στο Next.js. Ένα πλεονέκτημα είναι ότι είναι πολύ πιο εύκολο να εμφανιστούν μηνύματα σφάλματος στον χρήστη. Για παράδειγμα, εάν δεν συμπληρωθεί ένα απαιτούμενο πεδίο, το Formik θα εμφανίσει αυτόματα ένα μήνυμα σφάλματος που περιλαμβάνει μια προτεινόμενη επιδιόρθωση.

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

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

Αυξήστε την αφοσίωση χρηστών χρησιμοποιώντας φόρμες

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

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

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