轻松上手,快乐学习!

HTML <input> pattern 属性


实例

只能包含三个字母的输入字段(不允许数字或特殊字符):

<form action="/action_page.php">
  <label for="country_code">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 属性适用于下面的 input 类型:text、search、url、tel、email 和 password。

提示:请使用全局的 title 属性来描述模式以帮助用户。

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


浏览器支持

表中的数字表示支持该属性的第一个浏览器版本。

属性
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">Password:</label>
  <input type="password" id="pwd" name="pwd"
  pattern=".{8,}" title="Eight or more characters">
  <input type="submit">
</form>
亲自试一试 »

实例

带有 type="password" 的 <input> 元素,必须包含至少一个数字的8个或更多字符,以及一个大小写字母:

<form action="/action_page.php">
  <label for="pwd">Password:</label>
  <input type="password" id="pwd" name="pwd"
  pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}"
  title="Must contain at least one  number and one uppercase and lowercase letter, and at least 8 or more characters">
  <input type="submit">
</form>
亲自试一试 »

实例

带有 type="email" 的 <input>元素,必须按以下顺序排列:characters@characters.domain(字符后跟@符号,后跟更多字符,然后是".")

在 "." 之后的签名,是从a到z至少添加两个字母:

<form action="/action_page.php">
  <label for="email">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> 元素不能包含以下字符 : ' or "

<form action="/action_page.php">
  <label for="search">Search:</label>
  <input type="search" id="search" name="search"
  pattern="[^'\x22]+" title="Invalid input">
  <input type="submit">
</form>
亲自试一试 »

实例

带有 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="Include http://">
  <input type="submit">
</form>
亲自试一试 »