Πώς να εφαρμόσετε την επικύρωση φόρμας από την πλευρά του πελάτη με JavaScript

Πώς να εφαρμόσετε την επικύρωση φόρμας από την πλευρά του πελάτη με JavaScript

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





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



Κατανόηση της χειραγώγησης του DOM

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





Μάθετε περισσότερα: Ο κρυμμένος ήρωας των ιστότοπων: Κατανόηση του DOM

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









Document





const paragraph = document.getElementById('parapgraph');
paragraph.innerText = 'This is a paragraph tag';

Στον παραπάνω κώδικα, το

η ετικέτα έχει ένα αναγνωριστικό παράγραφος Το Κατά τη σύνταξη του κώδικα JavaScript, μπορείτε να αποκτήσετε πρόσβαση σε αυτό το στοιχείο καλώντας το document.getElementById («παράγραφος») μέθοδο και χειρισμό της αξίας του.

Τώρα που καταλάβατε τα βασικά της χειραγώγησης DOM, προχωρήστε και εφαρμόστε την επικύρωση φόρμας.



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

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

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



πώς να επαναφέρετε το imessage σε mac

Το HTML στοιχείο χρησιμοποιείται για τη δημιουργία αυτών των φορμών που αντιμετωπίζουν οι χρήστες. Δείτε πώς μπορείτε να επικυρώσετε τις εισόδους μιας φόρμας HTML:

1. Επικύρωση email

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

HTML:

JavaScript:

const emailInput = document.getElementById('email');
const emailRegex = /^[a-zA-Z0-9.!#$%&'*+/=?^_`~-]+@[a-zA-Z0-9-]+(?:.[a-zA-Z0-9-]+)*$/;
if (!emailInput.value.match(emailRegex)) {
alert('Invalid email address.');
}

2. Επικύρωση κωδικού πρόσβασης

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

  • Ο κωδικός πρόσβασης πρέπει να αποτελείται από περισσότερους από 6 χαρακτήρες.
  • Η τιμή του κωδικού πρόσβασης και το πεδίο επιβεβαίωσης κωδικού πρόσβασης πρέπει να είναι ίδιες.

HTML:


JavaScript:

const password = document.getElementById('password').value;
const confirmPassword = document.getElementById('confirm-password').value;
if (password.value !== confirmPassword.value) {
alert('Entered passwords do not match');
}
if (password.length <6) {
alert('Password must be more than 6 characters long')
}

3. Επικύρωση ραδιοφωνικής εισόδου

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

Αυτό μπορεί να επιτευχθεί χρησιμοποιώντας το λογικοί τελεστές όπως το AND ( && ) και οχι ( ! ) χειριστής με αυτόν τον τρόπο:

HTML:

Male

Female

Others

JavaScript:

const genders = document.getElementsByName('gender');
const validForm = false;
let i = 0;
while (!validForm && i if (radios[i].checked) validForm = true;
i++;
}
if (!validForm) alert('Must check some option!');

4. Επιλέξτε Επικύρωση εισόδου

ο Το στοιχείο HTML χρησιμοποιείται για τη δημιουργία μιας αναπτυσσόμενης λίστας. ο ετικέτες μέσα στο στοιχείο καθορίζουν τις διαθέσιμες επιλογές στην αναπτυσσόμενη λίστα. Καθένα από αυτά Οι ετικέτες έχουν ένα χαρακτηριστικό τιμής που σχετίζεται με αυτές.

πώς να ελέγξετε το dpi μιας εικόνας

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

HTML:


Select One
Mr
Mrs
Ms

JavaScript:

διακόπτης ισχύος για βατόμουρο pi 3
const title = document.getElementById('title');
if (title.value = '') {
alert('Please select a title');
}

5. Επιβεβαίωση πλαισίου ελέγχου

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

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

HTML:


I agree to the terms and conditions

JavaScript:

const terms = document.getElementById('terms');
if (!terms.checked) {
alert('Please agree to the terms and conditions to proceed further.');
}

Η πρόληψη είναι καλύτερη από τη θεραπεία

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

Τώρα που καταλαβαίνετε πώς να επικυρώνετε τις εισόδους HTML, γιατί να μην το δοκιμάσετε δημιουργώντας μια φόρμα και εφαρμόζοντας τις στρατηγικές που έχετε δει παραπάνω;

Μερίδιο Μερίδιο Τιτίβισμα ΗΛΕΚΤΡΟΝΙΚΗ ΔΙΕΥΘΥΝΣΗ Πώς να δημιουργήσετε μια φόρμα σε HTML

Επιτρέψτε στους χρήστες σας να εισάγουν δεδομένα στους ιστότοπούς σας με φόρμες HTML.

Διαβάστε Επόμενο Σχετικά θέματα
  • Προγραμματισμός
  • HTML
  • JavaScript
  • Ανάπτυξη διαδικτύου
  • Φροντιστήρια κωδικοποίησης
Σχετικά με τον Συγγραφέα Νίτιν Ρανγκανάθ(Δημοσιεύθηκαν 31 άρθρα)

Ο Nitin είναι ένας άπληστος προγραμματιστής λογισμικού και φοιτητής μηχανικής υπολογιστών που αναπτύσσει εφαρμογές ιστού χρησιμοποιώντας τεχνολογίες JavaScript. Εργάζεται ως ανεξάρτητος προγραμματιστής ιστού και του αρέσει να γράφει για Linux και προγραμματισμό στον ελεύθερο χρόνο του.

Περισσότερα από τον Nitin Ranganath

Εγγραφείτε στο newsletter μας

Εγγραφείτε στο ενημερωτικό μας δελτίο για τεχνικές συμβουλές, κριτικές, δωρεάν ebooks και αποκλειστικές προσφορές!

Κάντε κλικ εδώ για εγγραφή