使用jQuery简化表单验证

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

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

使用jQuery插件来验证表单有很多用途。它为您提供了额外的功能，比如轻松显示定制的错误消息，以及向jQuery表单验证添加条件逻辑。验证库还可以帮助您将验证添加到HTML表单中，只需对标记进行最少的更改或不做任何更改。有效性条件也可以很容易地随时添加、删除或修改。

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

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

您可以通过包管理器(如鲍尔或NPM)将这些文件添加到项目中。也可以直接获取文件的CDN链接，添加到网页上的script标签中。因为这是一个基于jQuery的插件，所以您还需要添加一个到jQuery库的链接。

& lt脚本src = & quothttps://cdnjs . cloud flare . com/Ajax/libs/jquery/3 . 4 . 0/jquery . min . js & quot；& gt& lt/script & gt；& lt脚本src = & quothttps://cdnjs . cloud flare . com/Ajax/libs/jquery-validate/1 . 19 . 0/jquery . validate . min . js & quot；& gt& lt/script & gt；添加这些文件后，您可以开始使用validate方法验证任何表单。

验证您的第一个表单您可以开始使用该插件，而无需对标记进行任何重大更改。您可能需要更改的唯一一件事就是向您想要验证的表单添加一个id或类(如果还没有的话)。

这是一个基本表单的令牌，我们将使用jQuery验证插件来验证它。

& lt表单id = & quot基本形式& quotaction = & quot"method = & quot帖子& quot& gt& ltp & gt& lt= & quot的标签名称& quot& gt名称& ltspan & gt(必填，至少3个字符)& lt/span&gt。& lt/label & gt；& lt输入id = & quot名称& quotname = & quot名称& quotminlength = & quot3 & quottype = & quot文本& quot必需的& gt& lt/p & gt；& ltp & gt& lt= & quot的标签电子邮件& quot& gt电子邮件& ltspan & gt(必需)& lt/span&gt。& lt/label & gt；& lt输入id = & quot电子邮件& quottype = & quot电子邮件& quotname = & quot电子邮件& quot必需的& gt& lt/p & gt；& ltp & gt& lt输入class = & quot提交& quottype = & quot提交& quotvalue = & quot提交& quot& gt& lt/p & gt；& lt/form & gt；我们使用与之前的基于HTML5的表单验证教程中相同的属性。即使我们不添加任何JavaScript，表单仍然会被验证。但是，使用插件进行验证会导致我们在无效输入字段的正下方显示一条错误消息。我们也可以根据需要设置错误的样式。

要开始使用这个插件来验证表单，只需将以下JavaScript代码添加到网页中:

