HTML <input> pattern 屬性
示例
一個 HTML 表單，其中包含一個只能包含三個字母（不允許數字或特殊字元）的輸入欄位
<form action="/action_page.php">
<label for="country_code">國家程式碼：</label>
<input type="text" id="country_code" name="country_code"
pattern="[A-Za-z]{3}" title="三字母國家程式碼"><br><br>
<input type="submit">
</form>
自己動手試一試 »
更多“自己嘗試”的例子見下文。
定義和用法
pattern 屬性指定了一個正則表示式，在表單提交時，<input> 元素的值將與該正則表示式進行檢查。
注意： pattern 屬性適用於以下輸入型別：text、date、search、url、tel、email 和 password。
提示： 使用全域性 title 屬性來描述模式，以幫助使用者。
提示： 在我們的 JavaScript 教程中瞭解更多關於 正則表示式 的資訊。
瀏覽器支援
表格中的數字表示完全支援該屬性的第一個瀏覽器版本。
| Attribute | |||||
|---|---|---|---|---|---|
| pattern | 5.0 | 10.0 | 4.0 | 10.1 | 9.6 |
語法
<input pattern="regexp">
屬性值
| 值 | 描述 |
|---|---|
| regexp | 指定一個正則表示式，<input> 元素的值將與該正則表示式進行檢查 |
更多示例
示例
一個 type="password" 的 <input> 元素，必須包含 8 個或更多字元
<form action="/action_page.php">
<label for="pwd">密碼:</label>
<input type="password" id="pwd" name="pwd"
pattern=".{8,}" title="八個或更多字元">
<input type="submit">
</form>
自己動手試一試 »
示例
一個 type="password" 的 <input> 元素，必須包含 8 個或更多字元，其中至少包含一個數字，以及一個大寫字母和一個小寫字母
<form action="/action_page.php">
<label for="pwd">密碼:</label>
<input type="password" id="pwd" name="pwd"
pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}"
title="必須包含至少一個 數字，一個大寫字母和一個小寫字母，以及至少 8 個或更多字元">
<input type="submit">
</form>
自己動手試一試 »
示例
一個 type="email" 的 <input> 元素，必須按以下順序排列：字元@字元.域名（字元後跟一個 @ 符號，然後是更多字元，然後是一個 "."
在 "." 符號之後，新增至少 2 個從 a 到 z 的字母
<form action="/action_page.php">
<label for="email">電子郵件:</label>
<input type="email" id="email" name="email"
pattern="[a-z0-9._%+\-]+@[a-z0-9.\-]+\.[a-z]{2,}$">
<input type="submit">
</form>
自己動手試一試 »
示例
一個 type="search" 的 <input> 元素，不能包含以下字元：' 或 "
<form action="/action_page.php">
<label for="search">搜尋：</label>
<input type="search" id="search" name="search"
pattern="[^'\x22]+" title="無效輸入">
<input type="submit">
</form>
自己動手試一試 »
示例
一個 type="url" 的 <input> 元素，必須以 http:// 或 https:// 開頭，後面跟至少一個字元
<form action="/action_page.php">
<label for="website">主頁：</label>
<input type="url" id="website" name="website"
pattern="https?://.+" title="包含 http://">
<input type="submit">
</form>
自己動手試一試 »
❮ HTML <input> 標籤
