使用 jQuery 简化表单验证

在之前的教程中，我们讨论了如何使用 html5 中的一些输入属性和一些正则表达式来实现基本表单验证。

在本教程中，您将学习如何使用 jQuery 插件向您的网站添加简单的表单验证。

使用 jQuery 插件验证表单有很多用途。它为您提供了额外的功能，例如轻松显示自定义错误消息以及向 jQuery 表单验证添加条件逻辑。验证库还可以帮助您向 HTML 表单添加验证，而无需对标记进行最少的更改或无需更改。有效性条件也可以随时轻松添加、删除或修改。

开始使用

我们将在本教程中使用 jQuery 验证插件。该插件提供了很多功能，还可以帮助您定义自己的验证逻辑。

在我们开始在我们的领域中使用该插件之前，我们必须在我们的项目中包含必要的文件。有两个不同的文件要包含。第一个是核心文件，其中包含插件的核心功能，包括从不同的验证方法到一些自定义选择器的所有内容。第二个文件包含验证信用卡号和美国电话号码等输入的其他方法。

您可以通过 Bower 或 NPM 等包管理器将这些文件添加到您的项目中。您还可以直接获取文件的 CDN 链接，并将它们添加到网页上的 script 标记中。由于这是一个基于 jQuery 的插件，因此您还需要添加指向 jQuery 库的链接。

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.0/jquery.validate.min.js"></script>

添加这些文件后，您可以开始使用 validate 方法验证任何表单。

验证您的第一个表单

您可以开始使用此插件，而无需对标记进行任何重大更改。您可能需要更改的唯一一件事是，将 id 或 class 添加到您要验证的表单（如果还没有）。

这是一个基本表单的标记，我们将使用 jQuery 验证插件对其进行验证。

<form id="basic-form" action="" method="post"> <p> <label for="name">Name <span>(required, at least 3 characters)</span></label> <input id="name" name="name" minlength="3" type="text" required> </p> <p> <label for="email">E-Mail <span>(required)</span></label> <input id="email" type="email" name="email" required> </p> <p> <input class="submit" type="submit" value="SUBMIT"> </p> </form>

我们使用的属性与之前基于 HTML5 的表单验证教程中使用的属性相同。表单仍然会进行验证，而无需我们添加任何 JavaScript。但是，使用插件进行验证将使我们在无效输入字段的正下方显示错误消息。我们还可以根据需要设置错误的样式。

要开始使用此插件验证表单，只需在网页上添加以下 JavaScript 代码即可：

$(document).ready(function() { $("#basic-form").validate(); });

这是基于您已经添加了所需的 JavaScript 文件的假设。添加这些 JavaScript 行将确保您的表单得到正确验证并显示所有错误消息。这是一个工作演示。

该库仅在必要时显示错误消息，从而尽可能做到用户友好。例如，如果您通过选项卡浏览姓名和电子邮件字段而没有实际输入任何信息，则不会收到任何错误消息。但是，如果您在名称字段中仅输入一个字符后尝试移至电子邮件字段，您将收到一条有关至少输入三个字符的错误消息。

使用 label 元素将错误消息注入到 DOM 中。它们都有一个 error 类，因此很容易应用您自己的样式，就像我们在示例中所做的那样。对于无效输入也是如此，也会添加一个 error 类。

validate() 方法的选项

在前面的示例中，我们只是调用了 validate() 方法，而不向其传递任何选项。但是，我们也可以将一个对象以及该对象内的许多选项传递给此方法。这些选项的值将决定表单插件如何处理验证、错误等。

如果您希望此插件在验证过程中忽略某些元素，您可以通过将类或选择器传递给 ignore() 来轻松实现。当插件验证输入时，它将忽略具有该特定选择器的所有表单元素。

添加输入字段的验证规则

您还可以将一些规则传递给 validate() 方法，以确定如何验证输入值。 rules 参数的值应该是具有键值对的对象。每种情况的关键是我们要验证的元素的名称。该键的值是一个对象，其中包含一组将用于验证的规则。

您还可以使用 depends 关键字向要验证的不同字段添加条件逻辑，并向其传递一个回调函数，该函数返回 true 或 false。下面是一个使用简单规则来定义如何验证输入的示例。

