Ιδιότητα pattern στο HTML <input>

HTML <input> ετικέτα

Ορισμός και χρήση

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

Σημείωση:pattern Η ιδιότητα της περιόδου text εφαρμόζεται στα παρακάτω τύπος εισαγωγής:

  • text
  • date
  • search
  • url
  • tel
  • email
  • password

Σημείωση:Χρησιμοποιείται Γενική ιδιότητα title Για να περιγράψετε το μοτίβο και να βοηθήσετε τους χρήστες να κατανοήσουν.

Σημείωση:Παρακαλώ επισκεφθείτε το Εκμάθηση JavaScript Μάθετε περισσότερα για τις ρυθμίσεις έκφρασης στην Κίνα.

Επίδειξη

Παράδειγμα 1

Μια φόρμα HTML που περιέχει ένα πεδίο εισαγωγής που μπορεί να περιέχει μόνο τρία γράμματα (δεν περιέχει αριθμούς ή ειδικούς χαρακτήρες):

<form action="/action_page.php">
  <label for="country_code">Κώδικας Χώρας:</label>
  <input type="text" id="country_code" name="country_code"}
  pattern="[A-Za-z]{3}" title="Drei-Buchstaben-Ländercode"><br><br>
  <input type="submit">
</form>

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

Παράδειγμα 2

Μια <input> στοιχία με την ιδιότητα του τύπου "password", πρέπει να περιέχει τουλάχιστον 8 χαρακτήρες:

<form action="/action_page.php">
  <label for="pwd">Κωδικός πρόσβασης:</label>
  <input type="password" id="pwd" name="pwd"
  pattern=".{8,}" title="Αcht oder mehr Zeichen">
  <input type="submit">
</form>

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

Παράδειγμα 3

Μια <input> στοιχία με την ιδιότητα του τύπου "password", πρέπει να περιέχει 8 ή περισσότερους χαρακτήρες, τουλάχιστον έναν αριθμό, μια μεγάλη και μια μικρή γραμματική κεφαλαία:

<form action="/action_page.php">
  <label for="pwd">Κωδικός πρόσβασης:</label>
  <input type="password" id="pwd" name="pwd"
  pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}"
  title="Πρέπει να περιέχει τουλάχιστον οκτώ χαρακτήρες, τουλάχιστον έναν αριθμό, μια μεγάλη και μια μικρή γραμματική κεφαλαία":
  <input type="submit">
</form>

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

Παράδειγμα 4

Μια <input> στοιχία με την ιδιότητα του τύπου "email", πρέπει να ακολουθεί τη παρακάτω σειρά: characters@characters.domain.

Συνιστάται από χαρακτήρες και το σύμβολο @, ακολουθούμενο από περισσότερους χαρακτήρες, και μετά ένα σύμβολο ".". Μετά το σύμβολο ".", πρέπει να προσθέσετε τουλάχιστον δύο γράμματα από τα a έως το z:

<form action="/action_page.php">
  <label for="email">Ηλεκτρονική διεύθυνση:</label>
  <input type="email" id="email" name="email"
  pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$">
  <input type="submit">
</form>

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

Παράδειγμα 5

Μια <input> στοιχία με την ιδιότητα του τύπου "search", δεν μπορεί να περιέχει τα εξής χαρακτήρες: ' ή " .

<form action="/action_page.php">
  <label for="search">Αναζήτηση:</label>
  <input type="search" id="search" name="search"
  pattern="[^'\x22]+" title="μη έγκυρη είσοδος">
  <input type="submit">
</form>

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

Παράδειγμα 6

Μια <input> στοιχία με την ιδιότητα του τύπου "url", πρέπει να ξεκινά με http:// ή https:// και να ακολουθεί τουλάχιστον ένα χαρακτήρα:

<form action="/action_page.php">
  <label for="website">Homepage:</label>
  <input type="url" id="website" name="website"
  pattern="https?://.+" title="包含 http://">
  <input type="submit">
</form>

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

Γλώσσα

<input pattern="regexp">

Τιμή Χαρακτηριστικού

Τιμή Περιγραφή
regexp Ορίζει την ακριβή έκφραση που ελέγχει την τιμή του στοιχείου <input>.

Υποστήριξη Βrowser

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

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
5.0 10.0 4.0 10.1 9.6

Σημείωση:pattern Το χαρακτηριστικό είναι νέο για το HTML5.

HTML <input> ετικέτα