Proprietà pattern di <input> HTML

Tag HTML <input>

Definizione e utilizzo

pattern La proprietà definisce l'espressione regolare, che viene controllata il valore dell'elemento <input> in base a questa espressione regolare al momento della presentazione del modulo.

Attenzione:pattern Proprietà applicata ai seguenti tipi di input:

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

Suggerimento:Utilizzare Proprietà title globale Descrivere il modello per aiutare gli utenti a comprendere.

Suggerimento:RivEDI i nostri Corso JavaScript Per ulteriori informazioni sulle espressioni regolari, consultare i nostri corsi.

Esempio

Esempio 1

Di seguito è riportato un modulo HTML contenente un campo di input, che può contenere solo tre lettere (non può contenere numeri o caratteri speciali):

<form action="/action_page.php">
  <label for="country_code">Codice del paese:</label>
  <input type="text" id="country_code" name="country_code"}
  pattern="[A-Za-z]{3}" title="Codice nazionale a tre lettere"><br><br>
  <input type="submit">
</form>

Prova personalmente

Esempio 2

Ecco un elemento <input> con l'attributo type "password", che deve contenere almeno 8 caratteri:

<form action="/action_page.php">
  <label for="pwd">Password:</label>
  <input type="password" id="pwd" name="pwd"
  pattern=".{8,}" title="Ogni otto o più caratteri">
  <input type="submit">
</form>

Prova personalmente

Esempio 3

Ecco un elemento <input> con l'attributo type "password", che deve contenere 8 o più caratteri, tra cui almeno un numero, una lettera maiuscola e una lettera minuscola:

<form action="/action_page.php">
  <label for="pwd">Password:</label>
  <input type="password" id="pwd" name="pwd"
  pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}"
  title="Deve contenere almeno otto caratteri, tra cui un numero, una lettera maiuscola e una lettera minuscola">
  <input type="submit">
</form>

Prova personalmente

Esempio 4

Ecco un elemento <input> con l'attributo type "email", che deve seguire l'ordine seguente: characters@characters.domain.

Composto da caratteri e dal simbolo @, seguito da più caratteri, quindi un punto ".". Dopo il punto ".", aggiungi almeno due lettere dalla a alla z:

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

Prova personalmente

Esempio 5

Ecco un elemento <input> con l'attributo type "search", che non può contenere i seguenti caratteri: ' o " .

<form action="/action_page.php">
  <label for="search">Cerca:</label>
  <input type="search" id="search" name="search"
  pattern="[^'\x22]+" title="Input non valido">
  <input type="submit">
</form>

Prova personalmente

Esempio 6

Ecco un elemento <input> con l'attributo type "url", che deve iniziare con http:// o https:// seguiti da almeno un carattere:

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

Prova personalmente

Sintassi

<input pattern="regexp">

Valore dell'attributo

Valore Descrizione
regexp Definire l'espressione regolare per verificare il valore dell'elemento <input>.

Supporto del browser

I numeri nella tabella indicano la versione del browser che supporta per la prima volta l'attributo.

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

Nota:pattern L'attributo è una nuova proprietà di HTML5.

Tag HTML <input>