$(document).ready(function() { $("#basic-form").validate({ rules: { name : { required: true, minlength: 3 }, age: { required: true, number: true, min: 18 }, email: { required: true, email: true }, weight: { required: { depends: function(elem) { return $("#age").val() > 50 } }, number: true, min: 0 } } }); });

在上面的代码片段中，键 name、age、email 和 weight 只是名称输入元素。每个键都有一个对象作为其值，对象中的键值对决定如何验证输入字段。

这些验证选项与您可以在表单标记中添加的属性类似。例如，将 required 设置为 true 将使该元素成为表单提交所需的元素。将 minlength 设置为 3 之类的值将强制用户在文本输入中输入至少 3 个字符。还有一些其他内置验证方法，文档页面上对此进行了简要描述。

在上述代码中需要注意的一件事是，如果年龄超过 50 岁，则使用 depends 有条件地将体重设为必填字段。这是通过返回

当用户输入有效的内容时，不会向表单添加任何其他标签。因此，来自 validClass 的类被分配给有效的输入元素。

以下代码片段基于前面的示例，向无效和有效元素添加自定义 CSS 类和样式。

唯一的附加 JavaScript 代码用于分配类。

$(document).ready(function() { $("#basic-form").validate({ errorClass: "error fail-alert", validClass: "valid success-alert", // ... More validation code from previous example

这是我们将用来更改错误消息外观的 CSS：

label.error.fail-alert { border: 2px solid red; border-radius: 4px; line-height: 1; padding: 2px 0 6px 6px; background: #ffe6eb; } input.valid.success-alert { border: 2px solid #4CAF50; color: green; }

除了自定义错误消息之外，我们还向有效的输入元素添加我们自己的样式。这是一个 CodePen 演示，向我们展示最终结果。

更改插件行为的更多选项

您可以通过设置 onfocusout、onkeyup 或 onclick 到 false。请记住，布尔 true 不是这些键的有效值。这基本上意味着，如果您希望插件验证或失去对按键事件的关注，只需保持这些选项不变即可。

您还可以选择更改出现错误的元素。默认情况下，该插件使用 label 元素显示所有错误消息，但您可以使用 errorElement 将其更改为 em 或任何其他元素钥匙。然后，可以使用 wrapper 键将错误元素本身包装在另一个 HTML 元素中。

这些是您在验证表单时可能会使用的一些最常见的选项。不过，如果您想要更改错误消息的位置或将它们组合在一起，那么还有一些其他验证选项可能会派上用场。

CodeCanyon 上的 jQuery 表单验证、JavaScript 和 jQuery 表单

学习如何自己进行简单的表单验证是一项很棒的技能。但您可以通过从 CodeCanyon 下载这些有用的 jQuery 和 JavaScript 表单来获得更深入的了解：

1。带有步骤表单生成器的 jQuery 步骤向导：Timon 步骤表单

如果您想构建多步骤表单，Timon Step Form 下载非常适合您。它具有多种表单元素和过渡效果，您可以使用它们来自定义您的工作。 Timon 还具有拖放构建器，这意味着您无需任何编码知识即可构建表单。它还具有 jQuery 表单验证。

2.只是高级表单

阅读此购买的名称将让您确切地知道您在这里得到的是什么。但这些形式的内涵远不止表面看上去的那么简单。包含的 110 多个表单可供使用，或者您也可以使用该框架为自己制作独特的表单。

3。天空形态

我们用高度可定制的天空形态完善了我们的列表。它具有现代元素和多种配色方案。还设计了六种状态，包括悬停、焦点等。除了这些功能和跨浏览器兼容性之外，Sky Forms 中还有 300 多个矢量图标。

最终想法

在本教程中，我们学习了如何使用 jQuery 插件将表单验证提升到一个新的水平。使用简单的 JavaScript 表单验证为我们提供了对基本 HTML 验证的更多控制。例如，您可以轻松控制当输入填充无效值时如何以及何时显示不同的错误消息。

类似地，您还可以指定插件是否应跳过某些特定元素的验证。我强烈建议您阅读此插件的文档以及有关如何正确使用它的一些最佳实践。

在我们的下一个教程中，您将了解更多基于 JavaScript 的工具和插件，以帮助您轻松创建和验证表单。

当您在这里时，请查看我们关于 JavaScript 表单和表单验证的其他一些帖子！

以上就是使用 jQuery 简化表单验证的详细内容，更多请关注知识资源分享宝库其它相关文章！