HTML <input> 标签pattern属性

<input>标签pattern属性定义和用法

pattern属性指定一个正则表达式，检查<input>元素的值。
注意：pattern属性使用以下输入类型：text，date，search，url，tel，email和password。
提示：使用全局title属性来描述帮助用户的输入模式。
提示：在JavaScript教程中了解有关正则表达式的更多信息。

<input>标签pattern属性浏览器支持

Edge/IE	Chrome	FireFox	Safari	Opera

10.0（含）以上	5.0（含）以上	4.0（含）以上	10.1（含）以上	9.6（含）以上

HTML4.01和HTML5之间的差异

pattern属性是HTML5的新功能。

<input>标签pattern属性语法

<input>标签pattern属性实例

只能包含三个字母（无数字或特殊字符）:

<form action="/jc_script/action.php">
  国家代码： <input type="text" name="country_code" pattern="[A-Za-z]{3}" title="三个字母的国家代码">
  <input type="submit">
</form>

尝试一下

密码至少包含六个字符：

<form action="/jc_script/action.php">
  密码: <input type="password" name="pw" pattern=".{6,}" title="六个或更多字符">
  <input type="submit">
</form>

尝试一下

密码至少包含8个字符且包含数字小写字母大写字母：

<form action="/jc_script/action.php">
  密码: <input type="password" name="pw" pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}" title="必须包含至少一个数字和一个大写和小写字母，以及至少8个或更多字符">
  <input type="submit">
</form>

尝试一下

<input>标签pattern属性值

属性值	描述
regexp	指定检查<input>元素的值的正则表达式