HTML <input> pattern-attribut

HTML <input> etikett

Definition och användning

pattern Egenskapen specificerar ett reguljärt uttryck som kontrollerar värdet på <input>-elementet vid formulärinlämning.

Observera:pattern Egenskapen tillämpas på följande inmatningstyper:

  • text
  • datum
  • sök
  • url
  • tel
  • e-post
  • lösenord

Tips:Använd Globala title-attribut Beskriv mönstret för att hjälpa användaren att förstå.

Tips:På vår JavaScript handledning Lär dig mer om reguljära uttryck i vår

Exempel

Exempel 1

Nedan är en HTML-form med ett inmatningsfält som endast kan innehålla tre bokstäver (inte siffror eller specialtecken):

<form action="/action_page.php">
  <label for="country_code">Landskod:</label>
  <input type="text" id="country_code" name="country_code"}}
  pattern="[A-Za-z]{3}" title="Tre bokstäver långt landskodsnummer"><br><br>
  <input type="submit">
</form>

Prova själv

Exempel 2

Nedan är ett <input>-element med en type-attribut som "password", som måste innehålla minst 8 tecken:

<form action="/action_page.php">
  <label for="pwd">Lösenord:</label>
  <input type="password" id="pwd" name="pwd"
  pattern=".{8,}" title="Åtta eller fler tecken">
  <input type="submit">
</form>

Prova själv

Exempel 3

Nedan är ett <input>-element med en type-attribut som "password", som måste innehålla 8 tecken eller mer, minst en siffra, en stor bokstav och en liten bokstav:

<form action="/action_page.php">
  <label for="pwd">Lösenord:</label>
  <input type="password" id="pwd" name="pwd"
  pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}"
  title="Måste innehålla minst åtta tecken, varav minst en siffra, en stor bokstav och en liten bokstav">
  <input type="submit">
</form>

Prova själv

Exempel 4

Nedan är ett <input>-element med en type-attribut som "email", som måste följa följande ordning: characters@characters.domain。

Består av tecken och @-tecken, följt av fler tecken, och sedan ett "."-tecken. Efter "."-tecknet måste det läggas till minst två bokstäver från a till z:

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

Prova själv

Exempel 5

Nedan är ett <input>-element med en type-attribut som "search", som inte får innehålla följande tecken: ' eller " .

<form action="/action_page.php">
  <label for="search">Sök:</label>
  <input type="search" id="search" name="search"
  pattern="[^'\x22]+" title="Ogiltig inmatning">
  <input type="submit">
</form>

Prova själv

Exempel 6

Nedan är ett <input>-element med en type-attribut som "url", som måste börja med http:// eller https:// följt av minst en tecken:

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

Prova själv

Syntaks

<input pattern="regexp">

Egenskapsvärde

Värde Beskrivning
regexp Definiera en reguljärt uttryck för att kontrollera värdet på <input>-elementet.

Webbläsarstöd

Numrerna i tabellen anger den första webbläsaren som helt stöder egenskapen.

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

Kommentar:pattern Egenskapen är en ny egenskap i HTML5.

HTML <input> etikett