HTML pattern 属性

HTML pattern 语法

在 HTML 中，pattern 属性用于在表单中为输入框添加一个正则表达式验证规则，以确保用户输入的数据符合特定格式。

只有文本框型的 input 元素支持 pattern 属性，例如：

<input type="text">。
<input type="search">。
<input type="url">。
<input type="tel">。
<input type="email">。
<input type="password">。
<input type="number">（虽然自身已有数字限制，但可以用 pattern 实现更精细的格式控制，例如必须是 5 位数字 )。

语法：

<input type="text" pattern="正则表达式">

说明：

pattern 属性的值是一个正则表达式。当用户提交表单时，如果输入字段的值不符合这个正则表达式，浏览器就会阻止表单提交，并显示一个错误提示。

注意: pattern 不会限制用户在输入时的行为，也就是说，用户可以随意输入内容，但在提交前必须满足验证规则。

HTML pattern 摘要

适用元素	input
使用频率	高
兼容性	查看
官方文档	查看
MDN	查看

HTML pattern 示例

接下来，我们通过几个简单的例子来讲解一下 HTML pattern 属性是如何使用的。

示例 1：pattern 属性验证 “用户昵称”

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        input:invalid {
            border: 1px solid red;
        }
        input:valid {
            border: 1px solid green;
        }
    </style>
</head>
<body>
    <form action="/register" method="post">
        <p>
            <label>
                昵称：
                <input type="text" name="nickname" pattern="^[a-zA-Z][a-zA-Z0-9_]{4,9}$" title="昵称必须以字母开头，长度为5-10个字符（字母、数字或下划线）。" required>
            </label>
        </p>
        <p>
            <button type="submit">注册</button>
        </p>
    </form>
</body>
</html>

页面效果如下图所示。

HTML pattern属性示例1

分析：

在这个例子中，我们使用 pattern 属性为 input 元素定义了一个正则表达式。当我们尝试提交表单时，如果昵称不符合该正则表达式，那么浏览器会显示一个错误提示，并阻止表单提交。

此外，input: invalid 和 input: valid 这两个伪类用于提供视觉反馈，红色边框表示不符合规则，绿色边框表示符合规则。

提示: HTML5 的 pattern 属性默认会匹配整个字符串，因此 “^” and “$” 并不是必须的。不过为了正则表达式的严谨性和可移植性，建议加上它们。

示例 2：pattern 属性验证 “手机号码”

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
    <form action="/contact" method="post">
        <p>
            <label>
                手机号码：
                <input type="tel" name="phone_number" pattern="^1[3-9]\d{9}$" title="请输入11位有效的中国大陆手机号码。" required>
            </label>
        </p>
        <p>
            <button type="submit">提交</button>
        </p>
    </form>
</body>
</html>

页面效果如下图所示。

HTML pattern属性示例2

分析：

对于这个例子来说，只有当输入的手机号码符合 “^1[3-9]\d{9}$” 这个正则表达式（以 1 开头、第二位是 3-9、后面跟着 9 位数字）时，表单才能提交。

示例 3：pattern 属性验证 “邮政编码”

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
    <form action="/address" method="post">
        <p>
            <label>
                邮政编码：
                <input type="text" name="postal_code" pattern="^\d{6}$" title="请输入6位数字的邮政编码。" required>
            </label>
        </p>
        <p>
            <button type="submit">提交</button>
        </p>
    </form>
</body>
</html>

页面效果如下图所示。

HTML pattern属性示例3

分析：

pattern="^\d{6}$" 表示强制要求输入正好 6 位数字。只有当输入符合该模式时，表单才能提交。