了解什么是 HTML5 表单验证和浮动输入标签

已发表: 2016-05-16

实施表单验证在防止恶意用户在表单字段中输入乱码方面起着至关重要的作用。 此外，它还限制了没有经验的用户在表单中错误地输入错误信息。

当然，您不希望以不安全的方式从用户那里收集不正确的数据。 因此，您必须为表单定义验证规则。

多年来，我们一直在使用复杂的 TL;DR（即太长；没有阅读）JavaScript 代码来实现客户端的表单验证。 值得庆幸的是，随着“HTML5 表单验证”的发布，我们现在可以使用最少的 JavaScript 向表单添加验证。

虽然最新的 HTML 版本提供了一些好处，但最重要的一个是它附带了大量新的输入字段和属性，对于验证表单来说是必不可少的，而无需编写复杂的 JS（JavaScript 的缩写）验证代码。

但请记住，用户在填写表格时很容易感到沮丧，尤其是当他们知道自己输入的数据错误时，会更大程度地增加他们的沮丧感。 但是感谢 HTML5，添加浮动输入标签可以在用户填写表单的同时验证表单数据。 这样，如果用户在输入字段中犯了任何错误，他们就会立即知道。

例如，下面是 Matt Smith 在 Dribble 上发布的一张图片，展示了浮动标签模式在应用于表单时是如何工作的：

How the floating label pattern works

这篇文章介绍了如何在向 HTML5 表单添加验证时实现浮动输入标签。

但在你开始之前

大多数人可能想先了解验证 HTML5 表单的过程。 毕竟，并不是所有人都有为 HTML5 表单编写验证代码的经验。 此外，您可能不了解 HTML5 中新引入的输入字段和属性。

HTML5 表单验证的详细概述

当您计划验证表单时，建议您首先从服务器端验证开始。 而且，如果您是一名优秀的网页设计师，请继续添加客户端验证，帮助您的用户获得即时反馈，无论他们是否使用正确的数据填写表单。 例如，当用户在电子邮件地址字段中输入数据时向他们提供即时反馈将使他们知道他们输入的电子邮件地址是有效的。

HTML5 的一大特点是它有助于在不依赖脚本的情况下实现客户端验证。 相反，您可以通过在表单元素上使用“验证属性”来执行此类任务。 最重要的是，您只需为输入字段添加“必需”属性，其余的由浏览器处理。

这是一个示例，将解释使用 required 属性向输入字段添加验证：

[php]
姓名：<input type="text" name="yourname" required>
[/php]

上面的代码行使您的浏览器知道名称 INPUT 字段应该被认为是强制性的（即不能留空）。

INPUT field cannot be left blank

如您所见，与“您的姓名”输入字段对应的文本框中显示了一个红色标记。 但是，只要在名称输入字段中输入了一些文本，标记就会变成一个刻度线，表示输入的值是有效的。

除了<input type="text"> （即文本输入类型），HTML5 现在支持几个新的输入选项，如搜索、电子邮件、电话、日期时间等。简单来说，使用 HTML5 我们可以编写以下代码行：

[php]
<输入类型=“文本”名称=“电子邮件”>
[/php]

变成类似的东西：

[php]
<输入类型=“电子邮件”名称=“电子邮件”>
[/php]

桌面浏览器将像任何标准文本字段一样呈现上述代码。

我想提醒您注意的另一件事是：当您尝试在 CodePen 演示中输入诸如 required 或 input type=”email” 等属性时，即使没有任何内容，您仍然会收到错误消息在没有任何有效电子邮件地址的情况下单击“提交”按钮时的消息：

Error message

在我们上面讨论的示例中，您可以看到浏览器默认显示错误消息。 但是，如果您想将自己的（即自定义）验证规则应用于输入值怎么办？ 这就是 Regex 模式派上用场的地方。

了解正则表达式模式

在输入电子邮件地址（如 abc@a）时，您可能已经看到了模式。 不用说，您会希望您的用户输入一个真实的电子邮件地址。 而且，通过指定您自己选择的与您的数据匹配的模式将有助于验证输入的值。 例如，您可以确保电子邮件与结尾包含三个或更多字符的模式匹配。 为此，您需要使用“模式属性”和正则表达式 (RegEx)。

RegEx 基本上是一种用于解析或操作文本的语言。 大多数情况下，正则表达式用于执行复杂的操作（例如搜索和替换）以更好地形成文本数据。 今天，您可以在几乎所有编程和脚本语言中找到正则表达式的使用。 RegEx 可用于验证在表单字段中输入的数据，通过使用模式属性对输入类型强制执行它们，如下所示：

[php]
<input id="phone" placeholder="111-111-1111" title="用于传达电话号码模式的文本" required pattern="[0-9]{3}-[0-9]{3}-[ 0-9]{4}">
[/php]

此外，如果发生任何验证错误，您可以选择确定标题属性以及验证错误以抛出“格式错误！”之外的消息。 使用下面给定的代码行：

[php]
<input type="email" placeholder="Email" 必填模式="^[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+\.[A- Za-z]{2,}$" title="请在此处输入有效的电子邮件地址。">
[/php]

请记住，您不需要为每个输入编写任何荒谬的模式。 相反，在许多情况下，您只需将 required 属性分配给某些特定类型的数据。 例如，超过 8 的数字将如下所示：

[php]
<input type="number" min="8" 必填>
[/php]

另外，请记住，并非所有浏览器都支持所有可用的验证属性。 例如，Firefox 浏览器与“minlength”模式不兼容。

使用 HTML5 表单验证的好处

