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>
亲自试一试 »
更多“亲自试一试”示例如下。
定义和用法
The pattern 属性指定一个正则表达式，在表单提交时， <input> 元素的值将根据此正则表达式进行检查。
注意: pattern 属性适用于以下输入类型: 文本、日期、搜索、URL、电话、电子邮件和密码。
提示: 使用全局 title 属性来描述该模式，以便帮助用户。
提示: 在我们的 JavaScript 教程中了解有关 正则表达式 的更多信息。
浏览器支持
表中的数字指定完全支持该属性的第一个浏览器版本。
| 属性 | |||||
|---|---|---|---|---|---|
| pattern | 5.0 | 10.0 | 4.0 | 10.1 | 9.6 |
语法
<input pattern="regexp">
属性值
| 值 | 描述 |
|---|---|
| regexp | 指定一个正则表达式， 元素的值将根据此正则表达式进行检查 |
更多示例
示例
一个类型为“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>
亲自试一试 »
示例
一个类型为“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>
亲自试一试 »
示例
一个类型为“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>
亲自试一试 »
示例
一个类型为“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>
亲自试一试 »
示例
一个类型为“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> 标签
