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

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

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

Αυτή ήταν μια μακρά διαδικασία και θα έβαζε πολύ βάρος στον διακομιστή.

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

Ακολουθεί ο κώδικας HTML που θα χρησιμοποιήσουμε στα ακόλουθα παραδείγματα:

  Form Validation  // Form validation will go here     
    
Username
Email Address

Βασική επικύρωση

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

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

const submitBtn = document.getElementById('submit-btn'); const validate = (e) => { e.preventDefault(); const username = document.getElementById('username'); const emailAddress = document.getElementById('email-address'); if (username.value === "") { alert("Please enter your username."); username.focus(); return false; } if (emailAddress.value === "") { alert("Please enter your email address."); emailAddress.focus(); return false; } return true; } submitBtn.addEventListener('click', validate); 

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

Εκεί έρχεται η επικύρωση μορφής δεδομένων.

Επικύρωση μορφής δεδομένων

Αυτός ο τύπος επικύρωσης εξετάζει πραγματικά τις τιμές στη φόρμα και επαληθεύει ότι είναι σωστές.

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

Ωστόσο, υπάρχουν μερικοί βασικοί παράγοντες που είναι κοινές σε όλες τις έγκυρες διευθύνσεις ηλεκτρονικού ταχυδρομείου:

  • Μια διεύθυνση πρέπει να περιέχει έναν χαρακτήρα @ και τουλάχιστον μία τελεία (.)
  • Ο χαρακτήρας @ δεν μπορεί να είναι ο πρώτος χαρακτήρας στη διεύθυνση
  • Ο . πρέπει να έχει τουλάχιστον έναν χαρακτήρα μετά τον χαρακτήρα @

Έχοντας αυτό υπόψη, ίσως οι προγραμματιστές χρησιμοποιούν το regex για να καθορίσουν εάν μια διεύθυνση email είναι έγκυρη ή όχι. Ακολουθεί μια λειτουργία που προτείνει ο Tyler McGinnis στο ιστολόγιό του:

const emailIsValid = email => { return /^[^\[email protected]][email protected][^\[email protected]]+\.[^\[email protected]]+$/.test(email); } emailIsValid('[email protected]@camp.org') // false emailIsValid('[email protected]') // true

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

const submitBtn = document.getElementById('submit-btn'); const validate = (e) => { e.preventDefault(); const username = document.getElementById('username'); const emailAddress = document.getElementById('email-address'); if (username.value === "") { alert("Please enter your username."); username.focus(); return false; } if (emailAddress.value === "") { alert("Please enter your email address."); emailAddress.focus(); return false; } if (!emailIsValid(emailAddress.value)) { alert("Please enter a valid email address."); emailAddress.focus(); return false; } return true; // Can submit the form data to the server } const emailIsValid = email => { return /^[^\[email protected]][email protected][^\[email protected]]+\.[^\[email protected]]+$/.test(email); } submitBtn.addEventListener('click', validate); 

Περιορισμοί φόρμας HTML5

Μερικές από τις χρησιμοποιούνται συνήθως περιορισμοί HTML5 για είναι το typeχαρακτηριστικό (π.χ. type="password"), maxlength, requiredκαι disabled.

Ένας λιγότερο συχνά χρησιμοποιούμενος περιορισμός είναι το patternχαρακτηριστικό που παίρνει μια κανονική έκφραση JavaScript.

Περισσότερες πληροφορίες

  • Επικύρωση δεδομένων φόρμας | MDN
  • Επικύρωση περιορισμού | MDN