Attribut pattern de l'élément <input> HTML

Balise HTML <input>

Définition et utilisation

pattern Cette propriété définit l'expression régulière, qui vérifie la valeur de l'élément <input> en fonction de cette expression régulière lors de la soumission du formulaire.

Remarque :pattern Cette propriété s'applique aux types d'entrée suivants :

  • texte
  • date
  • recherche
  • url
  • tel
  • email
  • mot de passe

Astuce :Utilise L'attribut title global Pour décrire ce modèle et aider les utilisateurs à comprendre.

Astuce :Veuillez consulter notre Tutoriel JavaScript Pour en savoir plus sur les expressions régulières en chinois.

Exemple

Exemple 1

Ci-dessous se trouve un formulaire HTML contenant un champ d'entrée, ce champ ne peut contenir que trois lettres (ne peut pas contenir de chiffres ou de caractères spéciaux) :

<form action="/action_page.php">
  <label for="country_code">Code du pays：</label>
  <input type="text" id="country_code" name="country_code"}}
  pattern="[A-Za-z]{3}" title="Code pays de trois lettres"><br><br>
  <input type="submit">
</form>

Essayez-le vous-même

Exemple 2

Un élément <input> avec l'attribut type "password" doit contenir au moins 8 caractères :

<form action="/action_page.php">
  <label for="pwd">Mot de passe :</label>
  <input type="password" id="pwd" name="pwd"
  pattern=".{8,}" title="Huit ou plus de caractères">
  <input type="submit">
</form>

Essayez-le vous-même

Exemple 3

Un élément <input> avec l'attribut type "password" doit contenir 8 caractères ou plus, au moins un chiffre, une majuscule et une minuscule :

<form action="/action_page.php">
  <label for="pwd">Mot de passe :</label>
  <input type="password" id="pwd" name="pwd"
  pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}"
  title="Doit contenir au moins huit caractères, dont un chiffre, une majuscule et une minuscule">
  <input type="submit">
</form>

Essayez-le vous-même

Exemple 4

Un élément <input> avec l'attribut type "email" doit suivre l'ordre suivant : characters@characters.domain.

Composé de caractères et du symbole @, suivi de plus de caractères, puis d'un point ".". Après le point ".", ajoutez au moins deux lettres de a à z :

<form action="/action_page.php">
  <label for="email">E-mail :</label>
  <input type="email" id="email" name="email"
  pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$">
  <input type="submit">
</form>

Essayez-le vous-même

Exemple 5

Un élément <input> avec l'attribut type "search" ne peut pas contenir les caractères suivants : ' ou " .

<form action="/action_page.php">
  <label for="search">Recherche:</label>
  <input type="search" id="search" name="search"
  pattern="[^'\x22]+" title="Entrée invalide">
  <input type="submit">
</form>

Essayez-le vous-même

Exemple 6

Il s'agit d'un élément <input> avec l'attribut type "url", qui doit commencer par http:// ou https:// suivi d'au moins un caractère :

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

Essayez-le vous-même

Syntaxe

<input pattern="regexp">

Valeur de l'attribut

Valeur Description
regexp Définir une expression régulière pour vérifier la valeur de l'élément <input>.

Prise en charge du navigateur

Les numéros dans le tableau indiquent la version du navigateur qui prend en charge cette propriété pour la première fois.

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

Remarque :pattern Les attributs sont de nouvelles propriétés HTML5.

Balise HTML <input>