HTML <input> pattern 属性

HTML <input> 标签

定义和用法

pattern 属性规定正则表达式，在提交表单时根据该正则表达式检查 <input> 元素的值。

注意：pattern 属性适用于以下输入类型：

  • text
  • date
  • search
  • url
  • tel
  • email
  • password

提示：使用 全局的 title 属性 来描述该模式，以帮助用户理解。

提示：请在我们的 JavaScript 教程 中学习有关正则表达式的更多知识。

实例

例子 1

下面是包含一个输入字段的 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>

亲自试一试

例子 2

下面是一个 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>

亲自试一试

例子 3

下面是一个 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="必须包含至少八个字符，其中必须包含一个数字、一个大写字母和一个小写字母">
  <input type="submit">
</form>

亲自试一试

例子 4

下面是一个 type 属性为 "email" 的 <input> 元素，必须按照以下顺序：characters@characters.domain。

由字符和 @ 符号组成，后面跟着更多字符，然后是一个 "." 符号。在 "." 符号后面，至少添加两个从 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>

亲自试一试

例子 5

下面是一个 type 属性为 "search" 的 <input> 元素，不能包含以下字符： ' 或 " 。

<form action="/action_page.php">
  <label for="search">Search:</label>
  <input type="search" id="search" name="search"
  pattern="[^'\x22]+" title="无效输入">
  <input type="submit">
</form>

亲自试一试

例子 6

下面是一个 type 属性为 "url" 的 <input> 元素，必须以 http:// 或 https:// 开头，后面跟着至少一个字符：

<form action="/action_page.php">
  <label for="website">Homepage:</label>
  <input type="url" id="website" name="website"
  pattern="https?://.+" title="包含 http://">
  <input type="submit">
</form>

亲自试一试

语法

<input pattern="regexp">

属性值

值 描述
regexp 规定检查 <input> 元素值的正则表达式。

浏览器支持

表中的数字注明了首个完全支持该属性的浏览器版本。

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
5.0 10.0 4.0 10.1 9.6

注释：pattern 属性是 HTML5 中的新属性。

HTML <input> 标签