HTML - pattern 屬性

HTML pattern 屬性用於輸入元素，以指定使用者輸入必須匹配的正則表示式模式，才能接受表單提交。

此屬性通常與 title 屬性結合使用，以提供使用者友好的提示或錯誤訊息，闡明預期的輸入型別。pattern 屬性是驗證和管理使用者輸入的有效工具，確保 Web 表單中的資料準確性和一致性。

語法

<input pattern="regexp">

應用於

以下列出的元素允許使用 HTML pattern 屬性

元素	描述
<input>	HTML <input> 標籤用於接受使用者各種型別的輸入。

HTML pattern 屬性示例

以下示例將說明 HTML pattern 屬性，以及我們應該在哪裡以及如何使用此屬性！

僅接受字元的 pattern 屬性

在此示例中，我們將應用 pattern 屬性進行字元驗證。

<!DOCTYPE html>
<html lang="en">

<head>
   <title>HTML 'pattern' attribute</title>
</head>

<body>
   <p>HTML 'pattern' attribute</p>
   <form onsubmit="return false;"> 
      Name(only character): <br>
      <input type="text" 
             pattern="[ A-Za-z]{8}" 
             placeholder="Enter name">
      <button>Submit</button>
   </form>
</body>

</html>

接受數字的 pattern 屬性

在此示例中，我們將應用 pattern 屬性進行數字驗證。

<!DOCTYPE html>
<html lang="en">
<head>
   <title>HTML 'pattern' attribute</title>
</head>
<body>
   <p>HTML 'pattern' attribute</p>
   <form onsubmit="return false;"> 
      Pin code(only numbers): <br>
      <input type="password" 
             pattern="[0-9]{6}" 
             placeholder="Enter pin code">
      <button>Submit</button>
   </form>
</body>
</html>

表單驗證的 pattern 屬性

讓我們看看下面的示例，我們將使用 pattern 屬性和輸入元素來指定正則表示式以匹配輸入的值。

<!DOCTYPE html>
<html lang="en">
<head>
   <title>HTML 'pattern' attribute</title>
   <style>
      form {
         width: 300px;
         height: 220px;
         border: solid black;
      }

      form h2 {
         text-align: center;
      }

      form label {
         margin: 10px 10px;
      }

      form input {
         padding: 5px;
         margin: 2px;
         color: black;
      }

      form button {
         margin: 10px;
         padding: 3px;
      }

      input:valid {
         background-color: green;
      }

   </style>
</head>
<body>
   <p>HTML 'pattern' attribute</p>
   <form onsubmit="return false;">
      <h2>Login page</h2>
      <label>Username</label>
      <input type="text" 
             name='uname' 
             pattern="\w[ a-zA-Z]{5,14}" 
             required>
      <br>
      <label>Password</label>
      <input type="password" 
             name='password' 
             pattern="\d{8,8}" 
             required>
      <br>
      <button>Submit</button>
   </form>
   <p>
      Username should only include characters of 
      length 5-14 and password can only contain 
      alphanumeric characters of length 8.
   </p>
</body>
</html>

支援的瀏覽器

屬性
pattern	是 5.0	是 10.0	是 4.0	是 10.1	是 9.0

html_attributes_reference.htm

列印頁面