Το χαρακτηριστικό pattern

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

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

Σε περίπτωση προσπάθειας αποστολής της φόρμας, εάν το πεδίο με αυτό το χαρακτηριστικό δεν είναι συμπληρωμένο - το πρόγραμμα περιήγησης δεν θα επιτρέψει την αποστολή της φόρμας και θα εμφανίσει ένα σφάλμα με τη μορφή αναδυόμενης υπόδειξης. Δυστυχώς, το κείμενο του σφάλματος και η εμφάνισή του δεν μπορούν να αλλάξουν με χρήση HTML ή CSS.

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

Το χαρακτηριστικό pattern πρέπει να εφαρμόζεται στα tags input ή textarea.

Παράδειγμα

Ας στραφούμε στο tag input και ας προσθέσουμε το χαρακτηριστικό pattern, στο οποίο θα ορίσουμε μια κανονική έκφραση που ελέγχει ότι στο πεδίο εισάγεται αριθμός με δύο ψηφία (για παράδειγμα, 25).

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

<form action="">
	<input type="text" pattern="\d{2}">
	<input type="submit">
</form>

Παράδειγμα . Κενό πεδίο

Στο προηγούμενο παράδειγμα, το πρόγραμμα περιήγησης εμφάνιζε σφάλμα μόνο εάν το πεδίο δεν ήταν κενό (αν και το κενό πεδίο δεν είναι αριθμός με δύο ψηφία). Ας προσπαθήσουμε να κάνουμε έτσι ώστε το σφάλμα να εμφανίζεται και για κενό πεδίο - μαζί με το χαρακτηριστικό pattern ας γράψουμε επίσης και το χαρακτηριστικό required:

<form action="">
	<input type="text" pattern="\d{2}" required>
	<input type="submit">
</form>

Δείτε επίσης

το χαρακτηριστικό required,
με το οποίο μπορείτε να κάνετε έλεγχο για κενό πεδίο