Atributo pattern de <input> HTML

Etiqueta <input> de HTML

Definición y uso

patrón El atributo especifica una expresión regular, que se utiliza para verificar el valor del elemento <input> al enviar el formulario.

Nota:patrón El atributo se aplica a los siguientes tipos de entrada:

  • texto
  • fecha
  • búsqueda
  • URL
  • teléfono
  • correo electrónico
  • contraseña

Consejo:Usar Atributo global title describir este patrón para ayudar a los usuarios a entender.

Consejo:Por favor, en nuestro Tutoriales de JavaScript Aprende más sobre expresiones regulares en chino.

Ejemplo

Ejemplo 1

A continuación, se muestra un formulario HTML que contiene un campo de entrada, que solo puede contener tres letras (no puede contener números o caracteres especiales):

<form action="/action_page.php">
  <label for="country_code">Código de país：</label>
  <input type="text" id="country_code" name="country_code"}}
  pattern="[A-Za-z]{3}" title="Código de país de tres letras"><br><br>
  <input type="submit">
</form>

Prueba por tu cuenta

Ejemplo 2

Un elemento <input> con el atributo type "password" debe contener al menos 8 caracteres:

<form action="/action_page.php">
  <label for="pwd">Contraseña:</label>
  <input type="password" id="pwd" name="pwd"
  pattern=".{8,}" title="Ocho o más caracteres">
  <input type="submit">
</form>

Prueba por tu cuenta

Ejemplo 3

Un elemento <input> con el atributo type "password" debe contener 8 caracteres o más, al menos uno de ellos debe ser un número, una letra mayúscula y una letra minúscula:

<form action="/action_page.php">
  <label for="pwd">Contraseña:</label>
  <input type="password" id="pwd" name="pwd"
  pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}"
  title="Debe contener al menos ocho caracteres, uno de ellos debe ser un número, una letra mayúscula y una letra minúscula">
  <input type="submit">
</form>

Prueba por tu cuenta

Ejemplo 4

Un elemento <input> con el atributo type "email" debe seguir el siguiente orden: characters@characters.domain.

Consta de caracteres y el símbolo @, seguido de más caracteres, y luego un símbolo ".". Después del símbolo ".", se deben agregar al menos dos letras de la a a la z:

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

Prueba por tu cuenta

Ejemplo 5

Un elemento <input> con el atributo type "search" no puede contener los siguientes caracteres: ' o " .

<form action="/action_page.php">
  <label for="search">Búsqueda:</label>
  <input type="search" id="search" name="search"
  pattern="[^'\x22]+" title="Entrada no válida">
  <input type="submit">
</form>

Prueba por tu cuenta

Ejemplo 6

Aquí hay un elemento <input> con el atributo type "url", que debe comenzar con http:// o https:// seguido de al menos un carácter:

<form action="/action_page.php">
  <label for="website">Página principal:</label>
  <input type="url" id="website" name="website"
  pattern="https?://.+" title="Contiene http://">
  <input type="submit">
</form>

Prueba por tu cuenta

Sintaxis

<input pattern="regexp">

Valor del atributo

Valor Descripción
regexp Expresión regular que especifica la verificación del valor del elemento <input>.

Compatibilidad del navegador

Los números en la tabla indican la versión del navegador que primero admite esta propiedad.

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

Notas:patrón El atributo es una nueva propiedad en HTML5.

Etiqueta <input> de HTML