HTML pattern 属性与输入元素一起使用，以指定用户的输入必须匹配的正则表达式模式，以便接受表单提交。
此属性经常与 title 属性结合使用，以提供用户友好的提示或错误消息，以阐明预期的输入类型。pattern 属性是用于验证和管理用户输入的有效工具，可确保 Web 表单中的数据准确性和一致性。
语法
<input pattern="regexp">
适用于
下面列出的元素允许使用 HTML optimum 属性
| 元素 | 描述 |
|---|---|
| <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 属性来指定正则表达式以匹配输入的值。
<!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>
支持的浏览器
| 浏览器 |  |
 |
 |
 |
 |
|---|---|---|---|---|---|
| 是否支持 | 5.0 | 10.0 | 4.0 | 10.1 | 9.0 |
