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.asp">
<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>亲自试一试 »