JavaScript Φόρμα

Επαλήθευση φόρμας JavaScript

Η επαλήθευση φόρμας HTML μπορεί να εκτελεστεί με JavaScript.

Αν το πεδίο φόρμας (fname) είναι κενό, η λειτουργία θα εμφανίσει ένα μήνυμα και θα επιστρέψει false για να αποτρέψει την υποβολή της φόρμας:

Παράδειγμα JavaScript

function validateForm() {
  let x = document.forms["myForm"]["fname"].value;
  if (x == "") {
    alert("Το όνομα πρέπει να συμπληρωθεί");
    return false;
  }
}

Η λειτουργία μπορεί να καλείται κατά την υποβολή της φόρμας:

Παράδειγμα HTML φόρμας

<form name="myForm" action="/action_page.php" onsubmit="return validateForm()" method="post">
Όνομα: <input type="text" name="fname">
<input type="submit" value="Submit">
</form>

Δοκιμάστε το προσωπικά

Το JavaScript μπορεί να επαληθεύσει την εισαγωγή αριθμών

Το JavaScript χρησιμοποιείται συνήθως για την επαλήθευση της εισαγωγής αριθμών:

Εισάγετε έναν αριθμό από 1 έως 10:

Δοκιμάστε το προσωπικά

Αυτόματη επαλήθευση HTML φόρμας

Η επαλήθευση HTML φόρμας μπορεί να εκτελεστεί αυτόματα από τον περιηγητή:

Αν το πεδίο φόρμας (fname) είναι κενό: Καθορίζει το μοτίβο τιμής του στοιχείου input. Οι παρακάτω ιδιότητες θα αποτρέψουν την υποβολή αυτής της φόρμας:

Παράδειγμα HTML φόρμας

<form action="/action_page.php" method="post">
  <input type="text" name="fname" required>
  <input type="submit" value="Submit">
</form>

Δοκιμάστε το προσωπικά

Συμβουλή:Η αυτόματη επαλήθευση HTML φόρμας δεν λειτουργεί στις εκδόσεις του Internet Explorer 9 ή πιο παλιές.

Επαλήθευση δεδομένων

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

Τυπικές εργασίες επαλήθευσης περιλαμβάνουν:

  • Είχατε συμπληρώσει όλα τα υποχρεωτικά πεδία;
  • Εισήχθητε μια έγκυρη ημερομηνία;
  • Εισήχθητε κείμενο στο πεδίο αριθμού;

Στη majority των περιπτώσεων, ο στόχος της επαλήθευσης δεδομένων είναι να διασφαλιστεί ότι η εισαγωγή του χρήστη είναι σωστή.

Η επαλήθευση μπορεί να οριστεί με πολλούς διαφορετικούς τρόπους και να υλοποιηθεί με πολλούς διαφορετικούς τρόπους.

Η επαλήθευση από τον διακομιστή γίνεται μετά την αποστολή των δεδομένων στο διακομιστή Web.

Η επαλήθευση από τον πελάτη γίνεται πριν από την αποστολή των δεδομένων στο διακομιστή Web από τον περιηγητή.

Περιορισμένη επαλήθευση HTML

Η HTML5 εισήγαγε μια νέα έννοια επαλήθευσης HTML, γνωστή ως περιορισμένη επαλήθευση.

HTML 约束验证基于：

  • Ψευδοκλάσεις ελέγχου συνθήκης DOM ιδιοτήτων και μεθόδων
  • Καθορίζει τον τύπο του στοιχείου input.
  • Η HTML ελέγχος συνθήκης βασίζεται σε:

Ψευδοκλάσεις ελέγχου συνθήκης DOM ιδιοτήτων και μεθόδων

Ψευδοκλάσεις ελέγχου συνθήκης HTML input Επιλογέας
Ατρiβούτα disabled
Καθορίζει ότι το στοιχείο input θα πρέπει να είναι απενεργοποιημένο. max
Καθορίζει τον μέγιστο όριο του στοιχείου input. min
Καθορίζει τον ελάχιστο όριο του στοιχείου input. pattern
Καθορίζει το μοτίβο τιμής του στοιχείου input. required
Καθορίζει ότι το πεδίο input είναι υποχρεωτικό. type

Επιλέξτε το στοιχείο input με έγκυρη τιμή. Ατрибούτα HTML InputΓια πλήρη λίστα, επισκεφθείτε

Καθορίζει τον τύπο του στοιχείου input.

Ψευδοκλάσεις ελέγχου συνθήκης CSS Επιλογέας
Περιγραφή :disabled
Επιλέξτε το στοιχείο input που καθορίζεται με την ιδιότητα "disabled". :invalid
Επιλέξτε το στοιχείο input με μη έγκυρη τιμή. :optional
Επιλέξτε το στοιχείο input που δεν καθορίζεται με την ιδιότητα "required". :required
Επιλέξτε το στοιχείο input που καθορίζεται με την ιδιότητα "required". :valid

Επιλέξτε το στοιχείο input με έγκυρη τιμή. CSS ψευδοκλάσειςΓια πλήρη λίστα, επισκεφθείτε