Atribut pattern <input> HTML

Tanda <input> HTML

Definisi dan Penggunaan

pattern Atribut ini menetapkan ekspresi reguler, dalam masa menghantar borang, memeriksa nilai elemen <input> berdasarkan ekspresi reguler ini.

Perhatian:pattern Atribut ini berlaku untuk jenis input berikut:

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

Petikan:guna Atribut title yang global untuk deskripsikan model ini, untuk membantu pengguna memahami.

Petikan:Silakan di JavaScript 教程 Belajar lebih banyak tentang ekspresi reguler di China.

Contoh

Contoh 1

Bawah ini adalah borang HTML yang mengandungi satu medan input, medan itu hanya boleh mengandungi tiga huruf (tidak boleh mengandungi nombor atau simbol khas):

<form action="/action_page.php">
  <label for="country_code">Kod Negara:</label>
  <input type="text" id="country_code" name="country_code"}}
  pattern="[A-Za-z]{3}" title="Kode negara tiga huruf"><br><br>
  <input type="submit">
</form>

亲自试一试

Contoh 2

Di bawah ini adalah elemen <input> dengan atribut type "password", yang mesti mengandungi sekurang-kurangnya 8 aksara:

<form action="/action_page.php">
  <label for="pwd">Kata laluan:</label>
  <input type="password" id="pwd" name="pwd"
  pattern=".{8,}" title="Sekurang-kurangnya lapan aksara">
  <input type="submit">
</form>

亲自试一试

Contoh 3

Di bawah ini adalah elemen <input> dengan atribut type "password", yang mesti mengandungi sekurang-kurangnya 8 aksara, di antaranya mesti mengandungi nombor, huruf besar dan huruf kecil:

<form action="/action_page.php">
  <label for="pwd">Kata laluan:</label>
  <input type="password" id="pwd" name="pwd"
  pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}"
  title="Mesti mengandungi sekurang-kurangnya lapan aksara, di antaranya mesti mengandungi nombor, huruf besar dan huruf kecil">
  <input type="submit">
</form>

亲自试一试

Contoh 4

Di bawah ini adalah elemen <input> dengan atribut type "email", yang mesti diikuti urutan berikut: characters@characters.domain.

Dipertimbangkan oleh aksara dan simbol @, diikuti dengan lebih banyak aksara, lalu diikuti dengan simbol ".". Di belakang simbol ".", minimal tambahkan dua huruf dari a hingga z:

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

亲自试一试

Contoh 5

Di bawah ini adalah elemen <input> dengan atribut type "search", yang mesti mengandungi aksara berikut: ' atau " .

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

亲自试一试

Contoh 6

Di bawah ini adalah elemen <input> dengan atribut type "url", yang mesti bermula dengan http:// atau https://, diikuti dengan sekurang-kurangnya satu aksara:

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

亲自试一试

语法

<input pattern="regexp">

属性值

值 描述
regexp 规定检查 <input> 元素值的正则表达式。

浏览器支持

表中的数字注明了首个完全支持该属性的浏览器版本。

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

注释：pattern 属性是 HTML5 中的新属性。

Tanda <input> HTML