在 HTML 中设置长度验证

Subodh Poudel 2023年2月19日 2022年1月2日
  1. 在 HTML 中使用 pattern 属性设置长度验证
  2. 使用 minlength 属性设置 HTML 中的最小长度验证
在 HTML 中设置长度验证

本文将介绍两种在 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>
Subodh Poudel avatar Subodh Poudel avatar

Subodh is a proactive software engineer, specialized in fintech industry and a writer who loves to express his software development learnings and set of skills through blogs and articles.

LinkedIn