$(文档)。ready(function(){ $(& quot；#基本格式& quot).validate()；});这是基于假设您已经添加了所需的JavaScript文件。添加这些JavaScript行可以确保表单得到正确验证，并显示所有错误消息。这是一个工作演示。

该库只在必要时显示错误消息，因此尽可能地方便用户。例如，如果您通过选项卡浏览名称和电子邮件字段，而没有实际输入任何信息，您将不会收到任何错误消息。但是，如果您在“名称”字段中仅输入一个字符，然后尝试移至“电子邮件”字段，您将收到一条错误消息，提示您至少输入三个字符。

使用label元素将错误消息注入DOM。它们都有一个错误类，所以很容易应用你自己的样式，就像我们在例子中做的那样。无效输入也是如此，还会添加一个错误类。

validate()方法的选项在前面的示例中，我们只调用了validate()方法，没有向它传递任何选项。然而，我们也可以将一个对象和其中的许多选项传递给这个方法。这些选项的值将决定表单插件如何处理验证、错误等。

如果您希望这个插件在验证过程中忽略某些元素，您可以通过将类或选择器传递给ignore()来轻松做到这一点。当插件验证输入时，它会忽略带有特定选择器的所有表单元素。

为输入字段添加验证规则您还可以将一些规则传递给validate()方法，以确定如何验证输入值。rules参数的值应该是一个具有键值对的对象。每种情况下的关键是我们想要验证的元素的名称。键值是一个包含一组用于验证的规则的对象。

还可以使用depends关键字将条件逻辑添加到要验证的不同字段中，并向它们传递一个返回true或false的回调函数。下面是一个使用简单规则定义如何验证输入的示例。

$(文档)。ready(function(){ $(& quot；#基本格式& quot).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 $(& quot；#年龄& quot).val()>；50}}，number: true，min:0 } })；});在上面的代码片段中，关键字name、age、email和weight只是名称输入元素。每个键都有一个对象作为其值，对象中的键-值对决定了如何验证输入字段。

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

上述代码中需要注意的一点是，如果你超过50岁，可以使用depends有条件地将你的体重设置为必填字段。这是通过返回如果在年龄输入字段中输入的值超过50，那么在回调函数中返回true来实现的。

创建自己的错误消息这个插件还允许你为表单中不同的验证规则设置错误消息。首先，将messages键的值设置为一个对象，该对象包含输入字段的键-值对和相应的错误消息。

下面是一个为每个输入字段显示自定义错误信息的示例。

消息:{ name:{ minlength:& quot；名称应该至少有3个字符& quot}，年龄:{必填:& quot请输入您的年龄。，编号:& quot请输入您的年龄数值& quot，min:& quot；你必须年满18岁& quot}，电子邮件:{ email:& quot；电子邮件的格式应为:abc @ domain.tld & quot}，重量:{必需:& quot50岁以上的人必须输入他们的体重& quot，编号:& quot请输入您的体重数值& quot像规则一样，消息依赖于输入字段的名称。每个输入字段将接受一个以键值对作为其值的对象。每种情况的关键是必须遵循的验证规则。该值只是一条错误消息，您希望在违反特定规则时显示该消息。

例如，如果年龄输入字段留空，将会触发一条必需的错误消息。但是，如果在输入字段中输入数字以外的任何内容，将会触发数字错误。

您会注意到，如果您不提供定制的错误消息，插件将显示验证规则的一般错误消息。在下面的演示中尝试填入不同的值，您将看到自定义和常见的错误消息按预期显示。

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

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

重要的是要记住，将errorClass设置为fail-alert将从无效元素中删除错误类。必须使用error class:" error failure-alert & quot；将多个类分配给同一元素。validClass也是。

当用户输入有效内容时，表单中不会添加其他标签。因此，validClass中的类被分配给一个有效的input元素。

下面的代码片段基于前面的示例向无效和有效元素添加自定义CSS类和样式。

唯一的额外JavaScript代码用于分配类。

$(文档)。ready(function(){ $(& quot；#基本格式& quot).验证({ error class:& quot；错误失败警报& quot，有效类:& quot有效成功警报& quot//...上例中的更多验证代码这是我们将用来更改错误消息外观的CSS:

label . error . fail-alert { border:2px纯红色；边框-半径:4px行高:1；填充:2px 0 6px 6px背景:# ffe6eb} input . valid . success-alert { border:2px solid # 4c af 50；颜色:绿色；除了定制错误消息，我们还将自己的样式添加到有效的输入元素中。这是CodePen的演示，向我们展示了最终的结果。

更多改变插件行为的选项可以通过设置onfocusout、onkeyup或onclick来设置为false。请记住，Boolean true不是这些键的有效值。这基本上意味着，如果您希望插件验证击键事件或失去对击键事件的关注，只需保持这些选项不变。

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

这些是验证表单时最常用的选项。但是，如果您想要更改错误消息的位置或合并它们，有一些其他的验证选项可能会派上用场。

CodeCanyon上的jQuery表单验证、JavaScript和JQuery表单学习如何自己做简单的表单验证是一项很棒的技能。但是你可以通过从CodeCanyon下载这些有用的jQuery和JavaScript表单来获得更深入的理解:

1。带有步骤表单生成器的JQuery步骤向导

如果你想建立一个多步表单，Timon Step表单下载非常适合你。它有各种表单元素和过渡效果，您可以使用它们来自定义您的作品。Timon也有一个拖放构建器，这意味着你可以在没有任何编码知识的情况下构建表单。它还具有jQuery表单验证。

2.这只是一个高级形式

阅读这个购买的名称会让你确切地知道你在这里得到什么。但是这些形式的内涵远比看起来简单。有超过110种表单可用，或者您可以使用这个框架来制作自己独特的表单。

3。天空形状

我们用高度可定制的天空形状完善了我们的列表。它具有现代元素和各种配色方案。还设计了六种状态，包括悬停、聚焦等。除了这些特性和跨浏览器兼容性，Sky Forms中还有300多个矢量图标。

在本教程中，我们学习了如何使用jQuery插件将表单验证提升到一个新的水平。使用简单的JavaScript表单验证让我们对基本的HTML验证有更多的控制。例如，当输入无效值时，您可以轻松控制显示不同错误消息的方式和时间。

类似地，您还可以指定插件是否应该跳过某些元素的验证。我强烈建议您阅读这个插件的文档以及一些关于如何正确使用它的最佳实践。

在我们的下一篇教程中，您将学习更多基于JavaScript的工具和插件来帮助您轻松地创建和验证表单。

当你在这里的时候，请看看我们关于JavaScript表单和表单验证的其他帖子！

这几篇文章你可能也喜欢：

• 暂无相关推荐文章

本文由主机参考刊发，转载请注明：使用jQuery简化表单验证 https://zhujicankao.com/111069.html