HTML <input> pattern-ominaisuus

HTML <input> -elementti

Määrittely ja käyttö

pattern Omaisuus määrittelee säännöllisen lausekkeen, joka tarkistaa <input>-elementin arvon lomakkeen lähettäessä.

Huomioitavaa:pattern Omaisuus soveltuu seuraaviin syöttötyyppeihin:

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

Vinkki:Käytä Yleinen title-ominaisuus kuvaile tätä mallia auttaaksesi käyttäjiä ymmärtämään sitä.

Vinkki:Vieraile meidän JavaScript oppitunturi Opit lisää säännöllisistä lausekkeista täällä.

Esimerkki

Esimerkki 1

Tässä on HTML-lomake, jossa on vain yksi syöttökenttä, joka voi sisältää vain kolme kirjainta (ei voi sisältää numeroita tai erikoismerkkejä):

<form action="/action_page.php">
  <label for="country_code">Kansallinen koodi:</label>
  <input type="text" id="country_code" name="country_code"}
  pattern="[A-Za-z]{3}" title="Kolmen kirjaimen kansallinen koodi"><br><br>
  <input type="submit">
</form>

Kokeile itse

Esimerkki 2

Tässä on <input> -elementti, jolla on type-ominaisuus "password", joka täytyy sisältää vähintään 8 merkkiä：

<form action="/action_page.php">
  <label for="pwd">Salasana:</label>
  <input type="password" id="pwd" name="pwd"
  pattern=".{8,}" title="Kahdeksan tai useampaa merkkiä">
  <input type="submit">
</form>

Kokeile itse

Esimerkki 3

Tässä on <input> -elementti, jolla on type-ominaisuus "password", joka täytyy sisältää 8 tai useampaa merkkiä, joista vähintään yksi on numero, yksi suuri kirjain ja yksi pieni kirjain：

<form action="/action_page.php">
  <label for="pwd">Salasana:</label>
  <input type="password" id="pwd" name="pwd"
  pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}"
  title="Täytyy sisältää vähintään kahdeksan merkkiä, joista yksi on numero, yksi suuri kirjain ja yksi pieni kirjain">
  <input type="submit">
</form>

Kokeile itse

Esimerkki 4

Tässä on <input> -elementti, jolla on type-ominaisuus "email", joka täytyy olla seuraavassa järjestyksessä: characters@characters.domain。

Se koostuu merkeistä ja @-merkistä, sen jälkeen useita merkkejä ja sitten "."-merkki. "."-merkin jälkeen vähintään kaksi kirjainta a-z:stä:

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

Kokeile itse

Esimerkki 5

Tässä on <input> -elementti, jolla on type-ominaisuus "search", joka ei voi sisältää seuraavia merkkejä: ' tai " .

<form action="/action_page.php">
  <label for="search">Hae:</label>
  <input type="search" id="search" name="search"
  pattern="[^'\x22]+" title="Epätarkoituksenmukainen syöte">
  <input type="submit">
</form>

Kokeile itse

Esimerkki 6

Tässä on <input> -elementti, jolla on type-ominaisuus "url", joka täytyy aloittaa http:// tai https:// -alkuperällä, ja sen jälkeen vähintään yksi merkki:

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

Kokeile itse

Syntaksi

<input pattern="regexp">

Ominaisuusarvo

Arvo Kuvaus
regexp Määritä <input> -elementin arvon tarkistava regulaarinen lauseke.

Selaimen tuki

Taulukossa olevat numerot osoittavat ensimmäisen selaimen version, joka tukee ominaisuutta täysin.

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

Huomautus:pattern Ominaisuus on uusi ominaisuus HTML5:ssä.

HTML <input> -elementti