实现 HTML5 表单验证的最大优势是即时反馈。 大多数情况下，当用户填写表单中的某些字段时，会突出显示一种指示，以告知他们输入的值是否有效。

Indication will be highlighted while users fill out some field

现在，当您在文本框中输入内容时，边框颜色变为绿色，如下所示：

The border color changes to green

但是，如您所见，这种方法有一个缺点。 即使在“名字”字段中添加无效（或不完整）值时，用户也会收到该值正确的指示。 也许，您可能会考虑将:invalid:not(:empty)添加到代码中。 不幸的是，这种逻辑不适用于浏览器，因为它们通常认为表单元素是空的。

想知道该怎么做？

您可以尝试在代码中添加名为“:placeholder-shown”的新伪选择器，如下所示：

[php]
<表格>
<标签>
<span>名字</span>
<input type="text" pattern=".{4,}" placeholder=" " required title="输入至少 4 个字符。">
</标签>

<button>提交</button>

</form>
[/php]

但是大多数浏览器似乎不提供对占位符显示的支持，因此您最好编写一个脚本来在输入字段为空或不为空时切换类。 这是相同的 JavaScript 代码：

[php]
$('input:empty, textarea:empty').addClass('empty');

$('输入').keyup(function () {

if ($(this).val().trim() !== ”) {

$(this).removeClass('empty');

} 别的 {

$(this).addClass('empty');

}

});
[/php]

注意：请记住从上面的 HTML 标记中删除占位符元素。

现在，当您将上述代码片段与 HTML5 标记一起运行时，输出将如下所示：

Code snippet along with HTML5 markup

如您所见，文本框的颜色保持红色，直到应用到该字段的验证未完成。 单击提交会在输入不完整名称时显示错误消息。

但是，一旦用户输入完整（超过 3 个字符），文本框边框的颜色就会变为绿色。

The color of the text box border changes to green.

如何在 HTML5 中添加浮动输入标签？

现在，让我们讨论一下在验证 HTML5 表单时添加浮动输入标签的方法。 这样做有助于增强表单的外观和感觉。 这是 HTML 标记。

要实现浮动标签模式，您必须将标签推送到HTML 标记中<input>元素的正下方：

[php]
<表格>
<标签>
<input type="text" pattern=".{4,}" required title="字符不能少于4个。">
<span>你的名字</span>
</标签>
<标签>
<input type="email" required pattern="^[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+\.[A-Za-z]{ 2,}$" title="请输入有效的电子邮件。">
<span>您的电子邮件</span>
</标签>
<button>提交</button>

</form>
[/php]

CSS 看起来像：

[CSS]
标签 {
位置：相对；
显示：内联块；
}
标签跨度{
位置：绝对；
左：20px；
顶部：-2em；
字体大小：0.75em；
光标：文本；
颜色：#f27853；
过渡：全部 150ms 缓动；
}
输入 {
边框：1px 实心#f2f2f2；
大纲：无；
}
输入：焦点{
边框颜色：#d9d9d9；
}
输入：有效{
边框颜色：#42d142；
}
输入：无效{
边框颜色：#ff8e7a；
}
输入空{
边框颜色：#d9d9d9；
}
输入.空 + 跨度 {
最高：50%；
变换：translateY（-50%）；
字体大小：1em；
背景：无；
颜色：#cccccc；
}
身体 {
显示：弯曲；
最小高度：100vh；
背景：#f1f1f1；
字体系列：'Lato'，无衬线；
字体大小：150%；
}
形式 {
边距：自动；
}

输入，按钮 {
填充：15px 20px；
边框半径：1px；
边框：2px 实心#bdbdbd；
}

按钮 {
边框颜色：#363636；
背景：#363636；
颜色：#FFFFFF；
}
[/css]

最后，编写 JavaScript 代码：

[代码]
$('input:empty, textarea:empty').addClass('empty');
$('输入').keyup(function () {
if ($(this).val().trim() !== ”) {
$(this).removeClass('empty');
} 别的 {
$(this).addClass('empty');
}
});
[/代码]

输出：

Output

在 HTML5 中使用浮动输入标签时，您可以实现多种效果，例如：

  • 在验证 HTML5 表单时添加具有淡入/淡出效果的图标。
  • 如果输入的数据无效，请摇动输入。
  • 正确填写输入时，使输入的颜色变暗。
需要考虑的事情

在对 HTML5 表单实施验证时，您需要熟悉：

  1. 浏览器支持：HTML5 表单在现代浏览器和 IE10+ 中以完美的方式工作。 虽然 IE 版本 9 和更早的版本不支持验证伪选择器，但它仍然可以正常工作。
  2. 警告：在对 HTML5 表单应用验证时，您不能执行的一件事是设置验证消息的样式。 那是因为浏览器禁用了此类功能。

最后的话

对表单实施验证对于为您的站点添加额外的安全层至关重要。 这是因为它可以防止恶意用户在表单字段中添加恶意文本作为值。 此外，当用户在表单的经过验证的输入字段中输入一些输入时，向他们提供即时反馈将有助于增强他们的体验。 毕竟，他们不必花时间认识到他们在填写表格时犯了错误。 但是，仅使用 JavaScript 验证表单可能具有挑战性。 这就是 HTML5 表单验证的用武之地。

使用 HTML5 对表单应用验证时，您无需编写长行复杂的 JS 代码。 相反，您可以使用最少的 JavaScript 编码来实现表单验证规则。 最重要的是，HTML5 表单验证提供了许多新功能，例如浮动输入标签，使表单看起来很漂亮，鼓励用户执行表单提交。