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> 标签
