HTML <input> pattern-egenskab

HTML <input> etiket

Definition og brug

pattern Egenskaben definerer en regulær udtryk, som kontrollerer værdien af <input>-elementet ved indsendelse af formularen.

Bemærk:pattern Egenskaben anvendes til følgende inputtyper:

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

Ved atBrug Global title-egenskab beskrive dette mønster for at hjælpe brugerne med at forstå det.

Ved atPå vores JavaScript undervisning Lær mere om regulære udtryk i kinesisk.

Eksempel

Eksempel 1

Her er en HTML-formular, der indeholder et inputfelt, som kun kan indeholde tre bogstaver (kan ikke indeholde tal eller specialtegn):

<form action="/action_page.php">
  <label for="country_code">Landekode:</label>
  <input type="text" id="country_code" name="country_code"}}
  pattern="[A-Za-z]{3}" title="Tre bogstaver landekode"><br><br>
  <input type="submit">
</form>

Prøv det selv

Eksempel 2

Her er et <input>-element med en type-attribut som "password", som skal indeholde mindst 8 tegn:

<form action="/action_page.php">
  <label for="pwd">Kodeord:</label>
  <input type="password" id="pwd" name="pwd"
  pattern=".{8,}" title="Åtte eller flere tegn">
  <input type="submit">
</form>

Prøv det selv

Eksempel 3

Her er et <input>-element med en type-attribut som "password", som skal indeholde 8 eller flere tegn, mindst én tal, én stor bogstav og én lille bogstav:

<form action="/action_page.php">
  <label for="pwd">Kodeord:</label>
  <input type="password" id="pwd" name="pwd"
  pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}"
  title="Må indeholde mindst otte tegn, hvoraf mindst ét skal være et tal, én stor bogstav og én lille bogstav">
  <input type="submit">
</form>

Prøv det selv

Eksempel 4

Her er et <input>-element med en type-attribut som "email", som skal følge denne rækkefølge: characters@characters.domain.

Bestående af tegn og @-tegn, efterfulgt af flere tegn, og derefter et "."-tegn. Efter "."-tegnet skal der mindst tilføjes to bogstaver fra a til 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>

Prøv det selv

Eksempel 5

Her er et <input>-element med en type-attribut som "search", som ikke må indeholde følgende tegn: ' eller " .

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

Prøv det selv

Eksempel 6

Her er et <input>-element med en type-attribut som "url", som skal starte med http:// eller https://, efterfulgt af mindst én karakter:

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

Prøv det selv

Syntaks

<input pattern="regexp">

Egenskabsværdi

Værdi Beskrivelse
regexp Regulært udtryk til at kontrollere værdien af <input> elementet.

Browserunderstøttelse

Tallene i tabellen angiver den første browserversion, der fuldt ud understøtter egenskaben.

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

Bemærk:pattern Egenskaben er en ny egenskab i HTML5.

HTML <input> etiket