迹忆客 专注技术分享

本文将介绍两种在 HTML 表单中设置长度验证的方法。此外，我们将讨论最小和最大长度验证。

在 HTML 中使用 pattern 属性设置长度验证

pattern 属性在 HTML 的 input 标签中定义了一个正则表达式。它将检查表单中的输入值并执行验证。

我们可以将正则表达式指定为 pattern 属性的值。我们可以将 pattern 属性与输入类型一起使用，例如文本、电子邮件、密码、电话、URL、日期和搜索。

我们还可以使用 input 标签中的 title 属性来理解验证规则。我们可以指定最小和最大长度的正则表达式模式。

例如，创建一个表单并在其中编写一个带有 type 密码的 input 标签。

接下来，使用 pattern 属性编写正则表达式模式 .{8,}。然后，在 title 属性中写入文本 minimum eight characters needed。

最后，在标签中写入 required 属性，并创建一个提交按钮。

在这里，我们创建了一个正则表达式，其中输入的最小长度为 8。当我们尝试提交长度少于八个字符的表单时，该表单将不会被提交。

title 属性中的消息将在这种情况下显示。 在正则表达式中表示除新行以外的任何字符。我们可以在逗号后添加另一个数字来设置最大长度。

required 属性将阻止在未提供任何值时提交表单。因此，我们可以使用 pattern 属性在 HTML 中设置长度验证。

示例代码：

<form action="#">
    Password<input type="password" pattern=".{8,}" title="minimum eight characters needed" required>
    <input type="submit">
</form>

使用 minlength 属性设置 HTML 中的最小长度验证

HTML 提供了一个名为 minlength 的属性，用于在 input 字段中设置最小长度验证。它适用于所有输入类型，就像 pattern 属性一样。

例如，创建一个表单，然后创建一个用于输入密码的输入字段。然后，在 input 标签中写入 minlength 属性，将该属性的值设置为 8，最后，创建一个提交按钮。

此处，长度验证的工作方式与第一种方法相同。当我们输入的值少于八个字符时，将不会提交表单。

我们还可以使用 maxlength 属性来设置最大长度。因此，我们可以使用 minlength 属性来设置 HTML 中的最小长度验证。

示例代码：

<form action="#">
    Password
    <input type="password" minlength="8">
    <input type="submit">
</form>