Exemple
Un formulaire HTML avec un champ d'entrée qui peut contenir seulement trois lettres (pas de chiffres ou caractères spéciaux):
<form action="demo_form.asp">
Country code: <input type="text" name="country_code"
pattern="[A-Za-z]{3}"
title="Three letter country code">
<input type="submit">
</form>
Essayez - le vous - même » Plus "Try it yourself" exemples ci-dessous.
Définition et utilisation
Le pattern attribut spécifie une expression régulière que la <input> la valeur de l' élément est vérifié par rapport.
Remarque: Le pattern attribut fonctionne avec les types d'entrée suivants: text, date, search, url, tel, email et password de password .
Astuce: Utilisez le global title attribut pour décrire le modèle pour aider l'utilisateur.
Astuce: En savoir plus sur les expressions régulières dans notre tutoriel JavaScript.
support du navigateur
Les chiffres du tableau indiquent la première version du navigateur qui prend en charge totalement l'attribut.
| Attribut | |||||
|---|---|---|---|---|---|
| pattern | 5.0 | 10.0 | 4.0 | Non supporté | 9.6 |
Différences entre HTML 4.01 et HTML5
Le pattern attribut est nouveau dans HTML5.
Syntaxe
<input pattern="regexp">
Attribut valeurs
| Valeur | La description |
|---|---|
| regexp | Indique une expression régulière que la <input> la valeur de l' élément est vérifié par rapport |
Autres exemples
Exemple
Une <input> élément avec type="password" qui doit contenir 6 caractères ou plus:
<form action="demo_form.asp">
Password: <input type="password" name="pw" pattern=".{6,}" title="Six or
more characters">
<input type="submit">
</form>
Essayez - le vous - même » Exemple
Une <input> élément avec type="password" qui doit contenir 8 caractères ou plus qui sont d'au moins un certain nombre, et une majuscule et minuscule:
<form action="demo_form.asp">
Password: <input
type="password" name="pw" pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}" title="Must contain
at least one number and one uppercase and lowercase letter, and at least 8
or more characters">
<input type="submit">
</form>
Essayez - le vous - même » Exemple
Une <input> élément avec type="email" qui doit être dans l'ordre suivant: caractères @ caractères. domaine (caractères suivis d'un signe @, suivi de plusieurs caractères, puis un "."
Après le "." signez, vous ne pouvez écrire 2 à 3 lettres de a à z:
<form action="demo_form.asp">
E-mail: <input type="email"
name="email" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,3}$">
<input type="submit">
</form>
Essayez - le vous - même » Exemple
Une <input> élément avec type="search" qui ne peuvent pas contenir les caractères suivants: ' ou "
<form action="demo_form.asp">
Search: <input
type="search" name="search" pattern="[^'\x22]+" title="Invalid input">
<input type="submit">
</form>
Essayez - le vous - même » Exemple
Une <input> élément avec type="url" qui doit commencer par http:// ou https:// suivi d'au moins un caractère:
<form action="demo_form.asp">
Homepage:
<input type="url" name="website" pattern="https?://.+" title="Include
http://">
<input type="submit">
</form>
Essayez - le vous - même »