使用 jQuery 简化表单验证

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

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

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

开始使用

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

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

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

[removed][removed][removed][removed]

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

验证您的第一个表单

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

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

Name (required, at least 3 characters)

E-Mail (required)

我们使用的属性与之前基于 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 有条件地将体重设为必填字段。这是通过返回 messages : { name: { minlength: "Name should be at least 3 characters" }, age: { required: "Please enter your age", number: "Please enter your age as a numerical value", min: "You must be at least 18 years old" }, email: { email: "The email should be in the format: abc@domain.tld" }, weight: { required: "People with age over 50 have to enter their weight", number: "Please enter your weight as a numerical value" } }

就像规则一样，messages 依赖于输入字段的名称。每个输入字段都将接受一个具有键值对的对象作为其值。每种情况的关键是必须遵循的验证规则。该值只是您想要在违反特定规则时显示的错误消息。

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

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; } 

以上就是使用 jQuery 简化表单验证的详细内容，更多请关注慧达安全导航其它相关文章！