使用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">姓名<span>（必填，至少3个字符）</span></label>
<input id="name" name="name" minlength="3" type="text" 必填></p><p><label for="email">电子邮件 <span>（必填）</span></label>
<input id="email" type="email" name="email" 必填></p><p><input class="submit" type="submit" value="SUBMIT">
</p></form>

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

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

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

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

该库试图通过仅在必要时显示错误消息来尽可能地对用户友好。例如，如果您在未实际输入任何信息的情况下浏览名称和电子邮件字段，则不会收到任何错误消息。但是，如果您在名称字段中仅输入一个字符后尝试移动到电子邮件字段，您将收到一条关于输入至少三个字符的错误消息。

使用该  元素将错误消息注入到dom中。label它们都有一个 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和  只是  输入元素的名称。每个键都有一个对象作为其值，对象中的键值对决定如何验证输入字段。ageemailweight

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

在上面的代码中您应该注意的一件事是， depends 如果年龄超过 50 岁，则使用 有条件地将权重设为必填字段。如果 在 输入字段中输入true 的值超过 50，则通过在回调函数中 返回来完成此操作。age

创建您自己的错误消息

此插件还允许您为表单中的不同验证规则设置错误消息。您首先将键的值设置 messages 为具有输入字段的键值对和相应错误消息的对象。

这是一个示例，它将为每个输入字段显示自定义错误消息。

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 依赖于输入字段的名称。这些输入字段中的每一个都将接受一个带有键值对的对象作为其值。每种情况下的关键是必须遵循的验证规则。该值只是在违反特定规则时要显示的错误消息。

例如，  如果留空，age 输入字段将触发 错误消息。 但是，如果您在输入字段中输入除数字之外的任何其他内容required，它将触发 错误。number

您会注意到的一件事是，该插件将为您未提供自定义错误消息的验证规则显示通用错误消息。尝试在以下演示中填写不同的值，您将看到自定义和通用错误消息按预期显示。

自定义错误消息的外观

有时您可能希望将自己的类添加到有效和无效输入中，以便更具体地定位它们或更好地与现有主题集成。

errorClass 您可以使用和 validClass 键更改添加到有效或无效输入元素的类 。这有助于防止由于重用相同的类名而导致一些不必要的冲突。默认情况下，error该类被分配给每个无效的输入元素和标签。该类valid被分配给每个有效的输入元素。

重要的是要记住设置errorClass 为类似的东西 会从无效元素fail-alert 中删除类。error您必须使用errorClass: "error fail-alert" 将多个类分配给同一个元素。也是如此 validClass。

当用户输入有效输入时，不会向表单添加其他标签。因此，来自的类 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 to 的值来阻止插件验证按键、单击和其他此类事件的输入字段 false。请记住，布尔值 true 不是这些键的有效值。这基本上意味着，如果您希望插件验证或失去对按键事件的关注，只需保持这些选项不变。

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

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

最后的想法

在本教程中，我们学习了如何使用 jQuery 插件将表单验证提升到一个新的水平。使用简单的 JavaScript 表单验证可以让我们对基本的 HTML 验证进行大量额外的控制。例如，您可以轻松控制在输入填充无效值时出现不同错误消息的方式和时间。