HTML - pattern 属性_HTML 菜鸟教程

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

<< HTML - optimum 属性 HTML - placeholder 属性 >>