在本教程中，您将学习如何使用jQuery插件向您的网站添加表单验证。
使用jQuery插件来验证表单有很多目的。 它为您提供了其他功能，例如轻松显示自定义错误消息以及添加条件逻辑以进行表单验证。 验证库还可以帮助您将验证添加到HTML表单中，而对标记的更改很少或没有更改。 有效性条件也可以随时轻松添加，删除或修改。
入门
在本教程中，我们将使用jQuery Validation插件 。 该插件提供了很多功能，还可以帮助您定义自己的验证逻辑。
在开始在字段中使用插件之前，我们必须在项目中包含必要的文件。 有两个不同的文件要包括。 第一个是核心文件，它包含插件的核心功能，包括从不同的验证方法到一些自定义选择器的所有内容。 第二个文件包含用于验证输入的其他方法，例如信用卡号和基于美国的电话号码。
您可以通过Bower或NPM等程序包管理器将这些文件添加到项目中。 您也可以直接获得指向文件的CDN链接 ，并将它们添加到网页上的script标签中。 由于这是基于jQuery的插件，因此您还需要添加指向jQuery库的链接。
一旦添加了这些文件，就可以使用validate方法开始验证任何表单。
验证您的第一份表格
您可以开始使用此插件，而无需对标记进行任何重大更改。 您可能需要更改的唯一一件事就是在要验证的表单上添加一个id或class （如果还没有）。
这是我们将使用jQuery validate插件进行验证的基本形式的标记。
我们使用的属性与之前基于HTML5的表单验证教程中使用的属性相同。 该表单仍会进行验证，而无需我们添加任何JavaScript。 但是，使用插件进行验证将使我们在无效输入字段下方显示错误消息。 我们还可以根据需要设置错误的样式。
要使用此插件开始验证表单，只需在网页上添加以下JavaScript代码：
$(document).ready(function() {
$("#basic-form").validate();
});这是基于以下假设：您已经添加了必需JavaScript文件。 添加这些JavaScript行将确保正确验证您的表单并显示所有错误消息。 这是一个工作示例。
该库尝试通过仅在必要时显示错误消息来使用户界面尽可能友好。 例如，如果您在“名称”和“电子邮件”字段之间进行分页而不实际输入任何信息，则不会收到任何错误消息。 但是，如果您在名称字段中仅输入一个字符后尝试移至电子邮件字段，则会收到有关至少输入三个字符的错误消息。
使用label元素将错误消息注入到DOM中。 它们都具有error类，因此很容易应用您自己的样式，就像我们在示例中所做的那样。 对于无效的输入也是如此，它们也会添加一个error类。
validate()方法的选项
在前面的示例中，我们只是调用了validate()方法，而没有向其传递任何选项。 但是，我们还可以将一个对象以及该对象内部的许多选项传递给此方法。 这些选项的值将确定表单插件如何处理验证，错误等。
如果您希望此插件在验证过程中忽略某些元素，则可以通过将类或选择器传递给ignore()来轻松实现。 验证输入时，插件将忽略具有该特定选择器的所有表单元素。
为输入字段添加验证规则
您还可以将一些规则传递给validate()方法，以确定如何验证输入值。 rules参数的值应该是具有键值对的对象。 在每种情况下，密钥都是我们要验证的元素的名称。 该键的值是一个对象，其中包含一组将用于验证的规则。
您还可以通过使用depends关键字并将回调函数传递给它来返回true或false ，从而在depends验证的不同字段中添加条件逻辑。 这是一个使用简单规则定义如何验证输入的示例。
$(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输入字段中输入的值是，则通过在回调函数中返回true来完成此操作。超过50岁。
创建您自己的错误消息
该插件还允许您为表单中的不同验证规则设置错误消息。 首先，将messages键的值设置为一个对象，该对象具有用于输入字段和相应错误消息的key-value对。
这是一个示例，它将显示每个输入字段的自定义错误消息。
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: [email protected]"
},
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错误。
您会注意到的一件事是，该插件将显示验证规则的通用错误消息，而您没有提供自定义错误消息。 尝试在下面的演示中填写不同的值，您将看到自定义错误消息和常规错误消息按预期显示。
更多选项来更改插件行为
您可以阻止插件从键了验证输入字段，单击和其他此类事件的值设置onfocusout ， onkeyup ，或onclick给false 。 请记住，布尔值true不是这些键的有效值。 这基本上意味着，如果您希望插件验证或不关注按键事件，则只需保持这些选项不变即可。
您还可以使用errorClass和validClass键更改添加到有效或无效输入元素中的errorClass 。 这可以帮助防止由于重用相同的类名而引起的一些不必要的冲突。 同样，您可以选择更改出现错误的元素。 默认情况下，插件使用label元素显示所有错误消息，但是您可以使用errorElement键将其更改为em或任何其他元素。 然后可以使用wrapper键将error元素本身包装在另一个HTML元素中。
这些是验证表单时可能会使用的一些最常见的选项。 但是，如果您想执行诸如更改错误消息的位置或将所有错误消息分组在一起的操作，还有一些其他的验证选项可能会派上用场。
最后的想法
在本教程中，我们学习了如何使用jQuery插件使表单验证更上一层楼。 使用JavaScript表单验证使我们对基本HTML验证有了很多其他控制。 例如，当输入中填充无效值时，您可以轻松地控制不同错误消息的显示方式和显示时间。 同样，您也可以指定插件是否应跳过对某些特定元素的验证。 我强烈建议您阅读此插件的文档以及有关如何正确使用它的一些最佳实践 。
在我们的下一个教程中，您将了解更多基于JavaScript的工具和插件，以帮助您轻松创建和验证表单。
翻译自: https://code.tutsplus.com/tutorials/easy-form-validation-with-jquery--cms-33096