使用 jQuery 简化表单验证-WordPress-PHP中文网

首页

CMS教程

WordPress

使用 jQuery 简化表单验证

王林

Sep 03, 2023 pm 06:33 PM

在之前的教程中，我们讨论了如何使用 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 方法，以确定如何验证输入值。 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 有条件地将体重设为必填字段。这是通过返回 age 输入字段中输入的值超过 50，则在回调函数中返回 true。

创建您自己的错误消息

此插件还允许您为表单中的不同验证规则设置错误消息。首先，将 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 failure-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 演示，向我们展示最终结果。