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

打印页面