用jQuery轻松实现表单验证的方法在我们之前的教程中，我们讨论了如何使用 HTML5 中的一些输入属性和少量的 reg

在我们之前的教程中，我们讨论了如何使用 HTML5 中的一些输入属性和少量的 regex实现基本的表单验证。

在本教程中，你将学习如何使用一个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 validate插件进行验证。

<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 ，有条件地使体重成为必填字段。这是通过在回调函数中返回true ，如果在age 输入字段中输入的值超过50。

创建你自己的错误信息

这个插件还允许你为表单中的不同验证规则设置错误信息。你首先将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;
}